/* ============================================================
   Unit 4 interactive course — custom styles
   Palette lives in shared/css/tokens.css (light :root + html[data-theme="dark"]).
   Do not redeclare --paper / --ink / --brand here.
   ============================================================ */

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Shared content column ? header, stage, footer, cinema align to this */
.shell-pad-x {
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}
.content-rail {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
  box-sizing: border-box;
}
.stage-shell {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 18px 20px 20px;
  box-sizing: border-box;
  min-height: 0;
}
@media (min-width: 640px) {
  .stage-shell {
    padding: 20px 28px 24px;
  }
}
@media (min-width: 1024px) {
  .stage-shell {
    padding: 22px 32px 28px;
  }
}
/* Stage hosts ? L2 page-scroll (flow); L1 / cinema keep absolute fill */
.stage-wrap,
#stageWrap {
  position: relative;
  z-index: 10;
}
.stage-root,
#stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

body[data-layout="1"] #stageWrap {
  overflow: hidden;
}
body[data-layout="1"] #stage {
  position: absolute;
  inset: 0;
  height: auto;
  overflow: hidden;
}

#stageWrap.is-cinema,
body.cinema-mode #stageWrap {
  overflow: hidden;
}
#stage.is-cinema,
body.cinema-mode #stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.stage-scroll {
  flex: none;
  min-height: 0;
  max-height: none;
  min-width: 0;
  overflow: visible;
  padding: 4px 0 16px;
  overflow-anchor: none;
}
body[data-layout="1"] .stage-scroll {
  flex: 1 1 auto;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.stage-scroll.is-reading {
  padding: 8px 0 24px;
}
.slide-head {
  flex-shrink: 0;
  margin-bottom: 16px;
  padding: 4px 0 16px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.slide-head-ref {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 650;
  padding: 5px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.slide-head h2,
.slide-head-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--brand, #0F6B6B);
  max-width: none;
}
.slide-head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.slide-head--guide-only {
  justify-content: flex-end;
}
.slide-head--row .slide-head-title {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.slide-head-guide {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.slide-head-guide:hover {
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  border-color: rgba(0, 0, 0, 0.18);
  background: var(--surface-2);
}
.slide-head-guide iconify-icon {
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

/* Guide popup (sim / quiz help) */
.guide-modal[hidden] { display: none !important; }
.guide-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
}
.guide-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 35, 50, 0.38);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.guide-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 28px));
  max-height: min(84dvh, 560px);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface)) 0%, var(--surface) 28%);
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow:
    0 4px 16px var(--line),
    0 24px 56px rgba(26, 35, 50, 0.14);
  overflow: hidden;
  animation: guideModalIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes guideModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.guide-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  background: rgba(26, 35, 50, 0.04);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.guide-modal-x:hover {
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  background: var(--line);
}
.guide-modal-head {
  padding: 22px 48px 14px 22px;
  border-bottom: 1px solid rgba(26, 35, 50, 0.05);
}
.guide-modal-kicker {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 72%, transparent);
}
.guide-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--deep, var(--ink)) 78%, transparent);
}
.guide-modal-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 107, 107, 0.22) transparent;
}
.guide-modal-section {
  display: grid;
  gap: 8px;
  padding: 14px 15px;
  border-radius: 14px;
  background: rgba(247, 245, 241, 0.85);
  border: 1px solid rgba(26, 35, 50, 0.04);
}
.guide-modal-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 68%, rgba(26, 35, 50, 0.45));
}
.guide-modal-label iconify-icon {
  opacity: 0.75;
  color: var(--brand, #0F6B6B);
}
.guide-modal-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  text-wrap: pretty;
}
.guide-modal-text .guide-steps {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 8px;
}
.guide-modal-text .guide-steps li {
  padding-left: 2px;
  line-height: 1.55;
}
.guide-modal-text .guide-steps b {
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.guide-modal-empty {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  line-height: 1.7;
}
body.guide-modal-open { overflow: hidden; }

/* Laptop: slightly tighter than large; large screens stay at max 18px body */
@media (min-width: 1024px) and (max-width: 1440px) {
  .slide-head h2,
  .slide-head-title {
    font-size: 1.2rem;
  }
  .def-title {
    font-size: 1.22rem;
  }
  .read-title {
    font-size: 1.05rem;
  }

  .vb {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.8;
  }
  .gist-callout .vb {
    font-size: 0.9rem;
    line-height: 1.65;
  }
  .read-list > li .vb {
    font-size: 0.9rem;
  }
  .vb-quote .vb {
    font-size: 0.98rem;
  }
  .compare-pair-card .vb {
    font-size: 0.84rem;
    line-height: 1.7;
  }
  .lesson-lead .vb:first-child {
    font-size: 0.95rem;
  }
  .quiz-q {
    font-size: 1.02rem;
    font-weight: 650;
  }
  .def-line {
    font-size: 15px;
  }
  .def-panel--rich .def-core-text {
    font-size: 1rem; /* 16px on laptop */
  }
  .welcome-hello {
    font-size: 0.98rem;
  }

  .stage-wrap .text-lg,
  .stage-wrap .sm\:text-lg {
    font-size: 0.975rem;
    line-height: 1.75;
  }
  .stage-wrap .text-base,
  .stage-wrap .sm\:text-base {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}

/* Large desktops (>1440): reading text — clear, scan-friendly, no chrome noise */
@media (min-width: 1441px) {
  html, body {
    font-size: 17px;
  }

  /* Lesson titles: clear hierarchy, not oversized */
  .slide-head h2,
  .slide-head-title {
    font-size: clamp(1.28rem, 1.18rem + 0.4vw, 1.48rem);
    line-height: 1.4;
  }
  .read-title {
    font-size: clamp(1.1rem, 1.04rem + 0.25vw, 1.25rem);
    line-height: 1.45;
  }
  .def-title {
    font-size: clamp(1.28rem, 1.18rem + 0.4vw, 1.5rem);
    line-height: 1.35;
  }

  /* Body paragraphs — primary reading surface */
  .vb {
    font-size: 1.125rem; /* ~19px */
    line-height: 2.05;
    letter-spacing: 0.015em;
    font-weight: 400;
  }
  .vb + .vb {
    margin-top: 1.25rem;
  }
  .read-panel > * + * {
    margin-top: 1.55rem;
  }
  .read-panel > .vb + .gist-callout,
  .read-panel > .vb-quote + .gist-callout,
  .read-panel > .read-list + .gist-callout,
  .read-panel > .compare-pair + .gist-callout {
    margin-top: 1.7rem;
  }

  .vb-quote .vb {
    font-size: 1.15rem;
    line-height: 1.95;
  }
  .gist-callout .vb {
    font-size: 1.05rem;
    line-height: 1.85;
    font-weight: 600;
  }
  .read-list > li .vb {
    font-size: 1.05rem;
    line-height: 1.9;
  }
  .compare-pair-card .vb {
    font-size: 1rem;
    line-height: 1.85;
  }
  .lesson-lead .vb:first-child {
    font-size: 1.1rem;
    line-height: 2;
  }
  .vb-note {
    font-size: 1rem;
    line-height: 1.85;
  }
  .quiz-q {
    font-size: 1.14rem;
    font-weight: 650;
    line-height: 1.75;
  }
  .def-line {
    font-size: 1.1rem;
    line-height: 1.95;
  }
  .def-panel--rich .def-core-text {
    font-size: 1.1rem;
    line-height: 1.95;
  }
  .welcome-hello {
    font-size: 1.05rem;
    line-height: 1.9;
  }

  .stage-wrap .text-lg,
  .stage-wrap .sm\:text-lg {
    font-size: 1.1rem;
    line-height: 2;
  }
  .stage-wrap .text-base,
  .stage-wrap .sm\:text-base {
    font-size: 1.05rem;
    line-height: 1.95;
  }

  /* Lesson detail cards — match reading surface on large screens */
  .ld-title {
    font-size: 1.15rem;
  }
  .ld-blurb {
    font-size: 1.1rem;
    line-height: 1.95;
  }
  .ld-top--cat .ld-blurb {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Shell chrome: breadcrumb stays compact even on large reading surface */
  .header-crumb {
    font-size: 12.5px;
    line-height: 1.35;
    gap: 0.16rem;
    letter-spacing: 0.01em;
  }
  .header-crumb iconify-icon {
    width: 12px !important;
    height: 12px !important;
  }
  .header-crumb-sub {
    font-weight: 500;
    color: color-mix(in srgb, var(--ink) 88%, transparent);
  }
  .header-crumb-unit {
    color: color-mix(in srgb, var(--ink) 62%, transparent);
  }
  .nav-item .nav-label {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .sidebar-brand-title {
    font-size: 17px;
  }
  .footer-btn {
    font-size: 15.5px;
  }
}
.beat-stack > * + * {
  margin-top: var(--space-4);
}
.content-stack > * + * {
  margin-top: var(--space-4);
}

/* Equal-height paired sim cards with bottom-aligned actions */
.sim-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: stretch;
}
@media (min-width: 640px) {
  .sim-pair { grid-template-columns: 1fr 1fr; }
}
.sim-pair .rw-app {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sim-pair .rw-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sim-pair .rw-body > .rw-btn {
  margin-top: auto;
}
.sim-pair .rw-body > .rw-btn + p {
  margin-top: 0;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Soft, thin scrollbars — track/thumb tokens live in tokens.css */

:where(.stage-wrap, .stage-root, .sidebar-nav, .chat-messages, .rw-ctx-log, .gpt-stage, .rtcft-scroll, .rtcft-modal-card) {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-soft) var(--scrollbar-track-soft);
}

:where(.stage-wrap, .stage-root, .sidebar-nav, .chat-messages, .rw-ctx-log, .gpt-stage, .rtcft-scroll, .rtcft-modal-card)::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

:where(.stage-wrap, .stage-root, .sidebar-nav, .chat-messages, .rw-ctx-log, .gpt-stage, .rtcft-scroll, .rtcft-modal-card)::-webkit-scrollbar-track {
  background: var(--scrollbar-track-soft);
  border-radius: 999px;
}

:where(.stage-wrap, .stage-root, .sidebar-nav, .chat-messages, .rw-ctx-log, .gpt-stage, .rtcft-scroll, .rtcft-modal-card)::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-soft);
  border-radius: 999px;
  border: 1px solid var(--card-border);
}

:where(.stage-wrap, .stage-root, .sidebar-nav, .chat-messages, .rw-ctx-log, .gpt-stage, .rtcft-scroll, .rtcft-modal-card)::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-soft-hover);
}

/* Override hidden scrollbar in sidebar only */
.sidebar-nav.no-scrollbar {
  -ms-overflow-style: auto;
  scrollbar-width: thin;
}
.sidebar-nav.no-scrollbar::-webkit-scrollbar {
  display: block;
}

/* ============================================================
   App frame + layout1 / layout2 shell
   ============================================================ */

.app-shell {
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: grid;
}

.l2-only { display: none !important; }
body[data-layout="2"] .l2-only { display: flex !important; }
body[data-layout="2"] #layoutBanner.l2-only { display: block !important; }
body[data-layout="2"].is-banner-collapsed #layoutBanner.l2-only,
body[data-layout="2"].is-banner-collapsed #layoutTop.l2-only {
  display: none !important;
}

/* layoutBody: L1 = transparent to grid; L2 = padded side-by-side row */
.layout-body {
  display: contents;
}

/* --- Layout 1: sidebar | header+content (current) --- */
body[data-layout="1"] .app-shell {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header"
    "content";
}
body[data-layout="1"] #layoutTop,
body[data-layout="1"] #layoutBanner { display: none !important; }
body[data-layout="1"] #sidebar { grid-area: unset; }
body[data-layout="1"] #appHeader { grid-area: header; }
body[data-layout="1"] #contentColumn { grid-area: content; }

@media (min-width: 1024px) {
  body[data-layout="1"] .app-shell {
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar content";
  }
  body[data-layout="1"] #sidebar { grid-area: sidebar; }
}

/* --- Layout 2: page scroll; left unit list sticky when content is long --- */
body[data-layout="2"] .app-shell {
  display: flex;
  flex-direction: column;
  grid-template-columns: unset;
  grid-template-rows: unset;
  grid-template-areas: unset;
  background: var(--l2-page-bg);
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  /* keep scrolled content from sitting under sticky breadcrumb */
  scroll-padding-top: calc(var(--l2-sticky-top) + 8px);
  scroll-padding-bottom: 0;
}
body[data-layout="2"] #layoutTop,
body[data-layout="2"] #layoutBanner,
body[data-layout="2"] #appHeader,
body[data-layout="2"] #layoutBody {
  grid-area: unset;
  width: 100%;
  flex: 0 0 auto;
}
body[data-layout="2"] #layoutTop {
  position: relative;
  z-index: 28;
  padding-left: 20px;
  padding-right: 20px;
}
body[data-layout="2"] #layoutBanner {
  position: relative;
  z-index: 15;
  display: block;
  min-height: 200px;
  transition: max-height 0.35s ease, opacity 0.25s ease, min-height 0.35s ease;
}
body[data-layout="2"].is-banner-collapsed #layoutBanner,
body[data-layout="2"].is-banner-collapsed #layoutTop,
body[data-layout="2"] #layoutBanner.is-removed,
#layoutBanner[hidden] {
  display: none !important;
  max-height: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: none !important;
  opacity: 0;
}
body[data-layout="2"] .layout-banner-inner {
  padding-left: max(16px, calc((100% - 1400px) / 2 + 16px));
  padding-right: max(16px, calc((100% - 1400px) / 2 + 16px));
  max-width: none;
}
body[data-layout="2"] .layout-top {
  padding-left: 20px;
  padding-right: 20px;
}

body[data-layout="2"] #appHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 20px;
  padding-right: 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-mid);
  box-shadow: 0 4px 16px var(--line);
}

body[data-layout="2"] #layoutBody {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: visible !important;
  /* Laptop default: full width + professional padding; large screens cap below */
  max-width: none;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  /* no bottom pad ? footer sits flush to screen bottom */
  padding: 12px 20px 0;
  gap: 12px;
  background: transparent;
  align-items: stretch;
}
body[data-layout="2"] #sidebar { grid-area: unset; }
body[data-layout="2"] #contentColumn { grid-area: unset; }
body[data-layout="2"] .layout-toggle-l1 { display: none !important; }
body[data-layout="2"] .sidebar-brand-block { display: none; }
body[data-layout="2"] .sidebar-slot { display: none; }

body[data-layout="2"] {
  --l2-sidebar-w: 320px;
  --l2-sticky-top: 68px;
  --l2-sticky-gap: 12px;
  --l2-sticky-bottom: 0px;
  --l2-footer-h: 52px;
  --l2-panel-h: calc(100dvh - var(--l2-sticky-top) - var(--l2-sticky-gap) - var(--l2-sticky-bottom));
  /* Shared top inset: sidebar unit label + content title align on one line */
  --l2-panel-inset-top: 12px;
}

body[data-layout="2"] #contentColumn {
  flex: 1 1 auto;
  /* Match sidebar: pin below sticky header, never tuck under it */
  position: sticky;
  top: calc(var(--l2-sticky-top) + var(--l2-sticky-gap));
  height: var(--l2-panel-h);
  max-height: var(--l2-panel-h);
  min-height: var(--l2-panel-h);
  display: flex;
  flex-direction: column;
  border-left: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface);
  box-shadow: none;
  border: 1px solid var(--line);
  border-bottom: none;
  overflow: hidden;
  padding-bottom: var(--l2-footer-h);
  z-index: 10;
}

body[data-layout="2"] .slide-head {
  position: relative;
  top: auto;
  z-index: 1;
  margin-bottom: 6px;
  /* Top gap comes from stage-shell (--l2-panel-inset-top), not stacked here */
  padding: 0 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* Sidebar meta + content title share the same top inset */
body[data-layout="2"] .sidebar-unit-meta {
  padding-top: var(--l2-panel-inset-top);
}
body[data-layout="2"] .slide-head-title,
body[data-layout="2"] .slide-head h2 {
  margin-top: 0;
}
body[data-layout="2"] .slide-head-ref + .slide-head-title,
body[data-layout="2"] .slide-head-ref + h2 {
  margin-top: 10px;
}

/* Content scrolls inside card (same top lock as sidebar) */
body[data-layout="2"]:not(.cinema-mode) #stageWrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  z-index: 1;
}
body[data-layout="2"]:not(.cinema-mode) #stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
body[data-layout="2"]:not(.cinema-mode) .stage-shell {
  height: auto;
  min-height: 0;
  padding-top: var(--l2-panel-inset-top);
}
body[data-layout="2"]:not(.cinema-mode) .stage-scroll {
  flex: none;
  max-height: none;
  height: auto;
  overflow: visible;
  padding-bottom: 20px;
}
body[data-layout="2"]:not(.cinema-mode) .stage-scroll.is-rtcft,
body[data-layout="2"]:not(.cinema-mode) .stage-scroll.is-rtcft > *,
body[data-layout="2"]:not(.cinema-mode) .rtcft-host,
body[data-layout="2"]:not(.cinema-mode) .rtcft-split {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: none !important;
  overflow: visible !important;
}
body[data-layout="2"]:not(.cinema-mode) .rtcft-split-grid,
body[data-layout="2"]:not(.cinema-mode) .rtcft-panel-left,
body[data-layout="2"]:not(.cinema-mode) .rtcft-panel-right,
body[data-layout="2"]:not(.cinema-mode) .rtcft-out-shell,
body[data-layout="2"]:not(.cinema-mode) .rtcft-out-body {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* L2 cinema: fill the pinned content card (no empty band under the frame) */
body[data-layout="2"].cinema-mode #stageWrap,
body[data-layout="2"] #stageWrap.is-cinema {
  flex: 1 1 auto !important;
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
}
body[data-layout="2"].cinema-mode #stage,
body[data-layout="2"] #stage.is-cinema {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body[data-layout="2"].cinema-mode .cinema-stage,
body[data-layout="2"].cinema-mode .cinema-stage .cinema-column {
  height: 100%;
  min-height: 0;
}

@media (min-width: 1024px) {
  body[data-layout="2"] #layoutBody {
    flex-direction: row;
    align-items: flex-start;
    /* Laptop: use full viewport width with calm side padding */
    max-width: none;
    width: 100%;
    padding: 14px 28px 0;
    gap: 18px;
    min-height: 0;
    height: auto;
  }

  /* Slot unused ? sidebar is in-flow sticky like content */
  body[data-layout="2"] .sidebar-slot {
    display: none !important;
  }
  body[data-layout="2"] #sidebar {
    position: sticky !important;
    top: calc(var(--l2-sticky-top) + var(--l2-sticky-gap)) !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    translate: none !important;
    width: var(--l2-sidebar-w) !important;
    flex: 0 0 var(--l2-sidebar-w);
    height: var(--l2-panel-h) !important;
    max-height: var(--l2-panel-h) !important;
    min-height: var(--l2-panel-h);
    align-self: flex-start;
    z-index: 40 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: none;
    border: 1px solid var(--line);
    border-bottom: none;
    background: var(--surface);
    margin: 0 !important;
  }
  body[data-layout="2"] #sidebar.sidebar.open {
    transform: none !important;
  }
  body[data-layout="2"] #sidebar .sidebar-nav,
  body[data-layout="2"] #sidebar #navList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden;
    overflow-y: auto !important;
  }
  body[data-layout="2"] #sidebar .sidebar-progress-foot {
    flex: 0 0 var(--l2-footer-h) !important;
    height: var(--l2-footer-h);
    min-height: var(--l2-footer-h);
    max-height: var(--l2-footer-h);
    margin-top: auto;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
    background: var(--surface);
    box-shadow: 0 -8px 20px var(--line);
  }
  body[data-layout="2"] #sidebar .sidebar-progress-foot > .flex {
    margin-bottom: 6px;
  }

  body[data-layout="2"] #contentColumn {
    position: sticky !important;
    top: calc(var(--l2-sticky-top) + var(--l2-sticky-gap)) !important;
    inset: auto !important;
    height: var(--l2-panel-h) !important;
    max-height: var(--l2-panel-h) !important;
    min-height: var(--l2-panel-h);
    align-self: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--surface);
    box-shadow: none;
  }
}

@media (min-width: 1280px) {
  body[data-layout="2"] #layoutBody {
    max-width: none;
    width: 100%;
    padding: 14px 32px 0;
    gap: 18px;
  }
  body[data-layout="2"] #appHeader,
  body[data-layout="2"] .layout-top {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Beat footer: fixed flush to viewport bottom, aligned to content card */
body[data-layout="2"] #contentColumn > footer,
body[data-layout="2"] #contentColumn > .content-nav-foot {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  top: auto !important;
  z-index: 45;
  flex: 0 0 var(--l2-footer-h);
  margin-top: 0;
  height: var(--l2-footer-h);
  min-height: var(--l2-footer-h);
  max-height: var(--l2-footer-h);
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  align-items: center;
  background: transparent !important;
  border-top: none !important;
  border-radius: 0;
  box-shadow: none !important;
}
body[data-layout="2"] #contentColumn > footer > div,
body[data-layout="2"] #contentColumn > .content-nav-foot > div {
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}
body[data-layout="2"] #contentColumn > footer .footer-btn,
body[data-layout="2"] #contentColumn > .content-nav-foot .footer-btn {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 12px;
}

/* Large displays: restore centered max-width shell */
@media (min-width: 1536px) {
  body[data-layout="2"] #layoutBody {
    max-width: 1400px;
    padding: 14px 24px 0;
    gap: 18px;
  }
  body[data-layout="2"] #appHeader,
  body[data-layout="2"] .layout-top {
    padding-left: max(24px, calc((100% - 1400px) / 2 + 24px));
    padding-right: max(24px, calc((100% - 1400px) / 2 + 24px));
  }
}

/* Top + banner scroll away naturally; breadcrumb stays sticky ? no height collapse (smooth scroll) */

/* Layout2 top chrome */
.layout-top {
  position: relative;
  z-index: 25;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--gutter-x);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.app-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.layout-top-brand {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.layout-top-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}
.layout-top-partner {
  display: block;
  height: 40px;
  width: auto;
  max-width: min(180px, 34vw);
  object-fit: contain;
}
@media (min-width: 960px) {
  .layout-top-partner {
    height: 48px;
    max-width: 200px;
  }
}
@media (max-width: 640px) {
  .layout-top-partner {
    height: 32px;
    max-width: 120px;
  }
  .layout-top-end {
    gap: 8px;
  }
}
html[data-theme="dark"] .layout-top-partner {
  opacity: 0.92;
}
/* Theme lives in layoutTop when chrome is visible; keep header toggle for collapsed chrome */
body[data-layout="2"]:not(.is-banner-collapsed) .app-header .theme-toggle {
  display: none;
}
.nu-logo {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
  border: none;
}
.nu-logo--top {
  width: 52px;
  height: 52px;
  border-radius: 0;
}
.nu-logo--sidebar {
  width: 56px;
  height: 56px;
  border-radius: 0;
}

/* Layout2 banner ? full-bleed Unsplash hero */
.layout-banner {
  position: relative;
  z-index: 15;
  flex-shrink: 0;
  min-height: 200px;
  overflow: hidden;
  background: #152A32;
}
.layout-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.layout-banner-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(21, 42, 50, 0.82) 0%, rgba(21, 42, 50, 0.55) 48%, rgba(15, 107, 107, 0.35) 100%);
  pointer-events: none;
}
.layout-banner-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: inherit;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: var(--space-4) 20px;
}
.layout-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(15, 107, 107, 0.88);
}
.layout-banner-title {
  margin: 0;
  font-family: 'Noto Serif Bengali', serif;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  max-width: min(36ch, 100%);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

@media (min-width: 640px) {
  .layout-banner { min-height: 180px; }
}
@media (min-width: 1024px) {
  .layout-banner { min-height: 192px; }
}

/* Layout toggle (1 / 2) */
.layout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.layout-toggle-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 9px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.layout-toggle-btn:hover {
  color: var(--deep);
  background: rgba(214, 228, 240, 0.35);
}
.layout-toggle-btn.is-active {
  color: #fff;
  background: var(--brand);
}
.layout-toggle-btn.is-active:hover {
  color: #fff;
  background: var(--teal);
}

.layout-alt-link {
  display: none;
}

.project-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(15, 107, 107, 0.16);
  background: linear-gradient(135deg, rgba(15, 107, 107, 0.08), rgba(214, 228, 240, 0.18));
  color: var(--brand);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}
button.project-chip {
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
button.project-chip:hover,
button.project-chip.is-on {
  background: rgba(15, 107, 107, 0.12);
  border-color: rgba(15, 107, 107, 0.3);
  color: var(--brand);
}
.project-chip iconify-icon {
  flex-shrink: 0;
  color: var(--brand);
}
@media (max-width: 640px) {
  .project-chip span { display: none; }
  .project-chip { padding: 7px; border-radius: 12px; }
}

.content-column {
  min-height: 0;
  overflow: visible;
  border-left: 1px solid var(--line);
}
body[data-layout="1"] .content-column {
  overflow: hidden;
}

/* Header titles — truncate safely on mobile */
.header-titles {
  min-width: 0;
  overflow: hidden;
}
.header-crumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.header-crumb-row .header-crumb {
  flex: 1 1 auto;
  min-width: 0;
}
.header-chrome-expand[hidden] {
  display: none !important;
}
.header-crumb {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.14rem !important;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
  color: var(--slate);
  letter-spacing: 0.01em;
}
.header-crumb iconify-icon {
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand);
  opacity: 0.85;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}
.header-crumb-home {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  transition: color 0.15s ease;
  line-height: 1;
}
.header-crumb-home span {
  line-height: 1;
}
.header-crumb-home:hover {
  color: #0F6B6B;
}
.header-crumb-sep {
  margin-inline: 0;
  padding-inline: 0;
  color: color-mix(in srgb, var(--ink) 32%, transparent);
  font-weight: 400;
  user-select: none;
  line-height: 1;
}
.header-crumb-unit {
  flex: 0 1 auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.header-crumb-sub {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.header-title {
  display: none;
}
/* Laptop: keep breadcrumb compact */
@media (min-width: 1024px) {
  .header-crumb {
    font-size: 11.5px;
    gap: 0.12rem !important;
  }
  .header-crumb iconify-icon {
    width: 11px !important;
    height: 11px !important;
  }
  .header-crumb-sep {
    margin-inline: 0;
  }
  .header-crumb-home {
    gap: 0.16rem;
  }
}
@media (min-width: 1280px) {
  .header-crumb {
    font-size: 12px;
    gap: 0.14rem !important;
    letter-spacing: 0.01em;
  }
  .header-crumb iconify-icon {
    width: 12px !important;
    height: 12px !important;
  }
  .header-crumb-sep {
    margin-inline: 0;
    font-size: 0.95em;
  }
  .header-crumb-home {
    gap: 0.18rem;
  }
  .header-crumb-unit {
    max-width: 40%;
  }
}
@media (min-width: 1441px) {
  .header-crumb {
    font-size: 12.5px;
    font-weight: 450;
    line-height: 1.35;
    gap: 0.16rem !important;
    letter-spacing: 0.01em;
  }
  .header-crumb iconify-icon {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
  }
  .header-crumb-home {
    font-weight: 500;
    gap: 0.18rem;
  }
  .header-crumb-sep {
    margin-inline: 0;
    font-size: 1em;
    color: color-mix(in srgb, var(--ink) 28.000000000000004%, transparent);
  }
  .header-crumb-unit {
    max-width: 36%;
    font-weight: 500;
    color: color-mix(in srgb, var(--ink) 62%, transparent);
  }
  .header-crumb-sub {
    font-weight: 500;
    color: color-mix(in srgb, var(--ink) 88%, transparent);
  }
}
@media (min-width: 640px) {
  .header-title { display: none; }
}
@media (max-width: 639px) {
  #btnFullscreen {
    display: none !important;
  }
  #appHeader .theme-toggle,
  .app-header .theme-toggle {
    display: none !important;
  }
  #appHeader.app-header,
  body[data-layout="2"] #appHeader {
    gap: 8px;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .header-crumb { font-size: 12px; }
  .header-crumb iconify-icon {
    width: 12px;
    height: 12px;
    margin-right: 1px;
  }
  .header-title { display: none; }
  .layout-toggle {
    padding: 2px;
  }
  .layout-toggle-btn {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: 12px;
  }
  .subnav-cluster {
    padding: 2px;
  }
  .subnav-edge {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
  }
}

@media (min-width: 1024px) {
  body[data-layout="1"] #appHeader {
    border-left: 1px solid var(--line);
  }
}

.sidebar {
  box-shadow: 1px 0 0 var(--line);
  background: var(--surface);
  z-index: 60 !important; /* above sticky breadcrumb / top chrome */
}
.sidebar-brand-block {
  border-bottom: 1px solid var(--line);
}
.sidebar.open { transform: translateX(0) !important; }

#scrim {
  z-index: 55 !important; /* under sidebar, over page chrome */
  background: var(--scrim);
}

.sidebar-brand-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.sidebar-section-head {
  padding: var(--space-2) var(--space-3) var(--space-2);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgb(151 151 151);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-1);
}
.sidebar-unit-label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand);
}

.sidebar-unit-switcher {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 12%, var(--surface)) 0%,
    color-mix(in srgb, var(--sky) 55%, var(--surface)) 48%,
    color-mix(in srgb, #0891B2 10%, var(--surface)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  box-shadow:
    0 1px 2px rgba(15, 107, 107, 0.06),
    0 6px 16px rgba(15, 107, 107, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.unit-arrow {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 10px;
  border: none;
  color: var(--brand);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(15, 107, 107, 0.12);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.unit-arrow:hover {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 107, 107, 0.28);
}
.unit-arrow:disabled {
  opacity: .35;
  pointer-events: none;
  color: rgba(15, 107, 107, 0.45);
  box-shadow: none;
}

/* per-topic accent colors in sidebar (SkillUp-style pastel circles) */
.nav-item[data-accent="0"] { --nav-c: var(--nav-0-c); --nav-bg: var(--nav-0-bg); --nav-ring: var(--nav-0-ring); }
.nav-item[data-accent="1"] { --nav-c: var(--nav-1-c); --nav-bg: var(--nav-1-bg); --nav-ring: var(--nav-1-ring); }
.nav-item[data-accent="2"] { --nav-c: var(--nav-2-c); --nav-bg: var(--nav-2-bg); --nav-ring: var(--nav-2-ring); }
.nav-item[data-accent="3"] { --nav-c: var(--nav-3-c); --nav-bg: var(--nav-3-bg); --nav-ring: var(--nav-3-ring); }
.nav-item[data-accent="4"] { --nav-c: var(--nav-4-c); --nav-bg: var(--nav-4-bg); --nav-ring: var(--nav-4-ring); }
.nav-item[data-accent="5"] { --nav-c: var(--nav-5-c); --nav-bg: var(--nav-5-bg); --nav-ring: var(--nav-5-ring); }

.nav-item {
  --nav-progress: #2E8B3A;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 12px 12px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: background .18s ease;
}
.nav-item .nav-idx {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  font-family: var(--font-ui);
  border: none;
  color: var(--nav-c, var(--indigo));
  background: var(--nav-bg, rgba(214, 228, 240,.28));
  transition: all .2s ease;
}
.nav-item .nav-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-item .nav-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.nav-item .nav-copy .nav-label {
  flex: none;
  display: -webkit-box;
}
.nav-item .nav-obj {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.nav-item.is-active .nav-obj {
  color: color-mix(in srgb, var(--nav-c, #0F6B6B) 55%, transparent);
}
.nav-item .nav-text {
  display: contents;
}
.nav-item .nav-sub,
.nav-item .nav-status {
  display: none;
}
.nav-item .nav-state {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.nav-item .nav-state .icon-chevron {
  color: color-mix(in srgb, var(--ink) 32%, transparent);
}
.nav-item:hover {
  background: rgba(46, 139, 58, 0.04);
}

.nav-item.is-active {
  background: rgba(46, 139, 58, 0.08);
  box-shadow: none;
  transform: none;
}
.nav-item.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0;
  background: var(--nav-progress);
  opacity: 1;
}
.nav-item.is-active .nav-idx {
  background: var(--nav-progress);
  color: #fff;
  box-shadow: none;
}
.nav-item.is-active .nav-label {
  color: var(--deep);
  font-weight: 600;
}

.nav-item.is-done .nav-idx {
  background: var(--nav-bg, rgba(15, 107, 107, 0.1));
  color: var(--nav-c, var(--brand));
}
.nav-item.is-locked {
  opacity: 1;
}
.nav-item.is-locked:hover { background: transparent; box-shadow: none; }
.nav-item.is-locked .nav-idx {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  background: var(--nav-bg, var(--line));
}
.nav-item.is-locked .nav-label {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}

.icon-lock, .icon-check, .icon-chevron { display: inline-flex; width: 14px; height: 14px; }
.icon-lock { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.icon-check { color: #2E8B3A; }
.nav-item.is-active .icon-lock,
.nav-item.is-active .icon-check { color: #2E8B3A; }
iconify-icon { display: inline-block; vertical-align: middle; }
.nav-state iconify-icon { display: block; }

.sidebar-progress-label {
  font-size: 14px;
  font-weight: 500;
}
.sidebar-progress-pct {
  font-size: 14px;
  font-weight: 600;
}
.sidebar-reset-btn {
  font-size: 13.5px;
  font-weight: 500;
}

.progress-fill {
  background: linear-gradient(90deg, #0891B2, #06B6D4);
  transition: width .5s cubic-bezier(.22,.9,.3,1), background .4s ease;
}
.progress-fill.is-complete {
  background: linear-gradient(90deg, #16A34A, #22C55E);
}
.sidebar-progress-pct.is-active { color: #0891B2; }
.sidebar-progress-pct.is-complete { color: #16A34A; }

/* pagination dots — only the active step is highlighted */
.sub-dot-pending { background: var(--line-mid); }
.sub-dot-done    { background: var(--line-mid); }
.sub-dot-current {
  width: 14px;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.14);
}
.beat-dot-pending { background: var(--line-mid); }
.beat-dot-done    { background: var(--line-mid); }
.beat-dot-current {
  width: 18px;
  background: var(--brand, #0F6B6B);
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.14);
  cursor: default;
}

.lesson-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.lesson-pages-count {
  flex-shrink: 0;
  font-family: "IBM Plex Sans", "Noto Sans Bengali", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lesson-pages-now { color: var(--brand, #0F6B6B); }
.lesson-pages-sep {
  margin: 0 2px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 32%, transparent);
}
.lesson-pages-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: min(100%, 22rem);
}
button.beat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  transition: width 0.22s ease, height 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.15s ease;
  cursor: pointer;
  background: var(--line-mid);
}
button.beat-dot.beat-dot-pending {
  background: var(--line-mid);
}
button.beat-dot.beat-dot-done {
  background: var(--line-mid);
}
button.beat-dot.beat-dot-current {
  width: 18px;
  height: 8px;
  background: var(--brand, #0F6B6B);
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.16);
  cursor: default;
}
button.beat-dot:disabled {
  cursor: default;
}
button.beat-dot.beat-dot-done:hover:not(:disabled) {
  transform: scale(1.2);
}
button.beat-dot:focus-visible {
  outline: 2px solid var(--brand, #0F6B6B);
  outline-offset: 2px;
}

/* subunit navigator ? unified smart cluster */
.subnav-cluster {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
}
.subnav-edge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  border-radius: 999px;
  border: none;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease, transform .15s ease;
}
.subnav-edge-prev {
  color: var(--brand);
  background: rgba(15, 107, 107, 0.06);
}
.subnav-edge-prev:hover:not(:disabled) {
  background: rgba(15, 107, 107, 0.12);
}
.subnav-edge-next {
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, #6B4AD4 100%);
}
.subnav-edge-next:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--teal) 0%, var(--brand) 100%);
}
.subnav-edge:disabled {
  opacity: .3;
  pointer-events: none;
}
.subnav-edge:active:not(:disabled) {
  transform: scale(0.96);
}
.subnav-mid {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  max-width: 200px;
  padding: 2px 12px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
@media (min-width: 640px) {
  .subnav-mid { display: flex; }
}
.subnav-mid-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.subnav-count {
  font-family: var(--font-ui), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.subnav-count-now {
  color: var(--brand);
  font-size: 13.5px;
}
.subnav-count-sep {
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  margin: 0 2px;
}
.subnav-dots {
  display: none;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
@media (min-width: 1280px) {
  .subnav-dots { display: flex; }
}
.sub-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transition: width .28s ease, background .28s ease, box-shadow .28s ease;
}
.subnav-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(21, 42, 50, 0.07);
  overflow: hidden;
}
.subnav-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0891B2 0%, var(--brand) 72%, #9B7FFF 100%);
  transition: width .5s cubic-bezier(.22,.9,.3,1);
}

/* legacy footer / other subnav buttons */
.subnav-btn {
  display: inline-flex; align-items: center; gap: var(--gap-tight);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px; font-weight: 500;
  padding: var(--pad-btn);
  border-radius: 12px;
  border: none;
  color: var(--indigo);
  background: var(--surface-2);
  transition: background .2s ease, color .2s ease;
}
.subnav-btn:hover { background: rgba(214, 228, 240,.4); }
.subnav-btn:disabled { opacity: .3; pointer-events: none; }
.subnav-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: none;
}
.subnav-primary:hover { background: var(--teal); }

.footer-btn {
  display: inline-flex; align-items: center; gap: var(--gap-tight);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 15px; font-weight: 600;
  padding: 10px 16px;
  border-radius: 14px;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.footer-btn iconify-icon,
.subnav-edge iconify-icon {
  display: inline-flex !important;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  min-width: 14px;
  min-height: 14px;
  opacity: 1 !important;
  visibility: visible !important;
}
.footer-btn-ghost {
  border: none;
  color: var(--indigo);
  background: var(--surface-2);
}
.footer-btn-ghost:hover { background: color-mix(in srgb, var(--sky) 40%, var(--surface-2)); }
.footer-btn-solid {
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  box-shadow: none;
}
.footer-btn-solid:hover { background: var(--teal); }
html[data-theme="dark"] .footer-btn-solid,
html[data-theme="dark"] .footer-btn-solid iconify-icon {
  color: #fff;
}

/* ============================================================
   Motion / interaction styles (slides & sims)
   ============================================================ */

@keyframes beatIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInFwd {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInBack {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.beat-enter      { animation: beatIn .5s cubic-bezier(.22,.9,.3,1) both; }
.slide-enter-fwd  { animation: slideInFwd .48s cubic-bezier(.22,.9,.3,1) both; }
.slide-enter-back { animation: slideInBack .48s cubic-bezier(.22,.9,.3,1) both; }

@keyframes shakeX {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.shake { animation: shakeX .3s ease 2; }

@keyframes inkPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--secondary-rgb), 0.2); }
  100% { box-shadow: 0 0 0 10px rgba(var(--secondary-rgb), 0); }
}
.pulse-once { animation: inkPulse .55s ease-out 1; }

@keyframes tokenPop {
  0% { opacity: 0; transform: scale(.6) translateY(8px); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.token-pop { animation: tokenPop .4s cubic-bezier(.34,1.56,.64,1) both; }

.prob-bar { transition: width .7s cubic-bezier(.22,.9,.3,1); }
.jar-fill { transition: height .8s cubic-bezier(.22,.9,.3,1); }

@keyframes tokenFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(70px) rotate(14deg); }
}
.token-fall { animation: tokenFall 1s ease-in both; }

@keyframes caretBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.caret { animation: caretBlink .8s step-end infinite; }

.flip-card { perspective: 900px; }
.flip-inner {
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22,.9,.3,1);
  position: relative; width: 100%; height: 100%;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--radius-md); overflow: hidden;
}
.flip-back { transform: rotateY(180deg); }

.curtain { transition: transform .7s cubic-bezier(.22,.9,.3,1); }
.curtain.open-left  { transform: translateX(-101%); }
.curtain.open-right { transform: translateX(101%); }

@keyframes orbitGlow {
  0%,100% { opacity: .55; }
  50% { opacity: 1; }
}
.orbit-node-active { animation: orbitGlow 1.6s ease-in-out infinite; }

@keyframes dotPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.28); }
}
.dot-current { animation: dotPulse 1.8s ease-in-out infinite; }

/* ---------- Reading / plain-text lesson surface (project-wide) ---------- */
.read-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 2px 8px;
  border-radius: 0;
  background: var(--surface);
  border: none;
  box-shadow: none;
  animation: none;
}
.read-panel > * + * {
  margin-top: 1.35rem;
}
.read-panel > .def-kicker + *,
.read-panel > .read-title + *,
.read-panel > .vb-quote + .gist-callout,
.read-panel > .compare-pair + .gist-callout,
.read-panel > .read-list + .gist-callout,
.read-panel > .vb + .gist-callout {
  margin-top: 1.5rem;
}
.read-panel > .def-kicker {
  margin-top: 0;
  margin-bottom: 0;
  align-self: flex-start;
  width: fit-content;
}
.read-panel .read-kicker,
.read-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.15rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
}
.read-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.15rem);
  font-weight: 650;
  line-height: 1.4;
  color: var(--deep);
  letter-spacing: -0.01em;
}
.read-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.read-list > li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
}
.read-list > li > .read-bullet {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(15, 107, 107, 0.1);
}
.read-list > li .vb {
  margin: 0;
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem);
}

.vb {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.125rem); /* max 18px */
  line-height: 1.9;
  font-weight: 400;
  color: var(--read-ink);
  letter-spacing: 0.01em;
  text-wrap: pretty;
}
.vb + .vb { margin-top: 0.95rem; }
.vb strong,
.vb b {
  font-weight: 600;
  color: var(--term, #2F6FAD);
}

.vb-quote {
  position: relative;
  margin: 0;
  border-inline-start: 3px solid var(--brand);
  background:
    linear-gradient(105deg, rgba(15, 107, 107, 0.08), rgba(15, 107, 107, 0.015) 58%, transparent);
  border-radius: 0 16px 16px 0;
  padding: 0.95rem 1.15rem 0.95rem 1.05rem;
}
.vb-quote::before {
  content: '?';
  position: absolute;
  top: 0.15rem;
  inset-inline-end: 0.7rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: rgba(15, 107, 107, 0.18);
  pointer-events: none;
}
.vb-quote .vb {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); /* max 18px */
  line-height: 1.78;
  font-weight: 500;
  color: var(--deep);
}

/* Context / secondary line under a definition */
.vb-note {
  font-size: clamp(0.92rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.7;
  color: color-mix(in srgb, var(--read-ink) 72%, transparent);
  font-weight: 400;
}

/* Gist / takeaway callout ? scannable ???????? */
.gist-callout {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0;
  padding: 1.05rem 1.15rem;
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 4%, var(--surface)), color-mix(in srgb, var(--amber) 1.5%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--amber) 14%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--amber) 4%, transparent);
}
.gist-callout-ico {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
  margin-top: 0.05rem;
}
.gist-callout-body { min-width: 0; flex: 1; }
.gist-callout-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--amber) 85%, var(--ink));
}
.gist-callout .vb {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 0.9rem + 0.15vw, 1.02rem);
  line-height: 1.65;
  font-weight: 600;
  color: var(--deep);
  margin: 0;
}

/* Definition opener ? flat stack, no nested card shell */
.read-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.read-stack > .def-kicker {
  margin: 0;
  align-self: flex-start;
  width: fit-content;
}
.read-stack > .vb-quote,
.read-stack > .gist-callout,
.read-stack > .vb-note,
.read-stack > .vb {
  margin: 0;
  width: 100%;
}

/* Legacy alias ? keep transparent if any old markup remains */
.def-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.def-card > .def-kicker {
  margin-bottom: 0;
  align-self: flex-start;
  width: fit-content;
}
.def-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.def-card-body > * + * { margin-top: 0; }
.def-card .vb-quote,
.def-card .gist-callout { margin: 0; }

/* Contrast pair (e.g. Discriminative vs Generative) */
.compare-pair {
  display: grid;
  gap: 1rem;
  margin: 0;
}
@media (min-width: 640px) {
  .compare-pair {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
  }
}
.compare-pair-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  min-height: 100%;
}
.compare-pair-card--muted {
  border-color: color-mix(in srgb, var(--slate) 22%, transparent);
  background: color-mix(in srgb, var(--slate) 4%, var(--surface));
}
.compare-pair-card--accent {
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.compare-pair-label {
  margin: 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
.compare-pair-card--muted .compare-pair-label { color: var(--slate); }
.compare-pair-card--accent .compare-pair-label { color: var(--brand); }
.compare-pair-card .vb {
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.975rem);
  line-height: 1.72;
  font-weight: 400;
  color: color-mix(in srgb, var(--read-ink) 92%, transparent);
  margin: 0;
}

.stage-scroll .font-serifbn {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.stage-scroll h3.font-serifbn,
.read-panel h3 {
  line-height: 1.4;
  color: var(--deep);
}

/* ---------- read more: >4 lines ? clamp to 2 lines ---------- */
.read-more { margin-block: 0.15rem 0.35rem; }
.read-more + .read-more { margin-top: 0.85rem; }
.read-more-body.is-clamped > .vb,
.read-more-body.is-clamped > p.vb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.45rem;
  padding: 0.15rem 0;
  font-family: "Noto Sans Bengali", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.read-more-btn:hover { color: var(--teal, #4A32A8); }
.read-more-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .read-more-btn { transition: none; }
  .dg-remember-card,
  .dg-remember-body,
  .dg-remember-hint,
  .dg-remember-ico,
  .dg-remember-check,
  .dg-tip-note,
  .dg-tip-body,
  .dg-tip-hint {
    transition: none !important;
    animation: none !important;
  }
  .dg-remember-card.is-on .dg-remember-body,
  .dg-tip-note.is-on .dg-tip-body {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

.stack-dim { opacity: .45; transition: opacity .4s ease; }

/* ============================================================
   Cinema storytelling (intro / objectives / definition)
   ============================================================ */

/* ============================================================
   Cinema mode: ONE full-bleed background on #stageWrap
   Frame fills the stage; .cinema-center keeps content like other subunits
   ============================================================ */
#stageWrap {
  background: var(--surface);
}
#stageWrap::before {
  display: none;
}
#stageWrap::after {
  display: none;
}
#stage {
  z-index: 1;
}
#stageWrap.is-cinema {
  background:
    radial-gradient(ellipse 55% 48% at 10% 14%, rgba(15, 107, 107, 0.06), transparent 62%),
    radial-gradient(ellipse 50% 42% at 90% 18%, rgba(168, 220, 214, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 45% at 78% 88%, rgba(214, 228, 240, 0.28), transparent 60%),
    linear-gradient(165deg, var(--cinema-dusk-top) 0%, var(--cinema-dusk-mid) 48%, var(--cinema-dusk-bot) 100%);
}
body.cinema-mode .stage-tint {
  opacity: 0;
}

#stage.is-cinema,
.cinema-stage,
.cinema-stage .cinema-column {
  background: transparent;
}

.cinema-stage .cinema-beat-host,
.cinema-stage .cinema-beat-host > div,
.cinema-stage .beat-enter,
.cinema-stage .beat-enter > div {
  height: 100%;
  min-height: 0;
}

.cinema-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: min(420px, calc(100dvh - 200px));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--cinema-text);
  box-shadow: none;
}

/* Theater: no second panel ? transparent shell on shared stageWrap bg */
.cinema-stage .cinema-frame,
.cinema-stage .cinema-frame.is-opening {
  min-height: 0;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
}
.cinema-stage .cinema-letterbox::before,
.cinema-stage .cinema-letterbox::after {
  display: none;
}
.cinema-stage .cinema-slide {
  background: transparent;
}
/* Show scene motifs on light intro ? visual cards appear with narration */
.cinema-stage .narrate-motif {
  display: block;
}
.cinema-stage .cinema-titlecard {
  background: transparent;
  backdrop-filter: none;
}

/* Same content width/padding as other subunits */
.cinema-center {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
  box-sizing: border-box;
}

/* Pause + Skip HUD ? hidden (pause + ?????? ???) */
.cinema-hud {
  display: none !important;
}
.cinema-hud-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-tight);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: var(--pad-btn);
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  color: var(--deep);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background .2s ease, opacity .3s ease, color .2s ease;
}
.cinema-hud-btn:hover {
  background: var(--surface);
  color: var(--indigo);
}
.cinema-hud-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.cinema-hud-skip {
  background: rgba(15, 107, 107, 0.08);
  border-color: rgba(15, 107, 107, 0.16);
  color: var(--indigo);
}
.cinema-frame.is-paused .cinema-tick-ring,
.cinema-frame.is-paused .cinema-particles span,
.cinema-frame.is-paused .cinema-slide-inner {
  animation-play-state: paused !important;
}

/* floating dust particles */
.cinema-particles {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.cinema-particles span {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(15, 107, 107, 0.22);
  animation: particleDrift linear infinite;
  opacity: 0;
}
@keyframes particleDrift {
  0% { transform: translateY(20px); opacity: 0; }
  15% { opacity: .7; }
  85% { opacity: .5; }
  100% { transform: translateY(-110%); opacity: 0; }
}

/* play-to-start gate */
.cinema-startgate {
  position: absolute; inset: 0; z-index: 25;
  display: flex;
  align-items: center; justify-content: center;
  padding: 1.5rem 0;
  transition: opacity .4s ease, visibility .4s ease;
}
.cinema-startgate .cinema-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .85rem;
  text-align: center;
}
.cinema-startgate.is-gone {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.cinema-start-ring {
  width: 88px; height: 88px; border-radius: 50%;
  border: 2px solid rgba(214, 228, 240,.28);
  display: flex; align-items: center; justify-content: center;
  animation: startPulse 2s ease-in-out infinite;
  background: rgba(214, 228, 240,.1);
}
@keyframes startPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(214, 228, 240,.2); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(214, 228, 240,0); transform: scale(1.03); }
}
.cinema-start-btn {
  width: 64px; height: 64px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--secondary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.28);
  transition: transform .2s ease, background .2s ease;
}
.cinema-start-btn:hover { background: color-mix(in srgb, var(--secondary) 88%, #000); transform: scale(1.05); }
.cinema-start-label {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 14px; color: var(--cinema-muted);
}

/* countdown tick ring */
.cinema-tick-wrap {
  position: relative;
  width: clamp(7rem, 22vw, 10rem);
  height: clamp(7rem, 22vw, 10rem);
  display: flex; align-items: center; justify-content: center;
  margin: .5rem 0;
}
.cinema-tick-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(214, 228, 240,.15);
  border-top-color: var(--cinema-hi);
  animation: tickSpin .78s linear infinite;
}
@keyframes tickSpin {
  to { transform: rotate(360deg); }
}
.cinema-shutter-shine {
  position: absolute; inset: 0; z-index: 21; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(214, 228, 240,.18) 50%, transparent 60%);
  transform: translateX(-120%);
  opacity: 0;
}
.cinema-frame.is-opening.is-open .cinema-shutter-shine {
  animation: shutterShine 1.1s ease-out both;
}
@keyframes shutterShine {
  0% { transform: translateX(-120%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.cinema-letterbox::before,
.cinema-letterbox::after {
  content: '';
  position: absolute; left: 0; right: 0; z-index: 30;
  height: 12px;
  background: transparent;
  pointer-events: none;
}
.cinema-letterbox::before { top: 0; }
.cinema-letterbox::after { bottom: 0; }
.cinema-letterbox.thin::before,
.cinema-letterbox.thin::after { height: 10px; }

.cinema-grain {
  position: absolute; inset: 0; z-index: 28; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); }
  33% { transform: translate(-1%, 1%); }
  66% { transform: translate(1%, -1%); }
  100% { transform: translate(0,0); }
}

.cinema-meta {
  font-family: var(--font-ui);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cinema-muted);
}

/* ---- slide track ---- */
.cinema-slides {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.cinema-slide-track {
  display: flex;
  width: 300%;
  height: 100%;
  transform: translateX(0);
  transition: transform .7s cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}
.cinema-slide {
  position: relative;
  flex: 0 0 33.3333%;
  width: 33.3333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  overflow: hidden;
  background: transparent;
}
.cinema-slide-inner {
  position: relative;
  z-index: 1;
  transform: scale(1.06);
  transition: transform 2.2s ease-out;
  will-change: transform;
}
.cinema-slide.is-active .cinema-slide-inner {
  transform: scale(1);
  animation: kenBurns 2.2s ease-out both;
}
@keyframes kenBurns {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

.cinema-slide-tag {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  pointer-events: none;
}

.collage-card {
  width: min(340px, 88%);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.collage-email {
  background: rgba(255,255,255,.97);
  color: var(--ink);
}
.collage-code-card {
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.14);
  box-shadow: var(--shadow-soft);
}
.collage-code-wide {
  width: min(560px, 94%);
}
.collage-winbar {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; background: var(--surface-2); font-size: 11px;
  font-family: 'Noto Sans Bengali', sans-serif; color: var(--slate);
}
.collage-winbar.dark {
  background: color-mix(in srgb, var(--indigo) 16%, var(--surface));
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.collage-winbar i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
}
.collage-winbar i:nth-child(2) { background: var(--amber); }
.collage-winbar i:nth-child(3) { background: var(--moss); }
.collage-winbar span { margin-left: 6px; }
.collage-visual, .collage-code-visual {
  padding: 16px 18px 14px;
  min-height: 110px;
  display: flex; flex-direction: column; gap: 8px;
  justify-content: center;
}
.collage-line {
  display: block; height: 8px; border-radius: 999px;
  background: rgba(15, 107, 107,.12);
  animation: lineGrow .9s ease both;
}
.collage-line.w1 { width: 92%; }
.collage-line.w2 { width: 74%; animation-delay: .15s; }
.collage-line.w3 { width: 58%; animation-delay: .3s; background: rgba(214, 228, 240,.22); }
.code-bar {
  display: block; height: 8px; border-radius: 999px;
  background: rgba(214, 228, 240,.2);
  animation: lineGrow .9s ease both;
}
.code-bar.b1 { width: 70%; }
.code-bar.b2 { width: 88%; animation-delay: .15s; }
.code-bar.b3 { width: 48%; animation-delay: .3s; background: rgba(214, 228, 240,.4); }
@keyframes lineGrow {
  from { transform: scaleX(.35); opacity: 0; transform-origin: left; }
  to { transform: scaleX(1); opacity: 1; transform-origin: left; }
}
.collage-caption {
  margin-top: 6px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--deep);
}
.collage-caption.light { color: var(--cinema-hi); }
.cinema-slide.is-active .collage-line,
.cinema-slide.is-active .code-bar {
  animation-name: lineGrow;
}

.collage-poster {
  position: relative;
  width: min(280px, 70vw);
  aspect-ratio: 3 / 4;
  max-height: min(340px, 48vh);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cinema-dusk-mid);
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
  animation: posterGrow 1.1s cubic-bezier(.22,.9,.3,1) both;
}
.poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.poster-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(14,26,38,.78) 100%);
  pointer-events: none;
}
@keyframes posterGrow {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.poster-label {
  position: absolute; bottom: 14px; left: 16px; right: 16px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 17px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

.collage-code-real {
  margin: 0;
  padding: 14px 18px 8px;
  overflow: hidden;
  font-family: var(--font-ui), ui-monospace, monospace;
  font-size: clamp(11.5px, 1.7vw, 13.5px);
  line-height: 1.65;
  color: #c8e0f0;
  white-space: pre;
  tab-size: 4;
}
.collage-code-real .ck { color: var(--cinema-hi); }
.collage-code-real .cf { color: #e8c87a; }
.collage-code-real .cs { color: #9fd4a0; }
.collage-code-real .cn { color: #f0b090; }
.collage-code-card .code-cap {
  padding: 0 18px 12px;
  margin: 0;
}

.collage-code {
  width: min(360px, 88vw);
  margin: 0; padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.14);
  color: var(--deep);
  font-family: var(--font-ui), monospace;
  font-size: 13px; line-height: 1.7;
  min-height: 100px;
  box-shadow: var(--shadow-soft);
  white-space: pre-wrap;
}

/* ---- shutters ? light curtain panels (match white chrome) ---- */
.cinema-shutter {
  position: absolute; top: 0; bottom: 0;
  width: 50%;
  z-index: 20;
  background:
    linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface-2) 100%);
  transition: transform 1.1s cubic-bezier(.65,.05,.36,1);
  pointer-events: none;
}
.cinema-shutter.left {
  left: 0;
  border-right: 1px solid rgba(15, 107, 107, 0.12);
  box-shadow: 4px 0 24px rgba(15, 107, 107, 0.06);
}
.cinema-shutter.right {
  left: 50%;
  right: auto;
  border-left: 1px solid rgba(15, 107, 107, 0.08);
  box-shadow: -4px 0 24px rgba(15, 107, 107, 0.06);
}
/* hide vignettes under the title so nothing peeks through the center seam */
.cinema-frame.is-title .cinema-slides {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.cinema-frame.is-opening.is-open .cinema-shutter.left { transform: translateX(-105%); }
.cinema-frame.is-opening.is-open .cinema-shutter.right { transform: translateX(105%); }
/* closing must win when both is-open and is-closing are set */
.cinema-frame.is-opening.is-open.is-closing .cinema-shutter.left,
.cinema-frame.is-opening.is-closing .cinema-shutter.left { transform: translateX(0); }
.cinema-frame.is-opening.is-open.is-closing .cinema-shutter.right,
.cinema-frame.is-opening.is-closing .cinema-shutter.right { transform: translateX(0); }

/* ---- countdown layer ---- */
.cinema-countdown {
  position: absolute; inset: 0; z-index: 24;
  display: flex;
  align-items: center; justify-content: center;
  padding: 1.5rem 0;
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
  pointer-events: none;
}
.cinema-countdown.is-gone {
  opacity: 0;
  visibility: hidden;
}
.cinema-reel-mark {
  display: flex; gap: 6px; margin-bottom: 1.25rem;
}
.cinema-reel-mark span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(232,241,250,.35);
  animation: reelBlink 1.2s ease-in-out infinite;
}
.cinema-reel-mark span:nth-child(2) { animation-delay: .15s; }
.cinema-reel-mark span:nth-child(3) { animation-delay: .3s; }
.cinema-reel-mark span:nth-child(4) { animation-delay: .45s; }
@keyframes reelBlink {
  0%,100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); background: var(--cinema-hi); }
}
.cinema-tick-num {
  font-family: var(--font-ui);
  font-size: clamp(4.5rem, 14vw, 7rem);
  font-weight: 600; line-height: 1;
  color: var(--indigo);
  text-shadow: none;
}
.cinema-tick-pop { animation: tickPop .55s cubic-bezier(.22,.9,.3,1) both; }
@keyframes tickPop {
  0% { opacity: 0; transform: scale(1.35); filter: blur(3px); }
  55% { opacity: 1; transform: scale(.97); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
.cinema-tick-label {
  margin-top: .75rem;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 14px; color: var(--cinema-muted);
}

/* ---- title card ---- */
.cinema-titlecard {
  position: absolute; inset: 0; z-index: 10;
  display: flex;
  align-items: center; justify-content: center;
  padding: 1.5rem 0;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
  pointer-events: none;
}
.cinema-titlecard .cinema-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.cinema-titlecard.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.cinema-titlecard.is-shown .fade-up {
  animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) both;
}
.cinema-hero-title {
  font-family: 'Noto Serif Bengali', serif;
  font-size: clamp(1.5rem, 4.5vw, 2.45rem);
  font-weight: 700; text-align: center; line-height: 1.4;
  margin: .6rem 0 .35rem;
  color: var(--deep);
  text-shadow: none;
}
.cinema-hero-sub {
  font-family: var(--font-ui);
  font-size: 13px; color: var(--cinema-muted);
  margin-bottom: 1.5rem;
}
.cinema-enter-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 14px; font-weight: 600;
  padding: 12px 22px;
  border-radius: 14px;
  background: var(--secondary); color: #fff;
  border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.25);
  transition: transform .2s ease, background .2s ease;
}
.cinema-enter-btn:hover { background: color-mix(in srgb, var(--secondary) 88%, #000); transform: translateY(-1px); }
.cinema-enter-btn:disabled { opacity: .55; pointer-events: none; }
.cinema-enter-btn.is-done { background: rgba(255,255,255,.1); color: var(--cinema-text); box-shadow: none; }
.cinema-enter-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex; align-items: center; justify-content: center;
}
.cinema-enter-icon iconify-icon { display: flex; }

/* ============================================================
   Welcome gate ? minimal: illustration + title + CTA
   ============================================================ */
.cinema-frame.is-welcome {
  background: transparent;
}
.cinema-frame.is-welcome.is-title .cinema-shutter,
.cinema-frame.is-welcome.is-title .cinema-shutter-shine {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.welcome-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.32) 100%),
    url("../../assets/images/introduction-img.png") center / cover no-repeat;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.cinema-frame.is-welcome.is-title .welcome-mesh {
  opacity: 1;
}
.cinema-titlecard.welcome-titlecard {
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.welcome-gate,
.welcome-gate--minimal {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vh, 2.5rem) clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}
.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.85rem, 2.2vh, 1.15rem);
  max-width: 36rem;
  width: 100%;
  margin: 0 auto;
}
.welcome-title {
  margin: 0;
  font-family: "Noto Serif Bengali", serif;
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #16363A;
  text-align: center;
  text-wrap: balance;
  max-width: 15em;
}
.welcome-sub {
  margin: 0 0 0.35rem;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: clamp(0.92rem, 1.6vw, 1.05rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(22, 54, 58, 0.58);
  text-align: center;
  text-wrap: balance;
  max-width: 28em;
}
.welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 14px 11px 22px;
  border-radius: 999px;
  background: #0F6B6B;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15, 107, 107, 0.22);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.welcome-cta:hover {
  background: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 107, 107, 0.28);
}
.welcome-cta:active { transform: translateY(0); }
.welcome-cta:disabled { opacity: 0.55; pointer-events: none; }
.welcome-cta-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  color: #0F6B6B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.welcome-cta-arrow iconify-icon { display: flex; }
.welcome-cta:hover .welcome-cta-arrow { transform: translateX(2px); }

.welcome-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  margin: 0 auto;
}
.welcome-visual-glow {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 107, 107, 0.12) 0%, transparent 68%);
  z-index: 0;
  animation: welcomeGlow 8s ease-in-out infinite;
}
.welcome-visual-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  animation: welcomeFloat 7s ease-in-out infinite;
}
.welcome-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 36px rgba(22, 54, 58, 0.12));
  user-select: none;
  pointer-events: none;
}
@keyframes welcomeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes welcomeGlow {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 720px) {
  .welcome-visual { width: min(78vw, 280px); }
  .welcome-title { font-size: clamp(1.28rem, 5.4vw, 1.65rem); }
}
@media (max-height: 700px) {
  .welcome-visual { width: min(42vh, 260px); }
  .welcome-hero { gap: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-visual-frame,
  .welcome-visual-glow { animation: none !important; }
}

/* ============================================================
   ভূমিকা intro — text + video + overview on one scrollable page
   ============================================================ */
.vi-host {
  width: 100%;
  max-width: none;
  margin: 0;
}
.vi-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.4vh, 1.65rem);
  padding: 0.15rem 0 1.25rem;
}
.vi-shell--page {
  gap: clamp(1.6rem, 3.5vh, 2.35rem);
  padding: 0.35rem 0 1.75rem;
}
.vi-shell--text {
  justify-content: center;
  min-height: min(52vh, 28rem);
  padding: clamp(1rem, 4vh, 2.25rem) 0 1.5rem;
}
.vi-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.vi-sec-label {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Noto Sans Bengali", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(22, 54, 58, 0.45);
}
.vi-media {
  width: 100%;
}
.vi-media .vl-frame {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.vi-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: none;
  width: 100%;
}
.vi-kicker {
  display: none;
}
.vi-title {
  margin: 0;
  font-family: var(--font-display, 'Noto Serif Bengali', serif);
  font-size: clamp(1.28rem, 2.6vw, 1.75rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--deep, var(--ink));
  text-wrap: balance;
}
.vi-unit-num { color: var(--brand, #0F6B6B); }
.vi-unit-sep {
  margin: 0 0.35em;
  font-weight: 500;
  color: color-mix(in srgb, var(--deep, var(--ink)) 35%, transparent);
}
.vi-unit-name { color: var(--deep, var(--ink)); }
.vi-body {
  margin: 0.15rem 0 0;
  font-family: var(--font-body, 'Noto Sans Bengali', 'Hind Siliguri', sans-serif);
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--read-ink);
  text-wrap: pretty;
}
.vi-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
}
.vi-stat {
  --vi-accent: var(--brand, #0F6B6B);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem 0.7rem;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(26, 35, 50, 0.1);
  border-radius: 12px;
}
.vi-stat:nth-child(1) { --vi-accent: #0F6B6B; }
.vi-stat:nth-child(2) { --vi-accent: #2F6FAD; }
.vi-stat:nth-child(3) { --vi-accent: #B8860B; }
.vi-stat:nth-child(4) { --vi-accent: #3F6F4E; }
.vi-stat:nth-child(5) { --vi-accent: #8B4560; }
.vi-stat-value {
  font-family: var(--font-display, 'Noto Serif Bengali', 'Plus Jakarta Sans', serif);
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vi-accent);
}
.vi-stat-value::after {
  content: '';
  display: block;
  width: 1.1rem;
  height: 2px;
  margin: 0.4rem auto 0;
  border-radius: 2px;
  background: var(--vi-accent);
  opacity: 0.55;
}
.vi-stat-label {
  font-family: var(--font-body, 'Noto Sans Bengali', 'Hind Siliguri', sans-serif);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--read-muted);
}
.vi-section--overview .ov-shell--embedded {
  max-width: none;
  margin: 0;
}
@media (max-width: 720px) {
  .vi-shell,
  .vi-shell--page { gap: 1.25rem; }
  .vi-title { font-size: clamp(1.2rem, 5vw, 1.45rem); }
  .vi-stats {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .vi-stat {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: calc(50% - 0.3rem);
  }
  .vi-stat:last-child:nth-child(odd) {
    flex: 1 1 calc(50% - 0.25rem);
    max-width: calc(50% - 0.25rem);
    margin-inline: auto;
  }
}

.cinema-skip {
  position: absolute;
  top: 22px; right: 16px;
  z-index: 26;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11.5px; font-weight: 500;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: rgba(255, 255, 255, 0.9);
  color: var(--indigo);
  cursor: pointer;
  transition: background .2s ease, opacity .3s ease;
}
.cinema-skip:hover {
  background: var(--surface);
  color: var(--deep);
}
.cinema-skip.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fade-up { animation: fadeUp .7s cubic-bezier(.22,.9,.3,1) both; }
.fade-up.d1 { animation-delay: .15s; }
.fade-up.d2 { animation-delay: .3s; }
.fade-up.d3 { animation-delay: .45s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- narration VO ---------- */
.cinema-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem;
  padding-bottom: 1rem;
  box-sizing: border-box;
}
.cinema-countdown .cinema-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.cinema-countdown .cinema-meta,
.cinema-countdown .cinema-tick-label {
  color: var(--cinema-muted);
}
.cinema-countdown .cinema-tick-num {
  color: var(--indigo);
}
.cinema-countdown .cinema-reel-mark span {
  background: rgba(214, 228, 240, 0.45);
}
.cinema-stage .cinema-narrate .cinema-content {
  justify-content: center;
  max-width: 56rem;
}
.cinema-narrate, .cinema-def {
  display: flex; flex-direction: column;
  min-height: inherit;
  height: 100%;
}
.cinema-stage .cinema-narrate,
.cinema-stage .cinema-def {
  min-height: 0;
}
.narrate-stage .narrate-text {
  width: 100%;
}
.narrate-motif {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .55; transition: background .6s ease;
}
.motif-email {
  background:
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 30%, rgba(15, 107, 107,.2), transparent 55%);
}
.motif-prompt {
  background:
    radial-gradient(ellipse 45% 40% at 70% 60%, rgba(14,116,144,.3), transparent 60%),
    radial-gradient(ellipse 35% 30% at 25% 25%, rgba(74,93,138,.25), transparent 55%);
}
.motif-craft {
  background:
    radial-gradient(ellipse 50% 45% at 50% 40%, rgba(196,138,42,.22), transparent 60%),
    radial-gradient(ellipse 40% 35% at 15% 80%, rgba(196,92,74,.18), transparent 55%);
}
.motif-ethics {
  background:
    radial-gradient(ellipse 45% 40% at 40% 50%, rgba(46,139,87,.22), transparent 60%),
    radial-gradient(ellipse 35% 30% at 85% 20%, rgba(51,101,138,.2), transparent 55%);
}

.narrate-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: .75rem;
}
.narrate-progress {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(15, 107, 107, 0.12); overflow: hidden;
}
.narrate-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--sky), var(--brand));
  transition: width .4s ease;
  border-radius: inherit;
}

.narrate-stage {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center;
  min-height: 140px; padding: .5rem 0;
}
.narrate-text {
  font-family: 'Noto Serif Bengali', serif;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 400;
  line-height: 1.95;
  color: var(--deep);
  text-shadow: none;
}
.narrate-caret {
  display: inline-block; margin-left: 2px;
  color: var(--indigo); font-weight: 500;
}

.narrate-controls {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: .5rem;
}
.narrate-btn {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px; font-weight: 500;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  color: var(--deep);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: background .2s ease, color .2s ease;
}
.narrate-btn:hover:not(:disabled) {
  background: var(--surface);
  color: var(--indigo);
}
.narrate-btn:disabled { opacity: .35; pointer-events: none; }
.narrate-btn-ghost {
  background: transparent;
  box-shadow: none;
  color: var(--cinema-muted);
}
.narrate-hint {
  position: relative; z-index: 2;
  text-align: center; margin-top: .65rem;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11.5px; color: var(--cinema-muted);
}

.intro-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  opacity: .7;
  animation: orbDrift 9s ease-in-out infinite;
}
.intro-orb.o1 {
  width: 220px; height: 220px;
  top: 8%; left: 6%;
  background: radial-gradient(circle, rgba(214, 228, 240,.28), transparent 68%);
}
.intro-orb.o2 {
  width: 180px; height: 180px;
  bottom: 12%; right: 8%;
  background: radial-gradient(circle, rgba(15, 107, 107,.2), transparent 68%);
  animation-delay: -3s;
}
.intro-orb.o3 {
  width: 140px; height: 140px;
  top: 42%; right: 22%;
  background: radial-gradient(circle, rgba(15, 107, 107,.14), transparent 68%);
  animation-delay: -5.5s;
}
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -14px); }
}
.cinema-reel-mark span {
  background: rgba(15, 107, 107, 0.28);
}
.cinema-enter-btn.is-done {
  background: rgba(15, 107, 107, 0.1);
  color: var(--deep);
  box-shadow: none;
}
.cinema-slide-tag {
  color: var(--cinema-muted);
}

/* ---------- objective constellation ---------- */
.obj-cinema {
  position: relative;
  min-height: min(560px, calc(100dvh - 170px));
  display: flex; flex-direction: column;
  align-items: center;
  padding: .5rem .35rem .35rem;
  gap: .5rem;
}
.obj-sky {
  position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 28%, rgba(214, 228, 240,.08), transparent 65%),
    radial-gradient(ellipse 40% 30% at 8% 88%, rgba(15, 107, 107,.05), transparent 55%);
  border: none;
}
.obj-kicker {
  position: relative; z-index: 2;
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(21,42,50,.4);
  margin: 0;
}
.obj-orbit-wrap {
  position: relative;
  width: 300px; height: 300px;
  margin: 0 auto;
  flex-shrink: 0;
}
.obj-cinema.is-all .obj-orbit-wrap {
  /* diagram stays visible on top, same size as before */
  margin-bottom: .1rem;
}
.obj-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(145deg, var(--navy), var(--teal));
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: none;
  box-shadow: 0 8px 24px rgba(15, 107, 107,.22);
  z-index: 2;
}
.obj-core span {
  font-family: var(--font-ui);
  font-size: 26px; font-weight: 600; line-height: 1;
}
.obj-core small {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px; opacity: .9; margin-top: 2px;
}
.obj-orbit { position: absolute; inset: 0; }
.obj-star {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy)));
  width: 68px; min-height: 58px;
  padding: 6px 4px 5px;
  border-radius: 14px;
  border: none;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  cursor: pointer;
  animation: starIn .55s cubic-bezier(.22,.9,.3,1) both;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  z-index: 1;
  outline: 1.5px solid color-mix(in srgb, var(--c) 28%, transparent);
  outline-offset: -1px;
}
.obj-star:hover, .obj-star.is-focus {
  transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) scale(1.06);
  outline-color: var(--c);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 16%, transparent);
  z-index: 3;
}
.obj-star.is-seen { background: color-mix(in srgb, var(--c) 8%, var(--surface)); }
.obj-star-icon {
  color: var(--c); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.obj-star-icon iconify-icon { color: inherit; width: 18px; height: 18px; }
.obj-card-badge iconify-icon { color: #fff; display: flex; }
.obj-star-label {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10.5px; font-weight: 500;
  color: rgba(21,42,50,.72); line-height: 1.2;
  max-width: 62px; text-align: center;
}
@keyframes starIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to { opacity: 1; transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) scale(1); }
}

.obj-reveal {
  position: relative; z-index: 2;
  width: 100%; max-width: 560px;
  flex: 1;
  min-height: 0;
  display: flex; align-items: stretch; justify-content: center;
}
.obj-reveal-hint {
  margin: auto;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 14px;
  color: rgba(21,42,50,.42);
  text-align: center;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--line-mid);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.7);
}
.obj-card {
  width: 100%;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface);
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
  align-self: center;
  outline: 1px solid var(--line);
}
.obj-card .obj-card-text {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
}
.obj-card-badge {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
  border: 1px solid rgba(255,255,255,.2);
}
.obj-footer {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 560px;
  padding: .35rem .15rem 0;
  flex-shrink: 0;
}
.obj-footer .obj-count {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600; color: var(--indigo);
}
.obj-footer .narrate-btn-ghost {
  color: var(--indigo);
  border: none;
  background: var(--surface-2);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 12px;
  box-shadow: none;
}
.obj-all {
  width: 100%;
  /* ~4?5 objective cards visible; rest via scroll */
  height: min(340px, calc(100dvh - 420px));
  min-height: 260px;
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 4px 8px;
}
.obj-cinema.is-all .obj-reveal {
  flex: 1;
  min-height: 260px;
  align-items: stretch;
}
.obj-cinema.is-all .obj-all {
  height: min(360px, calc(100dvh - 400px));
  min-height: 280px;
  max-height: 400px;
}
.obj-card-mini {
  display: flex; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
  outline: 1px solid var(--line);
}
.obj-card-mini .obj-mini-n {
  font-family: var(--font-ui);
  font-weight: 600; font-size: 13px;
  flex-shrink: 0; min-width: 1.4em;
}
.obj-card-mini .obj-mini-t {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  line-height: 1.75;
}

@media (max-width: 640px) {
  .obj-orbit-wrap { width: 268px; height: 268px; }
  .obj-star { width: 58px; min-height: 52px; border-radius: 12px; }
  .obj-star-label { font-size: 9.5px; max-width: 54px; }
  .obj-core { width: 72px; height: 72px; }
  .obj-core span { font-size: 22px; }
  .obj-all,
  .obj-cinema.is-all .obj-all {
    height: min(300px, calc(100dvh - 380px));
    min-height: 240px;
    max-height: 320px;
  }
  .obj-card-mini .obj-mini-t { font-size: 13px; }
}
/* ---------- definition panel (light LMS, matches other subunits) ---------- */
.def-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 2px 12px;
  border-radius: 0;
  background: var(--surface);
  border: none;
  box-shadow: none;
}
.def-panel-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.def-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-ui), sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 650;
  margin: 0 0 .55rem;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
}
.def-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  font-weight: 700;
  color: var(--deep);
  margin: 0 0 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.def-lines {
  width: 100%;
  min-height: 7.5rem;
  margin-bottom: 1rem;
}
.def-line {
  font-family: var(--font-display);
  font-size: clamp(15px, 2.1vw, 17.5px);
  line-height: 1.85;
  color: var(--read-ink);
  letter-spacing: 0.01em;
  margin: 0 0 .75rem;
  opacity: 0;
}
.def-line.is-typing,
.def-line.is-shown { opacity: 1; }
.def-line.is-typing::after {
  content: '?';
  color: var(--indigo);
  animation: caretBlink .8s step-end infinite;
}

/* Rich static definition (defCinema) */
.def-panel--rich .def-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}
.def-panel--rich .def-context {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.7;
  color: color-mix(in srgb, var(--read-ink) 70%, transparent);
}
.def-panel--rich .def-core {
  position: relative;
  margin: 0;
  padding: 1.05rem 1.15rem 1.05rem 1.1rem;
  border-inline-start: 3px solid var(--brand);
  border-radius: 0 16px 16px 0;
  background:
    linear-gradient(105deg, rgba(15, 107, 107, 0.1), rgba(15, 107, 107, 0.02) 60%, transparent);
}
.def-panel--rich .def-core-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.def-panel--rich .def-core-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); /* max 18px */
  line-height: 1.75;
  font-weight: 600;
  color: var(--deep);
}
.def-panel--rich .def-core-text strong {
  color: var(--brand);
  font-weight: 700;
}
.def-panel--rich .gist-callout { margin: 0; }
.def-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: .5rem;
}
.def-btn {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  color: var(--deep);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 60, 110, 0.04);
  transition: background .2s ease, border-color .2s ease;
}
.def-btn:hover:not(:disabled) {
  background: rgba(15, 107, 107, 0.05);
  border-color: var(--line-strong);
}
.def-btn:disabled { opacity: .4; pointer-events: none; }
.def-btn-skip { color: var(--indigo); }
.def-btn-proceed {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(15, 107, 107, 0.22);
  font-weight: 600;
  padding: 9px 18px;
}
.def-btn-proceed:hover:not(:disabled) {
  background: var(--teal);
  color: #fff;
}
.def-hint {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px;
  color: rgba(22, 50, 79, 0.45);
  margin: 0;
}

/* ============================================================
   Real-world simulation chrome (apps, chat, meters, labs)
   ============================================================ */

.sim-badge {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  color: #047857;
  border: 1px solid color-mix(in srgb, #059669 18%, transparent);
  white-space: nowrap;
}
.sim-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-mid);
}
.sim-source-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sim-source-badge.is-live {
  color: #0F6B6B;
  background: rgba(15, 107, 107, 0.1);
  border-color: rgba(15, 107, 107, 0.18);
}
.sim-source-badge.is-local {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  background: var(--line);
}
.sim-generated-image {
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
}
.sim-generated-image img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

/* ---- AI image actions (ChatGPT-style full view + download) ---- */
.ai-img-wrap {
  position: relative;
}
.ai-img-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 32, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ai-img-wrap:hover .ai-img-actions,
.ai-img-wrap:focus-within .ai-img-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (hover: none) {
  .ai-img-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
.ai-img-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ai-img-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.04);
}
.ai-img-btn:active { transform: scale(0.97); }
.ai-img-btn iconify-icon { display: flex; }
.ai-img-btn--solid {
  background: rgba(15, 23, 32, 0.72);
}
.ai-img-btn--solid:hover {
  background: #0F6B6B;
}

.ai-img-lightbox[hidden] { display: none !important; }
.ai-img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ai-img-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 20, 0.82);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.ai-img-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 96vw);
  max-height: 90vh;
  margin: auto;
  padding: 10px;
  border-radius: 16px;
  background: #0b1218;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
  animation: aiImgLightboxIn 0.22s ease both;
}
.ai-img-lightbox-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  gap: 8px;
}
.ai-img-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 28px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #0b1218;
}
body.ai-img-lightbox-open { overflow: hidden; }
@keyframes aiImgLightboxIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.ps-img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-2);
  width: fit-content;
  max-width: 100%;
}
.ps-img-frame img {
  display: block;
  width: 500px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.ps-img-cap {
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  line-height: 1.4;
}
.ps-poster-live {
  position: relative;
}
.gc-gen-art {
  position: absolute;
}
.gc-gen-art .ai-img-actions {
  top: 8px;
  right: 8px;
}
.sim-code-editor {
  overflow: hidden;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #0F172A;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}
.sim-code-editor-top {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.sim-code-editor-top span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.sim-code-editor-top span:nth-child(1) { background: #F87171; }
.sim-code-editor-top span:nth-child(2) { background: #FBBF24; }
.sim-code-editor-top span:nth-child(3) { background: #34D399; }
.sim-code-editor-top b {
  margin-left: auto;
  color: rgba(226, 232, 240, 0.72);
  font-family: var(--font-ui);
  font-size: 10px;
  text-transform: uppercase;
}
.sim-code-editor pre {
  margin: 0;
  padding: 13px 14px;
  overflow-x: auto;
}
.sim-code-editor code {
  color: #E2E8F0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.65;
}

.rw-app {
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card-surface-flat);
  box-shadow: none;
  overflow: hidden;
}
.rw-winbar {
  display: flex; align-items: center; gap: var(--gap-tight);
  padding: var(--pad-bar);
  background: rgba(21,42,50,.03);
  border-bottom: 1px solid rgba(21,42,50,.08);
}
.rw-dot { display: none; }
.rw-teach-mark {
  width: 3px; height: 14px; border-radius: 2px;
  background: var(--deep); flex-shrink: 0;
}
.rw-wintitle {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}
.rw-body { padding: var(--space-4); }

.rw-btn {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: var(--pad-btn); border-radius: 8px;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-tight);
  transition: background .2s ease, opacity .2s ease;
}
.rw-btn:disabled { opacity: .4; pointer-events: none; }
.rw-btn-brand { background: var(--brand); color: #fff; }
.rw-btn-brand:hover { background: var(--deep); }
.rw-btn-navy  { background: var(--navy); color: #fff; }
.rw-btn-navy:hover { background: var(--deep); }
.rw-btn-teal  { background: var(--teal); color: #fff; }
.rw-btn-slate { background: var(--slate); color: #fff; }
.rw-btn-indigo{ background: var(--indigo); color: #fff; }
.rw-btn-ghost {
  background: var(--surface); color: rgba(22,50,79,.65);
  border: 1px solid rgba(22,50,79,.18);
}
.rw-btn-ghost:hover { background: color-mix(in srgb, var(--secondary) 7%, var(--surface)); }

.rw-photo-frame {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(51,101,138,.25); aspect-ratio: 4/3;
  background: var(--surface-2);
}
.rw-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-photo-tag {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--font-ui), sans-serif; font-size: 10px; font-weight: 600;
  background: rgba(21, 42, 50, 0.72); color: #fff;
  padding: 3px 8px; border-radius: 6px;
  backdrop-filter: blur(4px);
}
.rw-prompt-row {
  border: 1px solid color-mix(in srgb, var(--secondary) 22%, transparent);
  background: color-mix(in srgb, var(--secondary) 6%, var(--surface));
  border-radius: 10px; padding: 9px 11px;
}
.rw-prompt-label {
  display: block; font-family: var(--font-ui), sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--secondary); margin-bottom: 3px;
}
.rw-gen-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.rw-gen-tile {
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: var(--surface); position: relative;
  box-shadow: 0 1px 3px var(--line);
}
.rw-gen-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.rw-gen-tile span {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10px; font-weight: 600;
  background: linear-gradient(180deg, transparent 0%, rgba(21, 42, 50, 0.78) 68%);
  color: #fff; text-align: center;
  padding: 16px 4px 5px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.rw-dock-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 10px;
  border: 1.5px solid rgba(22,50,79,.12); background: var(--surface);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.rw-dock-item:hover { transform: translateY(-1px); background: rgba(15, 107, 107,.04); }
.rw-dock-item.is-on {
  border-color: var(--dock-c, var(--brand));
  background: color-mix(in srgb, var(--dock-c, var(--brand)) 8%, white);
}
.rw-dock-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 107, 107,.06);
}
.rw-preview-pane {
  border-radius: 8px; border: 1px solid rgba(22,50,79,.1);
  background: var(--surface-2); padding: 10px; min-height: 110px;
}

.rw-mini-chat { display: flex; flex-direction: column; gap: 6px; }
.rw-bubble {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11.5px; line-height: 1.45;
  padding: 7px 10px; border-radius: 10px; max-width: 95%;
}
.rw-bubble.user {
  align-self: flex-end;
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-right-radius: 3px;
}
.rw-bubble.user.coral { background: var(--surface-2); color: var(--ink); }
.rw-bubble.user.moss  { background: var(--surface-2); color: var(--ink); }
.rw-bubble.ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 3px;
}
.rw-mini-gallery img { width: 100%; border-radius: 6px; aspect-ratio: 16/9; object-fit: cover; }
.rw-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 4px; }
.rw-mini-grid img { aspect-ratio: 1; border-radius: 4px; object-fit: cover; width: 100%; }
.rw-mini-video { text-align: center; }
.rw-video-screen {
  height: 64px; border-radius: 8px;
  background: linear-gradient(135deg, #1e3a5f, #0e7490);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.rw-timeline {
  height: 4px; background: rgba(22,50,79,.12); border-radius: 99px; margin: 8px 0 4px; overflow: hidden;
}
.rw-timeline i { display: block; height: 100%; background: var(--coral); border-radius: 99px; }
.rw-wave {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 36px;
}
.rw-wave i {
  width: 3px; border-radius: 2px; background: var(--indigo);
  display: block; animation: wavePulse 1.2s ease-in-out infinite alternate;
}
.rw-wave i:nth-child(odd) { animation-delay: .15s; }
@keyframes wavePulse { from { opacity: .45; } to { opacity: 1; } }
.rw-mini-ide {
  display: flex; gap: 8px; font-family: var(--font-ui), monospace;
  font-size: 10.5px; background: #0f1c2e; color: #d7e6f5;
  border-radius: 7px; padding: 8px; text-align: left;
}
.rw-ide-gutter { color: rgba(215,230,245,.35); line-height: 1.55; }
.rw-ide-code { margin: 0; line-height: 1.55; white-space: pre-wrap; }
.rw-ide-code .c-kw { color: #7dd3fc; }
.rw-ide-code .c-cmt { color: #86efac; }
.rw-mini-slides { display: flex; flex-direction: column; gap: 6px; }
.rw-slide-card {
  border-radius: 7px; border: 1px solid rgba(46,139,87,.3);
  background: var(--surface); padding: 8px 10px; text-align: left;
}
.rw-slide-card b { display: block; font-family: var(--font-ui), sans-serif; font-size: 10px; color: var(--moss); }
.rw-slide-card span { font-family: 'Noto Sans Bengali', sans-serif; font-size: 13px; font-weight: 500; color: rgba(22,50,79,.8); }
.rw-slide-card.dim { opacity: .55; }

/* chat client ? flat, realistic chat UI */
.rw-chat-app { display: flex; flex-direction: column; }
.rw-chat-top {
  display: flex; align-items: center; gap: var(--gap-md);
  padding: var(--pad-bar);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.rw-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.rw-chat-log {
  min-height: 180px; max-height: 280px; overflow-y: auto;
  padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--gap-tight);
  background: var(--surface);
}
.rw-chat-empty {
  margin: auto; text-align: center; color: var(--read-muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px;
}
.rw-msg { display: flex; }
.rw-msg.user { justify-content: flex-end; }
.rw-msg.ai { justify-content: flex-start; }
.rw-msg-bubble {
  max-width: 88%;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px; line-height: 1.55;
  padding: 8px 12px; border-radius: 14px;
}
.rw-msg.user .rw-msg-bubble {
  background: var(--surface-2);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.rw-msg.user .rw-msg-bubble.coral { background: var(--surface-2); color: var(--ink); }
.rw-msg.user .rw-msg-bubble.moss  { background: var(--surface-2); color: var(--ink); }
.rw-msg.ai .rw-msg-bubble {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.rw-typing { display: flex; gap: 4px; align-items: center; padding: 10px 14px !important; }
.rw-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #9CA3AF;
  animation: typingDot 1s ease-in-out infinite;
}
.rw-typing i:nth-child(2) { animation-delay: .15s; }
.rw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-3px); opacity: 1; }
}
.rw-composer {
  display: flex; gap: var(--gap-tight); align-items: center;
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.rw-composer-box {
  flex: 1; min-height: 42px;
  border: 1px solid var(--line-mid);
  border-radius: 12px; padding: 10px 14px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 13px;
  background: var(--surface);
  color: var(--ink);
}
.rw-send {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--paper); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: none;
}
.rw-send:disabled {
  opacity: 1;
  background: var(--line-mid);
  pointer-events: none;
}

/* Twin rooms ? Discriminative (mint) vs Generative (sky) */
.twin-sim-toolbar { margin-bottom: 12px; }
.twin-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.twin-tab {
  --tab-accent: var(--brand);
  --tab-soft: #F0F7F7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--tab-accent) 14%, transparent);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.twin-tab[data-twin-tab="d"] {
  --tab-accent: #059669;
  --tab-soft: #ECFDF5;
}
.twin-tab[data-twin-tab="g"] {
  --tab-accent: #2563A8;
  --tab-soft: color-mix(in srgb, var(--secondary) 16%, var(--surface));
}
.twin-tab:hover {
  border-color: color-mix(in srgb, var(--tab-accent) 32%, transparent);
  background: color-mix(in srgb, var(--tab-soft) 70%, var(--surface));
  transform: translateY(-1px);
}
.twin-tab.is-on {
  border-color: color-mix(in srgb, var(--tab-accent) 42%, transparent);
  background:
    linear-gradient(135deg, var(--tab-soft) 0%, var(--surface) 72%);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--tab-accent) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tab-accent) 8%, transparent);
}
.twin-tab-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.twin-tab-ico.disc {
  background: #D1FAE5;
  color: #047857;
}
.twin-tab-ico.gen {
  background: #DBEAFE;
  color: #1D4ED8;
}
.twin-tab.is-on .twin-tab-ico.disc {
  background: #A7F3D0;
  color: #065F46;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.18);
}
.twin-tab.is-on .twin-tab-ico.gen {
  background: #BFDBFE;
  color: #1E40AF;
  box-shadow: 0 4px 12px rgba(37, 99, 168, 0.18);
}
.twin-tab-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.twin-tab-copy b {
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.twin-tab.is-on .twin-tab-copy b { color: color-mix(in srgb, var(--tab-accent) 55%, var(--ink)); }
.twin-tab-copy small {
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  color: color-mix(in srgb, var(--tab-accent) 35%, rgba(21, 42, 50, 0.55));
}
.twin-tab-check {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--tab-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.twin-panels {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
  box-shadow:
    0 12px 36px rgba(15, 107, 107, 0.07),
    0 2px 0 color-mix(in srgb, var(--brand) 18%, transparent);
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
}
.twin-panel { display: none !important; }
.twin-panel.is-on {
  display: flex !important;
  flex-direction: column;
}

.twin-chat-top {
  padding: 14px 16px !important;
  border-bottom: 1px solid transparent !important;
}
.twin-hint {
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 550;
  border: 1px solid transparent;
}
.twin-hint-center {
  align-self: center;
  margin: auto;
}
.twin-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 14px 14px;
  border-top: 1px solid transparent;
}
.twin-draft {
  flex: 1;
  min-height: 48px;
  border-radius: 12px !important;
  border: 1px solid var(--line-mid) !important;
  background: var(--surface) !important;
  color: var(--ink);
  line-height: 1.45;
  box-shadow: none !important;
}
.twin-prompt-input {
  display: block;
  width: 100%;
  max-height: 128px;
  resize: none;
  overflow-y: auto;
  outline: none;
}
.twin-prompt-input:focus {
  border-color: color-mix(in srgb, #2563EB 42%, var(--line-mid)) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.12) !important;
}
.twin-prompt-input::placeholder {
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.twin-draft.is-locked {
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  pointer-events: none;
}
.twin-send {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.twin-send:hover { transform: translateY(-1px); }

/* Discriminative composer: photo thumb + text */
.disc-composer-box {
  flex: 1;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
}
.disc-composer-box.is-sent {
  justify-content: center;
  opacity: 0.7;
}
.disc-composer-thumb {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #fff;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.16);
  cursor: zoom-in;
  position: relative;
  z-index: 1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.disc-composer-thumb:hover {
  transform: scale(1.55);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.22);
  z-index: 5;
}
.disc-composer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.disc-composer-text {
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #065F46;
  line-height: 1.35;
}
.disc-composer-sent {
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  color: rgba(5, 150, 105, 0.55);
}
.disc-sim-user-pack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}

.disc-sim-shell,
.gpt-sim-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.disc-sim-chat,
.gpt-sim-chat {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}
.disc-sim-chat {
  background: var(--surface);
}
.gpt-sim-chat {
  background: var(--surface);
}
.disc-sim-chat .disc-sim-log,
.gpt-sim-chat .gpt-sim-log {
  min-height: 240px;
  max-height: 300px !important;
  flex: 1 1 auto;
  gap: 12px;
  padding: 14px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.disc-sim-chat .twin-composer,
.gpt-sim-chat .twin-composer,
.gpt-sim-modes {
  flex-shrink: 0;
}
.disc-sim-chat .disc-sim-log {
  background: var(--surface) !important;
}
.gpt-sim-chat .gpt-sim-log {
  background: var(--surface) !important;
}
.disc-sim-shell .twin-chat-top {
  background: var(--surface) !important;
  border-bottom-color: var(--line) !important;
}
.gpt-sim-shell .twin-chat-top {
  background: var(--surface) !important;
  border-bottom-color: var(--line) !important;
}
.disc-sim-avatar {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  box-shadow: none;
  border: 1px solid var(--line);
}
.gpt-sim-shell .rw-avatar {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  box-shadow: none;
  border: 1px solid var(--line);
}
.disc-sim-shell .twin-hint {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
.gpt-sim-shell .twin-hint {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
.disc-sim-shell .twin-composer {
  background: var(--surface);
  border-top-color: var(--line);
}
.gpt-sim-shell .twin-composer {
  background: var(--surface);
  border-top-color: var(--line);
}
.disc-sim-shell .twin-send {
  background: var(--ink) !important;
  color: var(--paper);
  box-shadow: none;
}
.disc-sim-shell .twin-send:hover { background: color-mix(in srgb, var(--ink) 82%, #000) !important; }
.gpt-sim-shell .twin-send {
  background: var(--ink) !important;
  color: var(--paper);
  box-shadow: none;
}
.gpt-sim-shell .twin-send:hover { background: color-mix(in srgb, var(--ink) 82%, #000) !important; }

.disc-sim-media {
  position: relative;
  width: min(100%, 280px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, #059669 14%, transparent);
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.12);
}
.disc-sim-media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.disc-sim-media-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #059669 88%, #000);
  color: #fff;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 600;
}
.disc-sim-reply {
  max-width: 100% !important;
  width: min(100%, 380px);
  padding: 14px !important;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, #059669 14%, transparent) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.08);
}
.disc-sim-reply-label {
  margin: 0 0 10px;
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #047857;
}
.disc-sim-bars { display: grid; gap: 10px; }
.disc-sim-bar-row {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  align-items: center;
  gap: 8px;
}
.disc-sim-bar-row span,
.disc-sim-bar-row b {
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  font-weight: 650;
}
.disc-sim-bar-row .is-cat { color: #059669; }
.disc-sim-bar-row .is-dog { color: #ea580c; }
.disc-sim-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #059669 10%, var(--surface));
  overflow: hidden;
}
.disc-sim-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.7s ease;
}
.disc-sim-result {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1px solid color-mix(in srgb, #059669 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.disc-sim-result strong {
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  color: #065F46;
}
.disc-sim-result span {
  font-family: var(--font-body), sans-serif;
  font-size: 12px;
  color: rgba(4, 120, 87, 0.8);
}

.gpt-sim-reply {
  max-width: 100% !important;
  width: 100%;
  background: var(--surface) !important;
  border: 1px solid color-mix(in srgb, #2563A8 12%, transparent) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 168, 0.07);
}
.gpt-sim-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.gpt-sim-mode {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  border: 1.5px solid color-mix(in srgb, #2563A8 12%, transparent);
  background: var(--surface);
  padding: 8px 4px;
  font-family: var(--font-body), sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  min-height: 44px;
  text-align: center;
  line-height: 1.2;
}
.gpt-sim-mode:hover {
  border-color: color-mix(in srgb, #2563A8 35%, transparent);
  color: #1D4ED8;
  background: color-mix(in srgb, var(--secondary) 16%, var(--surface));
  transform: translateY(-1px);
}
.gpt-sim-mode.is-on {
  border-color: #9CA3AF;
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: none;
}
.gpt-sim-mode.is-done {
  box-shadow: inset 0 0 0 1.5px rgba(16, 185, 129, 0.55);
}
.gpt-sim-count {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 10px;
  background: #DBEAFE;
  color: #1D4ED8;
}
.gpt-sim-shell .rw-send-hint,
.gpt-sim-shell .rw-send-rings,
.disc-sim-shell .rw-send-hint,
.disc-sim-shell .rw-send-rings {
  display: none !important;
}
@media (min-width: 900px) {
  .disc-sim-chat .disc-sim-log,
  .gpt-sim-chat .gpt-sim-log {
    min-height: 260px;
    max-height: 320px !important;
  }
}

.rw-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md);
}
.rw-metrics > div {
  border-radius: 8px; border: 1px solid rgba(30,78,140,.15);
  background: rgba(30,78,140,.04); padding: 8px;
  text-align: center;
}
.rw-metrics span {
  display: block; font-family: var(--font-ui), sans-serif;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(22,50,79,.68);
}
.rw-metrics b {
  font-family: var(--font-ui), sans-serif;
  font-size: 14px; color: var(--navy);
}
.rw-loss-chart {
  display: flex; align-items: flex-end; gap: 3px; height: 40px;
  padding: 4px 2px; border-radius: 6px; background: rgba(30,78,140,.04);
}
.rw-loss-chart i {
  flex: 1; border-radius: 2px 2px 0 0; background: var(--amber);
  display: block; min-height: 4px;
}

.rw-pipe-step {
  border-radius: 8px; border: 1.5px solid rgba(22,50,79,.12);
  padding: 8px 6px; text-align: center; opacity: .4;
  transition: all .35s ease; background: var(--surface);
}
.rw-pipe-step.is-on {
  opacity: 1; border-color: var(--navy);
  background: rgba(30,78,140,.06);
}
.rw-pipe-num {
  display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-family: var(--font-ui), sans-serif; font-size: 10px; font-weight: 600;
  background: rgba(22,50,79,.1); color: rgba(22,50,79,.72); margin-bottom: 4px;
}
.rw-pipe-step.is-on .rw-pipe-num { background: var(--navy); color: #fff; }
.rw-pipe-stage {
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
  background: color-mix(in srgb, var(--brand) 2.5%, var(--surface)); padding: 14px 12px;
}
.rw-pipe-view {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.rw-raw {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px;
  padding: 4px 8px; border-radius: 6px; background: rgba(22,50,79,.06);
}
.rw-tok, .rw-tok-id {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid rgba(21,42,50,.14);
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 0 rgba(21,42,50,.04);
  transition: all .3s ease;
}
.rw-tok-id {
  flex-direction: column; gap: 0;
}
.rw-tok.selectable { cursor: pointer; border-color: rgba(21,42,50,.22); background: var(--surface); }
.rw-tok.selectable.is-sel { outline: 2px solid var(--deep); outline-offset: 1px; }
.rw-tok.ok { border-color: rgba(107,191,42,.45); background: rgba(107,191,42,.1); color: var(--moss); font-size: 11px; }
.rw-tok.is-pick {
  font-size: 15px; padding: 8px 16px;
  border-color: var(--deep);
  background: color-mix(in srgb, var(--deep) 8%, white);
  color: var(--deep);
  box-shadow: 0 2px 8px rgba(21,42,50,.08);
}
.rw-next-pick { display: flex; justify-content: center; padding: 8px 0; }
.rw-tok-id em {
  display: block; font-style: normal; font-family: var(--font-ui), sans-serif;
  font-size: 8px; color: rgba(22,50,79,.62); margin-bottom: 1px;
}
.rw-tok-id.is-lit { color: var(--deep); border-color: var(--deep); background: rgba(21,42,50,.06); }
.rw-tok-id.is-current { box-shadow: 0 0 0 2px rgba(21,42,50,.18); }
.rw-final-sent {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 15px;
  padding: 10px 14px; border-radius: 8px; background: var(--surface);
  border: 1px solid rgba(21,42,50,.12); width: 100%; text-align: center;
}
.rw-final-sent mark {
  background: rgba(21,42,50,.1); color: var(--deep);
  padding: 0 4px; border-radius: 3px;
}
.rw-chip {
  font-family: var(--font-ui), sans-serif; font-size: 10px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(15, 107, 107,.18); color: rgba(22,50,79,.72);
  background: rgba(15, 107, 107,.04);
}
.rw-panel {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: var(--space-3);
  box-shadow: none;
}
.rw-panel-h {
  font-family: var(--font-ui), sans-serif; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(22,50,79,.65); margin-bottom: 6px;
}
.rw-bin {
  border-radius: 10px; border: 1.5px dashed rgba(22,50,79,.2);
  padding: 10px 8px; text-align: center; min-height: 90px;
  background: var(--surface); transition: border-color .2s ease;
}
.rw-bin:hover { border-color: rgba(196,138,42,.55); }

.rw-ctx-log {
  min-height: 120px; max-height: 150px; overflow-y: auto;
  border-radius: 8px; border: 1px solid rgba(30,78,140,.15);
  background: var(--surface-2); padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.rw-ctx-msg {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px 8px; border-radius: 7px; background: var(--surface);
  border: 1px solid rgba(30,78,140,.12);
  transition: opacity .6s ease, transform .6s ease;
}
.rw-ctx-msg.is-dropping { opacity: 0; transform: translateY(16px) rotate(2deg); }
.rw-ctx-k {
  font-family: var(--font-ui), sans-serif; font-size: 9px;
  color: var(--navy); background: rgba(30,78,140,.08);
  padding: 2px 5px; border-radius: 4px; white-space: nowrap;
}
.rw-meter-track {
  height: 8px; border-radius: 99px; background: rgba(22,50,79,.1); overflow: hidden;
}
.rw-meter-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--navy), var(--sky));
  transition: width .55s cubic-bezier(.22,.9,.3,1);
}
.rw-meter-fill.is-over { background: linear-gradient(90deg, var(--coral), #e11d48); }
.rw-model-btn {
  flex: 1; font-family: var(--font-ui), sans-serif; font-size: 11px;
  padding: 8px; border-radius: 8px; border: 1.5px solid rgba(22,50,79,.15);
  background: var(--surface); color: rgba(22,50,79,.75); text-align: center;
}
.rw-model-btn small { display: block; font-size: 9px; opacity: .7; margin-top: 2px; }
.rw-model-btn.is-on { border-color: var(--navy); background: var(--navy); color: #fff; }

.rw-warn-card {
  /* base shell ? full styles in .rw-warn-grid section */
  text-align: left;
  cursor: pointer;
}

.rw-flow-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 2px; flex-wrap: wrap; padding: 8px 0 4px;
}
.rw-flow-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: opacity .4s ease;
}
.rw-flow-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui), sans-serif; font-size: 11px; font-weight: 600;
  background: rgba(74,93,138,.12); color: var(--indigo);
  border: 1.5px solid rgba(74,93,138,.3);
}
.rw-flow-wire {
  width: 28px; height: 3px; background: rgba(22,50,79,.1);
  border-radius: 99px; overflow: hidden; position: relative; margin-bottom: 16px;
}
.rw-flow-wire i {
  position: absolute; inset: 0 auto 0 0; width: 0; background: var(--indigo);
  transition: width .65s ease;
}
.rw-loop-rail {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 4px 8px;
}
.rw-loop-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(74,93,138,.3); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui), sans-serif; font-size: 11px; font-weight: 600;
  color: rgba(22,50,79,.65); transition: all .3s ease;
}
.rw-loop-dot.is-on { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.rw-loop-link {
  width: 3px; height: 14px; background: rgba(22,50,79,.12);
  transition: background .3s ease;
}
.rw-loop-link.is-on { background: var(--indigo); }
.rw-chat-mini { min-height: 36px; }

.rw-rtcft-key {
  flex: 1; max-width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 10px;
  border: 1.5px solid rgba(22,50,79,.15); background: var(--surface);
  transition: all .2s ease;
}
.rw-rtcft-key b { font-family: var(--font-ui), sans-serif; font-size: 18px; line-height: 1; }
.rw-rtcft-key small {
  font-family: var(--font-ui), sans-serif; font-size: 8px;
  color: rgba(22,50,79,.68); letter-spacing: .02em;
}
.rw-rtcft-key.is-on { color: #fff !important; }
.rw-rtcft-key.is-on small { color: rgba(255,255,255,.85); }
.rw-field-preview {
  border-radius: 10px; border: 1px solid rgba(22,50,79,.12);
  background: var(--surface-2); padding: 14px;
}
.rw-field-box {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 13px;
  border-left: 3px solid; background: var(--surface);
  padding: 8px 10px; border-radius: 0 8px 8px 0;
  border-top: 1px solid rgba(22,50,79,.08);
  border-right: 1px solid rgba(22,50,79,.08);
  border-bottom: 1px solid rgba(22,50,79,.08);
}
.rw-rtcft-slot {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 10px; border-radius: 8px;
  border: 1.5px dashed; background: var(--surface);
  font-family: var(--font-ui), sans-serif; font-size: 11px;
  text-align: left; transition: all .2s ease;
}
@media (min-width: 640px) {
  .rw-rtcft-slot { flex: none; width: 6.5rem; }
}
.rw-rtcft-slot b { font-size: 12px; }
.rw-rtcft-slot span { opacity: .75; font-size: 10px; }
.rw-rtcft-slot.is-on { border-style: solid; }
.rw-composer-doc {
  border-radius: 10px; border: 1.5px solid rgba(15, 107, 107,.22);
  border-left-width: 4px; background: var(--surface); overflow: hidden;
}
.rw-composer-doc-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: rgba(15, 107, 107,.04);
  border-bottom: 1px solid rgba(15, 107, 107,.1);
}
.rw-composer-doc-body { padding: 12px 14px; min-height: 100px; }
.rw-doc-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.rw-doc-tag {
  flex-shrink: 0; font-family: var(--font-ui), sans-serif;
  font-size: 9px; font-weight: 600; color: #fff;
  padding: 2px 6px; border-radius: 4px; margin-top: 3px;
}
.rw-tech-tab {
  font-family: var(--font-ui), sans-serif; font-size: 11px;
  padding: 6px 12px; border-radius: 8px;
  border: 1.5px solid; background: var(--surface); transition: all .2s ease;
}
.rw-tech-tab.is-on { color: #fff; }
.rw-ver-btn {
  flex: 1; font-family: var(--font-ui), sans-serif; font-size: 11px; font-weight: 600;
  padding: 6px; border-radius: 7px; border: 1px solid rgba(196,138,42,.35);
  color: rgba(22,50,79,.72); background: var(--surface);
}
.rw-ver-btn.is-on { background: var(--amber); color: #fff; border-color: var(--amber); }

/* ---------- real-world sim chrome (rw-*) ---------- */
.sim-badge {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(15, 107, 107, 0.08); color: var(--brand);
  border: 1px solid rgba(15, 107, 107, 0.14); white-space: nowrap;
}
.rw-app {
  border: none;
  border-radius: var(--radius-md);
  background: var(--card-surface);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  outline: 1px solid var(--line);
}
.rw-winbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.rw-dot { width: 8px; height: 8px; border-radius: 50%; }
.rw-dot.coral { background: #e86a5c; }
.rw-dot.amber { background: #e0b14a; }
.rw-dot.moss { background: #4caf7a; }
.rw-wintitle {
  margin-left: 6px;
  font-family: var(--font-ui), sans-serif;
  font-size: 11px; font-weight: 600; color: var(--ink);
}
.rw-body { padding: 12px 14px 14px; }
.rw-photo-frame {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(51,101,138,.2); aspect-ratio: 4/3;
  background: var(--surface-2);
}
.rw-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-photo-tag {
  position: absolute; left: 8px; bottom: 8px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(21, 42, 50, 0.72); color: #fff;
  backdrop-filter: blur(4px);
}
.rw-prompt-row {
  border: 1px solid rgba(15, 107, 107, 0.16);
  background: rgba(15, 107, 107, 0.05);
  border-radius: 10px; padding: 9px 11px;
}
.rw-prompt-label {
  font-family: var(--font-ui), sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); display: block; margin-bottom: 3px;
}
.rw-gen-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.rw-gen-tile {
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: var(--surface); position: relative;
  box-shadow: 0 1px 3px var(--line);
}
.rw-gen-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.rw-gen-tile span {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10px; font-weight: 600;
  background: linear-gradient(180deg, transparent 0%, rgba(21, 42, 50, 0.78) 68%);
  color: #fff; text-align: center;
  padding: 16px 4px 5px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.rw-btn {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px; border: none;
  cursor: pointer; transition: background .2s ease, opacity .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rw-btn-slate { background: var(--slate); color: #fff; }
.rw-btn-slate:hover { background: #2a5474; }
.rw-btn-teal { background: var(--teal); color: #fff; }
.rw-btn-teal:hover { background: #0b647a; }
.rw-btn-navy { background: var(--navy); color: #fff; }
.rw-btn-navy:hover { background: #163f75; }
.rw-btn-brand { background: var(--brand); color: #fff; }
.rw-btn-brand:hover { background: var(--deep); }
.rw-btn-ghost {
  background: transparent; color: rgba(22,50,79,.72);
  border: 1px solid rgba(22,50,79,.15);
}
.rw-btn-ghost:hover { background: rgba(22,50,79,.04); }
.rw-btn:disabled { opacity: .4; pointer-events: none; }

.rw-dock-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 10px;
  border: 1.5px solid rgba(22,50,79,.1); background: var(--surface);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.rw-dock-item:hover { transform: translateY(-1px); border-color: rgba(15, 107, 107,.3); }
.rw-dock-item.is-on {
  border-color: var(--dock-c, var(--brand));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--dock-c, var(--brand)) 22%, transparent);
  background: color-mix(in srgb, var(--dock-c, var(--brand)) 6%, var(--surface));
}
.rw-dock-icon { display: flex; align-items: center; justify-content: center; }
.rw-preview-pane {
  border-radius: 10px; border: 1px solid rgba(22,50,79,.1);
  background: var(--surface-2); padding: 10px; min-height: 120px;
}
.rw-mini-chat { display: flex; flex-direction: column; gap: 6px; }
.rw-bubble {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 11px;
  padding: 6px 10px; border-radius: 10px; max-width: 90%; line-height: 1.45;
}
.rw-bubble.user { align-self: flex-end; background: var(--surface-2); color: var(--ink); border-bottom-right-radius: 3px; }
.rw-bubble.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 3px; }
.rw-mini-gallery { display: flex; flex-direction: column; gap: 6px; }
.rw-mini-gallery > img { width: 100%; height: 64px; object-fit: cover; border-radius: 8px; }
.rw-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rw-mini-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; }
.rw-mini-video { text-align: center; }
.rw-video-screen {
  height: 72px; border-radius: 8px;
  background: linear-gradient(145deg, #1e3a5f, #0b3c6e);
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
}
.rw-timeline { height: 4px; background: rgba(22,50,79,.1); border-radius: 999px; margin: 8px 0 4px; overflow: hidden; }
.rw-timeline i { display: block; height: 100%; background: var(--coral); border-radius: 999px; }
.rw-mini-audio { text-align: center; padding: 8px 0; }
.rw-wave { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 36px; }
.rw-wave i { width: 3px; border-radius: 2px; background: var(--indigo); display: block; }
.rw-mini-ide {
  display: flex; gap: 8px; background: #0f172a; color: #e2e8f0;
  border-radius: 8px; padding: 8px; font-size: 10px; line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.rw-ide-gutter { color: #64748b; text-align: right; user-select: none; }
.rw-ide-code { margin: 0; white-space: pre-wrap; }
.rw-ide-code .c-kw { color: #7dd3fc; }
.rw-ide-code .c-cmt { color: #94a3b8; }
.rw-mini-slides { display: flex; flex-direction: column; gap: 6px; }
.rw-slide-card {
  border-radius: 8px; border: 1px solid rgba(46,139,87,.25);
  background: rgba(46,139,87,.06); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 11px;
}
.rw-slide-card.dim { opacity: .55; }
.rw-slide-card b { font-family: var(--font-ui), sans-serif; font-size: 10px; color: var(--moss); }

.rw-chat-app { display: flex; flex-direction: column; min-height: 320px; }
.rw-chat-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.rw-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.rw-chat-log {
  flex: 1; min-height: 220px; max-height: 320px; overflow-y: auto;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
}
.rw-chat-empty {
  margin: auto; text-align: center; color: var(--read-muted);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px;
}
.rw-msg { display: flex; }
.rw-msg.user { justify-content: flex-end; }
.rw-msg.ai { justify-content: flex-start; }
.rw-msg-bubble {
  max-width: 85%; padding: 8px 12px; border-radius: 14px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 13px; line-height: 1.55;
}
.rw-msg.user .rw-msg-bubble { background: var(--surface-2); color: var(--ink); border-bottom-right-radius: 4px; }
.rw-msg.ai .rw-msg-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.rw-typing { display: flex; gap: 4px; align-items: center; min-width: 42px; }
.rw-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #9CA3AF;
  animation: rwTyping 1s ease-in-out infinite;
}
.rw-typing i:nth-child(2) { animation-delay: .15s; }
.rw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rwTyping {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-3px); opacity: 1; }
}
.rw-composer {
  display: flex; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.rw-composer-box {
  flex: 1; min-height: 44px; border-radius: 14px;
  border: 1px solid var(--line-mid); padding: 10px 14px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 13px;
  background: var(--surface); color: var(--ink);
}
.rw-send {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--ink); color: var(--paper); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
  position: relative;
  z-index: 1;
  box-shadow: none;
}
.rw-send:hover { background: #000000; }
.rw-send:disabled { background: var(--line-mid); opacity: 1; pointer-events: none; }

.rw-send-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rw-send-rings {
  position: absolute;
  inset: -6px;
  pointer-events: none;
  opacity: 0;
}
.rw-send-rings span {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid rgba(15, 107, 107, 0.45);
  opacity: 0;
}
.rw-send-hint {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  white-space: nowrap;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 8px;
}
.rw-send-wrap.is-cue .rw-send-rings { opacity: 1; }
.rw-send-wrap.is-cue .rw-send-rings span:nth-child(1) {
  animation: rwSendRing 1.8s ease-out infinite;
}
.rw-send-wrap.is-cue .rw-send-rings span:nth-child(2) {
  animation: rwSendRing 1.8s ease-out infinite 0.45s;
}
.rw-send-wrap.is-cue .rw-send {
  animation: rwSendPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.12);
}
.rw-send-wrap.is-cue .rw-send-hint {
  opacity: 1;
  animation: rwSendHint 1.4s ease-in-out infinite;
}
@keyframes rwSendPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.04); }
}
@keyframes rwSendRing {
  0%   { transform: scale(0.9); opacity: 0.55; border-color: rgba(17, 24, 39, 0.25); }
  100% { transform: scale(1.45); opacity: 0; border-color: rgba(17, 24, 39, 0); }
}
@keyframes rwSendHint {
  0%, 100% { opacity: 1; transform: translateY(-50%); }
  50% { opacity: 0.7; transform: translateY(calc(-50% + 2px)); }
}

.rw-metrics {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-ui), sans-serif; font-size: 11px; color: rgba(22,50,79,.75);
}
.rw-metrics strong { color: var(--navy); font-size: 14px; }
.rw-loss-chart {
  display: flex; align-items: flex-end; gap: 3px; height: 72px;
  padding: 8px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid rgba(22,50,79,.08);
}
.rw-loss-chart i {
  flex: 1; border-radius: 3px 3px 0 0; background: var(--navy);
  min-width: 4px; transition: height .4s ease;
}

.rw-pipe-step {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px; border-radius: 8px;
  border: 1px solid rgba(22,50,79,.08); background: var(--surface-2);
  opacity: .45; transition: opacity .25s ease, border-color .25s ease, background .25s ease;
}
.rw-pipe-step.is-on {
  opacity: 1; border-color: rgba(30,78,140,.35);
  background: rgba(30,78,140,.06);
}
.rw-pipe-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-ui), sans-serif; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rw-pipe-stage {
  border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--brand) 12%, transparent);
  background: color-mix(in srgb, var(--brand) 2.5%, var(--surface)); padding: 12px;
}
.rw-pipe-view { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.rw-raw {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px;
  padding: 4px 8px; border-radius: 6px; background: rgba(22,50,79,.06);
}
.rw-tok, .rw-tok-id {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(15, 107, 107,.25); background: rgba(15, 107, 107,.06);
  color: var(--deep);
}
.rw-tok.selectable { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.rw-tok.selectable:hover, .rw-tok.is-sel {
  border-color: var(--deep); background: rgba(15, 107, 107,.14);
}
.rw-tok.ok { border-color: rgba(46,139,87,.4); background: rgba(46,139,87,.1); color: var(--moss); }
.rw-tok-id { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; opacity: .35; transition: opacity .25s ease, outline .2s ease; }
.rw-tok-id em { font-style: normal; font-family: var(--font-ui), sans-serif; font-size: 8px; color: rgba(22,50,79,.68); }
.rw-tok-id.is-on { opacity: 1; outline: 2px solid var(--brand); outline-offset: 1px; }
.rw-tok-id.is-done { opacity: .7; background: rgba(46,139,87,.1); border-color: rgba(46,139,87,.35); }
.rw-final-sent {
  font-family: 'Noto Serif Bengali', serif; font-size: 15px;
  padding: 10px 14px; border-radius: 8px; background: var(--surface);
  border: 1px solid rgba(30,78,140,.2);
}
.rw-final-sent mark { background: rgba(15, 107, 107,.15); color: var(--deep); border-radius: 3px; padding: 0 3px; }
.rw-attn .rw-tok { outline: 2px solid; }

.rw-chip {
  font-family: var(--font-ui), sans-serif; font-size: 10px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(22,50,79,.06); color: rgba(22,50,79,.75);
  border: 1px solid rgba(22,50,79,.08);
}
.rw-panel {
  border-radius: 10px; border: 1px solid rgba(22,50,79,.1);
  background: var(--surface-2); padding: 10px 12px;
}
.rw-panel-h {
  font-family: var(--font-ui), sans-serif; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(22,50,79,.68); margin-bottom: 6px;
}
.rw-bin {
  text-align: center; padding: 10px 8px; border-radius: 10px;
  border: 1.5px dashed rgba(22,50,79,.18); background: var(--surface-2);
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.rw-bin:hover { border-color: rgba(15, 107, 107,.4); background: rgba(15, 107, 107,.04); }

.rw-ctx-log {
  min-height: 120px; max-height: 160px; overflow-y: auto;
  border-radius: 10px; border: 1px solid rgba(22,50,79,.1);
  background: var(--surface-2); padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.rw-ctx-msg {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 6px; background: var(--surface);
  border: 1px solid rgba(22,50,79,.06);
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px;
}
.rw-ctx-msg.is-drop { opacity: .35; text-decoration: line-through; }
.rw-ctx-k {
  font-family: var(--font-ui), sans-serif; font-size: 10px;
  color: var(--navy); font-weight: 600; white-space: nowrap;
}
.rw-ctx-meter { font-family: var(--font-ui), sans-serif; }
.rw-meter-track {
  height: 8px; border-radius: 999px; background: rgba(22,50,79,.08); overflow: hidden;
}
.rw-meter-fill {
  height: 100%; border-radius: 999px; background: var(--navy);
  transition: width .5s ease, background .3s ease;
}
.rw-meter-fill.is-over { background: var(--coral); }
.rw-model-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1; padding: 8px; border-radius: 8px;
  border: 1.5px solid rgba(22,50,79,.12); background: var(--surface);
  font-family: var(--font-ui), sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; color: rgba(22,50,79,.72);
}
.rw-model-btn small { font-weight: 400; font-size: 9px; color: rgba(22,50,79,.65); }
.rw-model-btn.is-on { border-color: var(--navy); background: rgba(30,78,140,.08); color: var(--navy); }

/* limitCards styles live in the polished .rw-warn-grid block below */

/* ============================================================
   Living diagrams (dg-*) ? visual stages, not curriculum rewrite
   ============================================================ */

.dg-stage, .dg-panel {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card-surface-flat);
  padding: var(--pad-card);
  box-shadow: none;
  outline: none;
  overflow: hidden;
}
.dg-stage::before, .dg-panel::before {
  display: none;
}
.dg-stage > *, .dg-panel > * {
  position: relative;
  z-index: 1;
}
.dg-panel {
  background: var(--card-surface-flat);
}

.dg-door-flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: var(--gap-md); flex-wrap: wrap;
}
.dg-door-node {
  flex: 1 1 100px; max-width: 140px;
  text-align: center; padding: var(--space-3);
  border-radius: 12px; border: 1.5px solid rgba(22,50,79,.12);
  background: rgba(255, 255, 255, 0.55); opacity: .45;
  transition: opacity .35s ease, border-color .35s ease, transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.dg-door-node.is-on {
  opacity: 1; border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  transform: translateY(-2px);
  background: var(--surface);
  box-shadow: none;
}
.dg-node-title {
  font-family: var(--font-ui), sans-serif;
  font-size: 11.5px; font-weight: 600; color: var(--deep); margin-top: 8px;
}
.dg-node-sub {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10.5px; color: rgba(22,50,79,.8); margin-top: 2px;
}
.dg-door-arrow {
  display: flex; align-items: center; color: rgba(22,50,79,.25);
  transition: color .3s ease, transform .3s ease;
}
.dg-door-arrow.is-on { color: var(--brand); transform: translateX(2px); }
.dg-brain {
  width: 56px; height: 40px; margin: 0 auto; position: relative;
}
.dg-brain span {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); opacity: .35;
}
.dg-brain span:nth-child(1) { left: 8px; top: 14px; }
.dg-brain span:nth-child(2) { left: 22px; top: 6px; }
.dg-brain span:nth-child(3) { left: 36px; top: 14px; }
.dg-brain span:nth-child(4) { left: 16px; top: 24px; }
.dg-brain span:nth-child(5) { left: 30px; top: 24px; }
.dg-door-node.is-on .dg-brain span {
  animation: dgPulse 1.2s ease-in-out infinite;
}
.dg-door-node.is-on .dg-brain span:nth-child(2) { animation-delay: .15s; }
.dg-door-node.is-on .dg-brain span:nth-child(3) { animation-delay: .3s; }
@keyframes dgPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.dg-door-icon {
  width: 48px; height: 56px; margin: 0 auto; position: relative;
}
.dg-door-panel {
  width: 36px; height: 52px; margin: 0 auto;
  border: 2px solid var(--amber); border-radius: 4px 6px 4px 4px;
  background: rgba(196,138,42,.12);
}
.dg-door-knob {
  position: absolute; right: 12px; top: 26px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
}
.dg-user-icon {
  width: 48px; height: 48px; margin: 0 auto;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 107, 107,.08); color: var(--deep);
}

.dg-output-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dg-output-tile {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line-mid));
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  text-align: left;
  min-height: 0;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dg-output-tile:hover {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--c) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
}
.dg-output-tile.is-on {
  background: color-mix(in srgb, var(--c) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: none;
}
.dg-output-ico {
  color: var(--c);
  display: flex;
  width: auto;
  height: auto;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
  opacity: 0.9;
}
.dg-output-ico iconify-icon,
.dg-output-ico svg {
  width: 14px;
  height: 14px;
}
.dg-output-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  white-space: nowrap;
}
.dg-output-tile.is-on .dg-output-label {
  color: var(--ink);
  font-weight: 650;
}
.dg-output-stage {
  margin-top: 10px;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.dg-output-preview {
  border: 1px solid color-mix(in srgb, var(--c, rgba(21, 42, 50, 0.14)) 35%, var(--line));
  border-radius: 12px;
  padding: 12px 14px 12px 16px;
  background: rgba(255, 255, 255, 0.78);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}
.dg-output-preview-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  height: auto;
  margin: 0;
}
.dg-output-kicker {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 3px;
  opacity: 0.75;
}
.dg-output-title {
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  font-weight: 700;
}
.dg-output-desc {
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  margin: 4px 0 0;
  line-height: 1.45;
}
.dg-output-exlabel {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  margin: 10px 0 6px;
}
.dg-output-sample {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.dg-token-bins {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md);
}
@media (min-width: 640px) {
  .dg-token-bins { grid-template-columns: repeat(4, 1fr); }
}
.dg-token-bin {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px; border-radius: 12px; text-align: left;
  border: 1.5px solid rgba(196,138,42,.28); background: var(--surface);
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.dg-token-bin.is-on {
  border-color: var(--amber);
  box-shadow: none;
  background: rgba(196,138,42,.05);
}
.dg-token-bin-ico { color: var(--amber); }
.dg-token-chiprow, .dg-spot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-chip {
  font-family: var(--font-body), 'Noto Sans Bengali', sans-serif;
  font-size: 12px; padding: 3px 7px; border-radius: 7px;
  background: rgba(196,138,42,.12); color: var(--deep);
  border: 1px solid rgba(196,138,42,.22);
}
.dg-chip.soft {
  background: var(--chip-bg, rgba(22,50,79,.04));
  border-color: var(--chip-bd, rgba(22,50,79,.1));
  color: var(--chip-fg, rgba(21, 42, 50, 0.78));
  font-size: 12px;
  font-weight: 600;
}
.dg-chip-ico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  line-height: 1.25;
  border-radius: 999px;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease;
}
.dg-chip-ico:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.97);
}
.dg-chip-ico iconify-icon,
.dg-chip-ico svg {
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
  width: 12px;
  height: 12px;
}

.dg-remember-grid {
  display: grid; gap: var(--gap-md);
}
@media (min-width: 640px) {
  .dg-remember-grid { grid-template-columns: repeat(3, 1fr); }
}
.dg-remember-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 14px; border-radius: 14px; text-align: left;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  cursor: pointer;
  min-height: 118px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(21, 42, 50, 0.04);
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s ease,
    background .35s ease;
}
.dg-remember-card:hover:not(.is-on) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ink) 14.000000000000002%, transparent);
  box-shadow: 0 6px 16px rgba(21, 42, 50, 0.07);
}
.dg-remember-ico,
.dg-remember-title,
.dg-remember-hint,
.dg-remember-body,
.dg-remember-check {
  position: relative;
  z-index: 1;
}
.dg-remember-ico {
  color: var(--c);
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 14%, transparent);
  transition: background .35s ease;
}
.dg-remember-hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  transition: opacity .3s ease, max-height .3s ease, margin .3s ease;
  max-height: 24px;
}
.dg-remember-body {
  position: relative;
  overflow: hidden;
  max-height: 0;
  width: 100%;
  margin-top: 0;
  opacity: 1;
  transform: none;
  transition: max-height .55s cubic-bezier(.4, 0, .2, 1), margin .35s ease;
}
.dg-remember-body-text {
  display: block;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .4s cubic-bezier(.4, 0, .2, 1) .18s,
    transform .45s cubic-bezier(.4, 0, .2, 1) .18s;
}
.dg-remember-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c);
  color: #fff;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease .2s, transform .35s cubic-bezier(.4, 0, .2, 1) .2s;
}
.dg-remember-card.is-on {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--c) 35%, var(--line-mid));
  background: var(--surface);
  box-shadow: 0 4px 14px var(--line);
}
.dg-remember-card.is-on .dg-remember-ico {
  background: color-mix(in srgb, var(--c) 12%, var(--surface));
}
.dg-remember-card.is-on .dg-remember-hint {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
}
.dg-remember-card.is-on .dg-remember-body {
  max-height: 140px;
  margin-top: 6px;
}
.dg-remember-card.is-on .dg-remember-body-text {
  opacity: 1;
  transform: translateY(0);
}
.dg-remember-card.is-on .dg-remember-check {
  opacity: 1;
  transform: scale(1);
}
.dg-remember-card.is-on .card-shutter i {
  transform: scaleY(0);
  opacity: 0;
}

.dg-cost-board {
  display: grid; gap: var(--gap-stack);
}
@media (min-width: 640px) {
  .dg-cost-board { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}
.dg-cost-meters {
  border-radius: 12px; border: 1px solid rgba(30,78,140,.18);
  background: linear-gradient(160deg, #f0f5fa, var(--surface));
  padding: 14px;
}
.dg-cost-track {
  height: 10px; border-radius: 999px; background: rgba(30,78,140,.1); overflow: hidden;
}
.dg-cost-track i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--navy); transition: width .55s cubic-bezier(.22,.9,.3,1);
}
.dg-cost-track.amber i { background: var(--amber); }
.dg-cost-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 10px; border-top: 1px dashed rgba(22,50,79,.15);
}

.dg-think-chat {
  position: relative; max-width: 420px; margin: 0 auto;
  border-radius: 14px; border: 1px solid rgba(15, 107, 107,.16);
  background: var(--surface); padding: 14px; overflow: hidden;
}
.dg-think-bubble {
  border-radius: 10px; padding: 8px 12px;
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 13px;
}
.dg-think-bubble.user {
  background: rgba(15, 107, 107,.08); color: var(--deep); margin-right: 20%;
}
.dg-think-bubble.ai {
  background: rgba(196,92,74,.08); color: var(--deep); margin-left: 20%;
}
.dg-think-bubble.is-blur { filter: blur(3px); opacity: .7; }
.dg-think-fog {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(244,248,251,.2), rgba(196,138,42,.12), rgba(244,248,251,.35));
  pointer-events: none; transition: opacity .5s ease;
}
.dg-think-fog.is-clear { opacity: 0; }

.dg-spot-hero {
  display: flex; gap: var(--gap-stack); align-items: center;
  padding: var(--pad-card); border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 7%, var(--surface));
}
.dg-spot-letter {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui), sans-serif; font-weight: 700; font-size: 18px;
  color: #fff; background: var(--c);
}

.dg-squad-slots {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
@media (max-width: 640px) {
  .dg-squad-slots { grid-template-columns: repeat(3, 1fr); }
}
.dg-squad-slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 10px;
  border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent);
  background: var(--surface); cursor: pointer; color: var(--c);
  transition: background .2s ease, border-style .2s ease;
}
.dg-squad-slot b { font-family: var(--font-ui), sans-serif; font-size: 16px; }
.dg-squad-slot span { font-family: var(--font-ui), sans-serif; font-size: 10px; font-weight: 600; }
.dg-squad-slot small {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 9px; color: rgba(22,50,79,.65);
}
.dg-squad-slot.is-on {
  border-style: solid; background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--deep);
}
.dg-squad-slot.is-dropped { opacity: .35; text-decoration: line-through; }
.dg-doc-tag {
  display: inline-block; color: #fff; font-size: 9px; font-family: var(--font-ui), sans-serif;
  padding: 1px 6px; border-radius: 4px; margin-right: 4px; vertical-align: middle;
}

.dg-lens-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-lens-tab {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 12px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(51,101,138,.3); background: var(--surface); color: var(--slate);
}
.dg-lens-tab.is-on { background: var(--slate); color: #fff; border-color: var(--slate); }
.dg-lens-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 72px;
}
.dg-lens-pane {
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui), sans-serif; font-size: 13px; font-weight: 600;
}
.dg-lens-pane.bn { background: rgba(14,116,144,.08); color: var(--teal); }
.dg-lens-pane.en { background: rgba(51,101,138,.1); color: var(--slate); }
.dg-lens-card {
  border-radius: 12px; border: 1.5px solid rgba(51,101,138,.22);
  background: var(--surface); padding: 14px 16px;
}

.dg-tips-board {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 640px) {
  .dg-tips-board { grid-template-columns: repeat(3, 1fr); }
}
.dg-tip-note {
  position: relative; text-align: left;
  padding: 14px 12px 12px; border-radius: 4px;
  background: color-mix(in srgb, var(--output) 12%, var(--surface)); border: 1px solid rgba(46,139,87,.22);
  box-shadow: 0 2px 0 rgba(46,139,87,.08);
  transform: rotate(var(--rot, 0deg));
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease, min-height .4s ease;
  min-height: 88px; display: flex; flex-direction: column; align-items: flex-start;
  overflow: hidden;
}
.dg-tip-hint {
  font-size: 12px;
  color: rgba(46,139,87,.7);
  transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
  max-height: 24px;
}
.dg-tip-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition:
    max-height .48s cubic-bezier(.4, 0, .2, 1),
    opacity .36s cubic-bezier(.4, 0, .2, 1) .04s,
    transform .42s cubic-bezier(.4, 0, .2, 1);
}
.dg-tip-note.is-on {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 4px 14px var(--line);
  border-color: rgba(46, 139, 87, 0.35);
  min-height: 120px;
}
.dg-tip-note.is-on .dg-tip-hint {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
}
.dg-tip-note.is-on .dg-tip-body {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}
.dg-tip-pin {
  position: absolute; top: 6px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
}

.dg-industry {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 12px; border-radius: 14px;
  border: 1px solid rgba(46,139,87,.18);
  background: linear-gradient(180deg, rgba(46,139,87,.06), var(--surface) 55%);
}
.dg-industry-core {
  width: 118px; height: 118px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--moss); color: #fff; text-align: center; padding: 8px;
  font-family: var(--font-ui), sans-serif; font-size: 11px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(46,139,87,.25);
}
.dg-industry-nodes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.dg-industry-node {
  font-family: 'Noto Sans Bengali', sans-serif; font-size: 11px;
  padding: 6px 10px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(46,139,87,.3); background: var(--surface); color: var(--moss);
  transition: background .2s ease, color .2s ease;
}
.dg-industry-node.is-on { background: var(--moss); color: #fff; }

.dg-bridge {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
}
@media (max-width: 640px) {
  .dg-bridge { grid-template-columns: 1fr; }
  .dg-bridge-link { transform: rotate(90deg); margin: 4px auto; }
}
.dg-bridge-side {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border-radius: 12px; text-align: left; cursor: pointer;
  border: 1.5px solid rgba(22,50,79,.14); background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dg-bridge-side.engine.is-on { border-color: var(--navy); box-shadow: none; }
.dg-bridge-side.tools.is-on { border-color: var(--amber); box-shadow: none; }
.dg-bridge-ico { color: var(--deep); margin-bottom: 2px; }
.dg-bridge-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px;
}
.dg-bridge-link i {
  display: block; width: 48px; height: 3px; border-radius: 999px;
  background: rgba(196,138,42,.25); position: relative;
  transition: background .3s ease;
}
.dg-bridge-link.is-on i {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(196,138,42,.12);
}

/* ============================================================
   Soft polish cascade ? quieter sim / diagram surfaces
   ============================================================ */

.sim-badge {
  border: none;
  border-radius: 10px;
  background: rgba(15, 107, 107, 0.08);
  color: var(--brand);
  font-weight: 600;
}

.rw-app {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-surface-flat);
  box-shadow: none;
  outline: none;
  overflow: hidden;
}
.rw-winbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.rw-wintitle { color: var(--ink); font-family: var(--font-ui), sans-serif; }
.rw-btn { border-radius: 12px; }
.rw-btn-ghost {
  background: var(--surface-2);
  border: none;
  color: rgba(21,42,50,.55);
}
.rw-btn-ghost:hover { background: rgba(15, 107, 107,.08); }
.rw-panel,
.rw-preview-pane,
.rw-pipe-stage,
.rw-field-preview,
.rw-ctx-log {
  border: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
  background: color-mix(in srgb, var(--brand) 2.5%, var(--surface));
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: none;
}
.rw-composer-box {
  border: 1.5px solid color-mix(in srgb, var(--brand) 14%, transparent);
  background: linear-gradient(180deg, #FBFFFE, #F0FDF8);
  border-radius: 14px;
  outline: none;
  box-shadow: none;
}
.rw-dock-item,
.rw-pipe-step,
.rw-model-btn,
.rw-rtcft-key,
.rw-bin {
  border-radius: var(--radius-sm);
  border: none;
  outline: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}
.rw-dock-item.is-on,
.rw-pipe-step.is-on,
.rw-model-btn.is-on {
  outline-color: color-mix(in srgb, var(--dock-c, var(--navy)) 45%, transparent);
  background: color-mix(in srgb, var(--dock-c, var(--navy)) 7%, var(--surface));
}
.rw-chat-top {
  background: linear-gradient(135deg, #F0F9FF 0%, var(--surface-2) 55%, var(--surface) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
}
.rw-chat-log { background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%, var(--surface) 100%); }
.rw-msg-bubble { border-radius: 14px; }
.rw-send { border-radius: 12px; }
.rw-metrics > div,
.rw-tok,
.rw-tok-id,
.rw-chip {
  border-radius: 10px;
  border: none;
  outline: 1px solid var(--line);
}

.dg-door-node,
.dg-token-bin,
.dg-bridge-side,
.dg-lens-card,
.dg-squad-slot {
  border: none;
  border-radius: var(--radius-md);
  outline: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}
.dg-remember-card {
  border-radius: var(--radius-md);
  /* keep accent border from --c; don't flatten with generic outline */
  outline: none;
}
.dg-door-node.is-on,
.dg-token-bin.is-on,
.dg-bridge-side.is-on {
  box-shadow: none;
}
.dg-output-tile {
  outline: none;
}
.dg-output-tile.is-on {
  box-shadow: none;
}
.dg-lens-tab,
.dg-industry-node {
  border-radius: 12px;
  border: none;
  outline: 1.5px solid var(--line-mid);
  background: var(--surface);
}
.dg-lens-tab.is-on,
.dg-industry-node.is-on {
  outline: none;
}
.dg-tip-note {
  border-radius: var(--radius-sm);
  box-shadow: none;
  border: 1px solid rgba(15, 107, 107,.2);
}
.dg-think-chat {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: none;
}
.dg-cost-meters {
  border: none;
  border-radius: var(--radius-md);
  outline: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}
.dg-industry {
  border: none;
  outline: 1px solid rgba(15, 107, 107,.16);
  border-radius: var(--radius-lg);
}

.motif-email {
  background:
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(214, 228, 240,.2), transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 30%, rgba(15, 107, 107,.14), transparent 55%);
}
.motif-prompt {
  background:
    radial-gradient(ellipse 45% 40% at 70% 60%, rgba(15, 107, 107,.22), transparent 60%),
    radial-gradient(ellipse 35% 30% at 25% 25%, rgba(107,127,158,.18), transparent 55%);
}
.motif-craft {
  background:
    radial-gradient(ellipse 50% 45% at 50% 40%, rgba(212,160,74,.16), transparent 60%),
    radial-gradient(ellipse 40% 35% at 15% 80%, rgba(224,138,106,.12), transparent 55%);
}
.motif-ethics {
  background:
    radial-gradient(ellipse 45% 40% at 40% 50%, rgba(15, 107, 107,.16), transparent 60%),
    radial-gradient(ellipse 35% 30% at 85% 20%, rgba(90,117,144,.14), transparent 55%);
}

/* ============================================================
   Spacing & alignment system ? shared chrome rhythm
   ============================================================ */

.sim-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-bottom: var(--space-3);
  min-height: 28px;
}
.sim-toolbar .sim-badge {
  flex-shrink: 0;
}

.dg-stage + .dg-panel,
.dg-panel + .dg-panel,
.rw-app + .rw-app,
.rw-app + .dg-panel,
.dg-stage + .rw-app {
  margin-top: var(--space-3);
}

.dg-token-bin,
.dg-remember-card {
  padding: 12px 8px;
}
.dg-cost-meters {
  padding: var(--pad-card);
}
.dg-think-chat {
  padding: var(--pad-card);
}
.dg-caption {
  margin-top: var(--space-3);
}

.rw-prompt-row {
  padding: var(--space-2) var(--space-3);
}
.rw-preview-pane {
  padding: var(--space-3);
}
.rw-pipe-stage {
  padding: var(--space-3);
}

/* ---------- R?T?C?F?T split composer (30/70) ---------- */
/* Fill stage; avoid nested page scroll fighting panel scroll */
.stage-scroll.is-rtcft {
  display: block;
  height: auto;
  max-height: none;
  overflow: visible;
  padding-bottom: var(--space-2);
}
.stage-scroll.is-rtcft > * {
  display: block;
  min-height: 0;
}
.rtcft-host {
  display: block;
  min-height: 0;
}

.rtcft-split {
  --rtcft-glass: rgba(255, 255, 255, 0.9);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: auto;
  min-height: 0;
  padding: 6px;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(125, 211, 252, 0.35), transparent 55%),
    radial-gradient(900px 420px at 90% 0%, rgba(196, 181, 253, 0.32), transparent 50%),
    linear-gradient(165deg, #F8FBFF 0%, #F4F7FF 45%, #F7F4FF 100%);
  border-radius: 18px;
  overflow: visible;
}

/* Thin, soft scrollbars for panel bodies */
.rtcft-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 107, 107, 0.35) transparent;
}
.rtcft-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.rtcft-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.rtcft-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 107, 107, 0.28);
  border-radius: 999px;
}
.rtcft-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 107, 107, 0.45);
}

.rtcft-split-banner {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  padding: 0 2px;
}
.rtcft-pill {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
  color: var(--deep);
}
.rtcft-pill.left { color: #1D4ED8; background: rgba(59, 130, 246, 0.12); }
.rtcft-pill.right { color: #6D28D9; background: rgba(124, 58, 237, 0.12); }

.rtcft-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  overflow: visible;
}
@media (min-width: 900px) {
  .rtcft-split-grid {
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
    gap: 10px;
  }
}

.rtcft-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rtcft-panel-left {
  overflow: visible;
  padding-right: 2px;
}
.rtcft-panel-right {
  overflow: visible;
}
@media (min-width: 900px) {
  .rtcft-panel-left {
    position: sticky;
    top: 88px;
    align-self: start;
  }
}

.rtcft-glass {
  background: var(--rtcft-glass);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: 0 6px 20px var(--line);
}
.rtcft-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--deep);
}
.rtcft-card-head h3 {
  font-family: 'Noto Serif Bengali', serif;
  font-size: 12.5px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}
.rtcft-prompt-card,
.rtcft-fw-card { padding: 10px 11px; flex: 0 0 auto; }
.rtcft-prompt-body {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}

.rtcft-fw-grid {
  display: grid;
  gap: 6px;
}
.rtcft-fw-item {
  text-align: left;
  border-radius: 10px;
  border: 1px solid var(--fw-border);
  background: var(--fw-bg);
  padding: 7px 9px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.rtcft-fw-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(21,42,50,.08); }
.rtcft-fw-item.is-on {
  box-shadow: 0 0 0 2px var(--fw-border), 0 8px 18px rgba(21,42,50,.1);
}
.rtcft-fw-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.rtcft-fw-icon {
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--fw-border);
  border: 1px solid color-mix(in srgb, var(--fw-border) 35%, transparent);
  flex-shrink: 0;
}
.rtcft-fw-item strong {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px;
  color: var(--deep);
  flex: 1;
  min-width: 0;
}
.rtcft-fw-zoom {
  color: var(--fw-border);
  opacity: .55;
  flex-shrink: 0;
  display: inline-flex;
}
.rtcft-fw-item:hover .rtcft-fw-zoom { opacity: 1; }
.rtcft-fw-item q {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  quotes: none;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.rtcft-fw-hint {
  margin: 6px 0 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10.5px;
  color: var(--ink);
  opacity: .55;
}

/* Framework zoom popup ? fixed to viewport (not clipped by split overflow) */
.rtcft-modal[hidden] { display: none !important; }
.rtcft-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
}
.rtcft-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 32, 0.62);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.rtcft-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 28px));
  max-height: min(90dvh, 640px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  padding-top: 14px;
  animation: rtcftModalIn .22s ease both;
}
.rtcft-modal-x {
  position: absolute;
  top: 0;
  right: 6px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--secondary);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--secondary-rgb), 0.35);
}
.rtcft-modal-x:hover { background: color-mix(in srgb, var(--secondary) 86%, #000); }
.rtcft-modal-card {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 107, 107, 0.35) transparent;
  background: var(--surface);
  border-radius: 18px;
  border: 2px solid var(--fw-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  padding: 20px 20px 18px;
  background-image: linear-gradient(180deg, var(--fw-bg), var(--surface) 42%);
}
.rtcft-modal-card::-webkit-scrollbar { width: 6px; }
.rtcft-modal-card::-webkit-scrollbar-thumb {
  background: rgba(15, 107, 107, 0.28);
  border-radius: 999px;
}
.rtcft-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.rtcft-modal-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 0;
}
.rtcft-modal-kicker {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--fw-border);
}
.rtcft-modal-head h3 {
  margin: 2px 0 0;
  font-family: 'Noto Serif Bengali', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep);
  line-height: 1.3;
}
.rtcft-modal-q {
  margin: 0 0 10px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  opacity: .7;
}
.rtcft-modal-quote {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border-left: 3px solid var(--fw-border);
  background: rgba(255, 255, 255, 0.9);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--deep);
}
.rtcft-modal-expl {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
}
.rtcft-modal-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 0 2px;
}
.rtcft-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 14px;
  border-radius: 12px;
  border: none;
  background: var(--surface);
  color: var(--deep);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.rtcft-modal-btn:hover { background: var(--surface-2); }
.rtcft-modal-btn-primary {
  background: var(--secondary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--secondary-rgb), 0.35);
}
.rtcft-modal-btn-primary:hover { background: color-mix(in srgb, var(--secondary) 86%, #000); }
.rtcft-modal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rtcft-modal-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.rtcft-modal-dot.is-on {
  width: 18px;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--brand);
}
body.rtcft-modal-open { overflow: hidden; }
@keyframes rtcftModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.rtcft-out-shell {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 260px;
  overflow: visible;
}
.rtcft-out-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 255, 0.95);
}
.rtcft-out-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rtcft-out-avatar {
  width: 34px; height: 34px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0F6B6B, #2563EB);
  color: #fff;
  flex-shrink: 0;
}
.rtcft-out-title {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px; font-weight: 700; color: var(--deep);
}
.rtcft-out-sub {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10.5px; color: var(--ink); opacity: .5;
}
.rtcft-gpt-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(15, 107, 107, 0.12); color: var(--brand);
  flex-shrink: 0;
}

.rtcft-out-lock {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 14px;
  color: var(--ink);
  opacity: .7;
  text-align: center;
}
.rtcft-out-lock p {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px;
}
.rtcft-reveal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  padding: 9px 14px;
  border: none; border-radius: 12px;
  background: var(--secondary); color: #fff;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(var(--secondary-rgb), 0.28);
}
.rtcft-reveal-btn:hover { background: color-mix(in srgb, var(--secondary) 86%, #000); }

.rtcft-out-shell.is-locked .rtcft-out-body { display: none; }
.rtcft-out-body {
  overflow: visible;
  padding: 12px 14px 16px;
  animation: beatEnter .35s ease both;
}
.rtcft-out-h {
  margin: 0 0 10px;
  font-family: 'Noto Serif Bengali', serif;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--deep);
  line-height: 1.4;
}
.rtcft-out-block { margin-bottom: 12px; }
.rtcft-out-block-last { margin-bottom: 4px; }
.rtcft-out-kicker {
  margin: 0 0 5px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--brand);
}
.rtcft-out-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

.rtcft-cloud-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 16px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(125,211,252,.18), rgba(196,181,253,.16));
  border: 1px solid rgba(15, 107, 107, 0.1);
}
.rtcft-cloud-node {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(21,42,50,.06);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px; font-weight: 600; color: var(--deep);
}
.rtcft-cloud-core {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.2);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 700;
}

.rtcft-bullets {
  margin: 0; padding: 0 0 0 1.1rem;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px; color: var(--ink);
  line-height: 1.6;
}
.rtcft-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rtcft-tag {
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(15, 107, 107, 0.1); color: var(--brand);
}
.rtcft-examples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 640px) {
  .rtcft-examples { grid-template-columns: 1fr 1fr; }
}
.rtcft-ex-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.rtcft-ex-card strong {
  display: block;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px; color: var(--deep);
}
.rtcft-ex-card p {
  margin: 2px 0 0;
  font-size: 11.5px; color: var(--slatex); line-height: 1.45;
}

.rtcft-out-composer {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: rgba(248, 250, 252, 0.95);
}
.rtcft-out-input {
  flex: 1;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px; color: var(--ink); opacity: .45;
  padding: 7px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid rgba(21,42,50,.08);
}
.rtcft-out-tools {
  display: inline-flex; gap: 8px; color: var(--ink); opacity: .45;
}

.rtcft-tip {
  flex: 0 0 auto;
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(254, 243, 199, 0.85);
  border: 1px solid rgba(217, 119, 6, 0.22);
  color: #92400E;
}
.rtcft-tip p {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11.5px; line-height: 1.45;
}
.rtcft-tip strong { font-weight: 700; }

/* Figure blocks */
/* .stage-scroll .rounded-xl.overflow-hidden {
  margin-top: var(--space-3);
} */

/* ---------- u4 figure zoom + lightbox ---------- */
.u4-figure-panel {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
.u4-figure-lead {
  margin: 0 0 14px;
  color: var(--read-ink);
}
.u4-figure {
  margin: 0;
}
.u4-fig-media {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--line-mid, #d8dee6) 80%, transparent);
  background: var(--surface);
  box-shadow: 0 8px 24px var(--line);
}
.u4-fig-img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  vertical-align: middle;
}
.u4-fig-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(21, 42, 50, 0.72);
  box-shadow: 0 4px 14px rgba(21, 42, 50, 0.22);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.u4-fig-media:hover .u4-fig-zoom,
.u4-fig-media:focus-within .u4-fig-zoom {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.u4-fig-zoom:hover { background: var(--brand); }
.u4-fig-zoom iconify-icon { display: flex; }

.u4-lightbox[hidden] { display: none !important; }
.u4-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.u4-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 32, 0.72);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.u4-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 96vw);
  max-height: 90vh;
  margin: auto;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: u4LightboxIn .22s ease both;
}
.u4-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(90vh - 40px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface);
}
.u4-lightbox-close {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 6px 18px rgba(15, 107, 107, 0.35);
  cursor: pointer;
}
.u4-lightbox-close:hover { background: var(--teal); }
.u4-lightbox-close iconify-icon { display: flex; }
body.u4-lightbox-open { overflow: hidden; }
@keyframes u4LightboxIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- AI Tutor mentor chat ---------- */
@keyframes aiTutorFabPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(112, 44, 145, 0.38), 0 0 0 0 rgba(112, 44, 145, 0.32); }
  55% { box-shadow: 0 8px 22px rgba(112, 44, 145, 0.38), 0 0 0 12px rgba(112, 44, 145, 0); }
}
@keyframes aiTutorSheen {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  22% { opacity: 0.5; }
  45% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}
@keyframes aiTutorIconPop {
  0%, 100% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.12) rotate(-6deg); }
  70% { transform: scale(1.04) rotate(3deg); }
}
.ai-tutor-fab {
  position: fixed;
  right: 20px;
  top: auto;
  bottom: 96px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, #9B4FC4 0%, #702c91 48%, #4A1C62 100%);
  box-shadow:
    0 8px 22px rgba(112, 44, 145, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-family: var(--font-ui);
  cursor: pointer;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  animation: aiTutorFabPulse 2.6s ease-out infinite;
}
.ai-tutor-fab::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--indigo) 12%, var(--surface));
  border: 1.5px solid rgba(112, 44, 145, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.ai-tutor-fab:hover {
  background: linear-gradient(145deg, #8B45B5 0%, #702c91 50%, #5A2375 100%);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 14px 30px rgba(112, 44, 145, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  animation: none;
}
.ai-tutor-fab:hover .ai-fab-icon {
  animation: aiTutorIconPop .55s ease;
}
.ai-tutor-fab.open {
  background: linear-gradient(145deg, #5A2375 0%, #4A1C62 100%);
  animation: none;
}
.ai-tutor-fab.open::after {
  background: color-mix(in srgb, var(--indigo) 16%, var(--surface));
}
.ai-fab-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ai-fab-icon svg,
.ai-fab-icon iconify-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: #fff;
  stroke: currentColor;
  flex-shrink: 0;
}
.ai-tutor-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #702c91;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ai-fab-icon .ai-tutor-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
}
.chat-avatar iconify-icon,
.chat-close-btn iconify-icon,
.chat-send-btn iconify-icon,
.chat-clear-btn iconify-icon,
.chat-voice-btn iconify-icon,
.msg-avatar iconify-icon {
  display: flex;
  color: inherit;
}
.chat-close-btn svg,
.chat-clear-btn svg,
.chat-voice-btn svg,
.chat-send-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ai-chat-panel {
  position: fixed;
  right: 20px;
  top: auto;
  bottom: 88px;
  z-index: 70;
  width: min(380px, calc(100vw - 28px));
  height: min(600px, calc(100dvh - 112px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  box-shadow: 0 16px 40px var(--line-mid);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.ai-chat-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.chat-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, #9B4FC4 10%, var(--surface)) 0%, color-mix(in srgb, #702c91 14%, var(--surface)) 48%, color-mix(in srgb, #4A1C62 12%, var(--surface)) 100%);
  border-bottom: 1px solid rgba(112, 44, 145, 0.12);
}
.chat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  flex-shrink: 0;
  padding: 0;
}
.chat-avatar .ai-tutor-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #702c91;
}
.chat-header-info {
  min-width: 0;
  flex: 1;
}
.chat-header-info h3 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', var(--font-ui), sans-serif;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
}
.chat-header-info p,
.chat-header-status,
.chat-suggest-btn,
.chat-voice-btn,
#chat-suggest-btn,
#chat-voice-btn {
  display: none !important;
}
.ai-chat-panel .chat-header .chat-header-status,
.ai-chat-panel .chat-header .chat-suggest-btn,
.ai-chat-panel .chat-header .chat-voice-btn {
  display: none !important;
}
.chat-close-btn,
.chat-clear-btn,
.chat-suggest-btn,
.chat-voice-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.chat-close-btn:hover,
.chat-clear-btn:hover,
.chat-suggest-btn:hover,
.chat-voice-btn:hover {
  background: var(--line);
  color: var(--ink);
}
.chat-suggest-btn {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.chat-suggest-btn.is-on,
.chat-voice-btn.is-on {
  background: rgba(15, 107, 107, 0.1);
  color: #0F6B6B;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  background: var(--surface-2);
}
.chat-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.chat-msg.user {
  flex-direction: row-reverse;
  align-items: center;
}
.msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: var(--brand);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
}
.ai-tutor-msg-avatar {
  background: #702c91;
  color: #fff;
}
.chat-msg.user .msg-avatar {
  color: #0F6B6B;
  background: rgba(15, 107, 107, 0.12);
}
.msg-bubble {
  max-width: calc(100% - 40px);
  padding: 9px 12px;
  border-radius: 12px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.chat-msg.bot .msg-bubble {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}
.chat-msg.bot .msg-bubble::selection,
.chat-msg.user .msg-bubble::selection {
  background: rgba(15, 107, 107, 0.18);
}
.chat-msg.user .msg-bubble {
  color: #fff;
  background: var(--brand);
  border-color: transparent;
}
.msg-bubble p { margin: 0; color: inherit; }
.msg-bubble p + p { margin-top: 8px; }
.msg-bubble strong { font-weight: 700; color: inherit; }
.msg-bubble a {
  color: #0F6B6B;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.chat-msg.user .msg-bubble a {
  color: #fff;
}
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
.typing-indicator i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
  animation: aiTutorTyping 1.1s infinite ease-in-out;
}
.typing-indicator i:nth-child(2) { animation-delay: .16s; }
.typing-indicator i:nth-child(3) { animation-delay: .32s; }
@keyframes aiTutorTyping {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.chat-suggestions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  max-height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  scrollbar-width: thin;
}
.chat-suggestions[hidden] {
  display: none !important;
}
.suggestion-btn {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  max-width: min(220px, 72vw);
  min-height: 28px;
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  padding: 5px 11px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: none;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.suggestion-btn:hover {
  color: #0F6B6B;
  background: rgba(15, 107, 107, 0.04);
  border-color: rgba(15, 107, 107, 0.28);
}
.suggestion-btn:active {
  transform: none;
}
.chat-input-area {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat-input {
  min-width: 0;
  flex: 1;
  height: 40px;
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  padding: 0 12px;
  outline: none;
  color: var(--ink);
  background: var(--surface-2);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
}
.chat-input::placeholder {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.chat-input:focus {
  border-color: rgba(15, 107, 107, 0.45);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.1);
  color: var(--ink);
}
.chat-send-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--brand);
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease;
}
.chat-send-btn:hover { background: #0c5a5a; }
.chat-send-btn:disabled {
  opacity: .5;
  cursor: wait;
}

@media (max-width: 639px) {
  .ai-tutor-fab {
    right: 14px;
    top: auto;
    bottom: 88px;
    width: 48px;
    height: 48px;
  }
  .ai-tutor-fab::after {
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
  }
  .ai-chat-panel {
    right: 10px;
    top: auto;
    bottom: 76px;
    width: calc(100vw - 20px);
    height: min(520px, calc(100dvh - 104px));
    border-radius: 14px;
  }
  .chat-header-status { display: none; }
}
@media (hover: none) {
  .u4-fig-zoom {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .beat-enter, .slide-enter-fwd, .slide-enter-back,
  .token-pop, .token-fall, .pulse-once, .shake,
  .dot-current, .orbit-node-active,
  .cinema-tick-pop, .fade-up, .obj-star, .grainShift,
  .reelBlink, .posterGrow, .orbDrift, .scanMove, .kenBurns,
  .wavePulse, .typingDot, .particleDrift, .startPulse,
  .tickSpin, .shutterShine, .dgPulse,
  .welcomeFloat, .welcomeBlob { animation: none !important; }
  .prob-bar, .jar-fill, .flip-inner, .curtain,
  .cinema-slide-track, .cinema-slide-inner,
  .cinema-countdown, .cinema-titlecard, .cinema-startgate,
  .dg-cost-track i, .dg-door-node, .dg-think-fog { transition: none !important; }
  /* shutter open/close transitions stay ? theater sequence must remain visible */
  .cinema-grain { opacity: .06; }
  .cinema-particles { display: none; }
}


/* ---------- gpt iterative chat (ChatGPT-style) ---------- */
.gpt-shell {
  --gpt-bg: var(--surface);
  --gpt-panel: var(--surface);
  --gpt-line: var(--line);
  --gpt-ink: var(--ink);
  --gpt-muted: var(--read-muted);
  --gpt-accent: #10A37F;
  --gpt-accent-deep: #0D8C6D;
  --gpt-send: var(--ink);
  display: flex;
  min-height: min(58vh, 480px);
  max-height: min(68vh, 560px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--gpt-bg);
  border: 1px solid var(--gpt-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.gpt-rail {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--surface-2);
  border-right: 1px solid var(--gpt-line);
}
.gpt-rail-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gpt-rail-btn.is-logo {
  background: var(--surface);
  color: var(--gpt-accent-deep);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
  margin-bottom: 4px;
}
.gpt-rail-btn:hover {
  background: var(--surface);
  color: var(--gpt-ink);
  transform: translateY(-1px);
}
.gpt-rail-bottom { margin-top: auto; }

.gpt-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.gpt-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
}
.gpt-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--gpt-ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 650;
  cursor: default;
  padding: 4px 6px;
  border-radius: 8px;
}
.gpt-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
.gpt-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--gpt-line);
  background: var(--surface-2);
  color: var(--gpt-muted);
  border-radius: 999px;
  padding: 4px 8px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.gpt-step b {
  width: 16px; height: 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
}
.gpt-step:disabled { opacity: .4; cursor: not-allowed; }
.gpt-step.is-on {
  color: var(--gpt-accent-deep);
  border-color: rgba(5, 150, 105, 0.35);
  background: color-mix(in srgb, var(--gpt-accent) 18%, var(--surface));
  transform: translateY(-1px);
}
.gpt-step.is-on b { background: var(--gpt-accent-deep); color: #fff; }
.gpt-step.is-done:not(.is-on) {
  color: var(--gpt-ink);
  border-color: rgba(5, 150, 105, 0.22);
}

.gpt-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 14px 8px;
  scrollbar-width: thin;
}
.gpt-hero {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 8px 12px;
  animation: gptFadeUp .45s ease both;
}
.gpt-hero-title {
  margin: 0;
  text-align: center;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.gpt-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 12px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.gpt-msg { display: flex; }
.gpt-msg.user { justify-content: flex-end; }
.gpt-msg.ai { justify-content: flex-start; }
.gpt-bubble {
  max-width: min(92%, 560px);
  padding: 10px 12px;
  border-radius: 16px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gpt-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.gpt-msg.user .gpt-bubble {
  background: var(--surface-2);
  border: none;
  border-bottom-right-radius: 6px;
  box-shadow: none;
}
.gpt-msg.ai .gpt-bubble {
  background: var(--surface);
  border: 1px solid var(--gpt-line);
  border-bottom-left-radius: 6px;
}
.gpt-pop { animation: gptFadeUp .35s ease both; }
@keyframes gptFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gpt-caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--gpt-accent-deep);
  animation: gptBlink 1s steps(1) infinite;
}
@keyframes gptBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.gpt-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-height: 18px;
}
.gpt-dots i {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--gpt-accent-deep);
  opacity: .35;
  animation: gptDot 1s ease-in-out infinite;
}
.gpt-dots i:nth-child(2) { animation-delay: .15s; }
.gpt-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes gptDot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.gpt-note {
  flex: 0 0 auto;
  padding: 0 12px 8px;
}
.gpt-note[hidden] { display: none !important; }
.gpt-note-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(236, 253, 245, 0.92);
  border: 1px solid rgba(5, 150, 105, 0.2);
  animation: gptFadeUp .35s ease both;
}
.gpt-note-inner strong {
  display: block;
  font-family: 'Noto Serif Bengali', serif;
  font-size: 12.5px;
  color: var(--gpt-accent-deep);
  margin-bottom: 4px;
}
.gpt-note-inner p {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #065f46;
}
.gpt-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--gpt-accent-deep);
  color: #fff;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.25);
  transition: transform .15s ease, background .15s ease;
}
.gpt-next:hover { background: #047857; transform: translateY(-1px); }
.gpt-done-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12px;
  font-weight: 650;
  color: var(--gpt-accent-deep);
}

.gpt-composer-wrap {
  flex: 0 0 auto;
  padding: 0 12px 12px;
}
.gpt-composer {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  border-radius: 22px;
  box-shadow: none;
  padding: 10px 12px 8px;
  transition: border-color .2s ease;
}
.gpt-composer:focus-within {
  border-color: #9CA3AF;
  box-shadow: none;
}
.gpt-input {
  min-height: 44px;
  max-height: 110px;
  overflow-y: auto;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gpt-ink);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 2px 4px 8px;
}
.gpt-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gpt-composer-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gpt-tool {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--read-muted);
}
.gpt-send {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--read-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.gpt-send.is-ready {
  background: var(--gpt-send);
  color: var(--paper);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.22);
}
.gpt-send.is-ready:hover {
  background: #000;
  transform: scale(1.05);
}
.gpt-send:disabled { opacity: .85; }
.gpt-send-ripple {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(52,211,153,.55) 0%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.gpt-send.is-rippling .gpt-send-ripple {
  animation: gptRipple .45s ease-out;
}
@keyframes gptRipple {
  from { transform: scale(.2); opacity: .9; }
  to { transform: scale(1.6); opacity: 0; }
}
.gpt-hint {
  max-width: 720px;
  margin: 6px auto 0;
  text-align: center;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11px;
  color: var(--gpt-muted);
}
.gpt-hint[hidden] { display: none !important; }

@media (max-width: 640px) {
  .gpt-shell {
    min-height: 420px;
    max-height: none;
  }
  .gpt-rail { width: 44px; padding: 10px 6px; }
  .gpt-rail-btn { width: 32px; height: 32px; }
  .gpt-step span { display: none; }
  .gpt-hero { min-height: 88px; padding-top: 16px; }
  .gpt-composer { border-radius: 18px; }
}

/* ===== Unit4 Visual Upgrade ? shared figure UI ===== */
.chat-mock {
  display: flex;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-mid);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 340px;
  max-height: 520px;
}
.chat-mock-rail {
  width: 48px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}
.chat-mock-rail-btn {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--slate); background: transparent; border: none;
}
.chat-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.chat-mock-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.chat-mock-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-mock-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: color-mix(in srgb, var(--teal) 12%, var(--surface));
  color: var(--teal); display: grid; place-items: center;
}
.chat-mock-title { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink); }
.chat-mock-sub { font-size: 12px; color: var(--read-muted); }
.chat-mock-tags { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chat-tag {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px;
}
.chat-tag-prompt { background: color-mix(in srgb, var(--prompt) 14%, var(--surface)); color: var(--prompt); }
.chat-tag-output { background: color-mix(in srgb, var(--output) 14%, var(--surface)); color: var(--output); }
.chat-tag-arrow { color: var(--read-muted); font-size: 12px; }
.chat-mock-log {
  flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #fafaf9 0%, var(--surface) 40%);
}
.chat-mock-hero { flex: 1; display: grid; place-items: center; min-height: 120px; }
.chat-mock-greet { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); text-align: center; }
.chat-mock-composer { padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-mock-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-mid); border-radius: 999px;
  padding: 8px 10px 8px 12px; background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(26,35,50,.04);
}
.chat-mock-draft {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14px; color: var(--ink);
  min-height: 1.4em; line-height: 1.45;
}
.chat-mock-plus, .chat-mock-mic { color: var(--slate); flex-shrink: 0; display: grid; place-items: center; }
.chat-mock-send {
  width: 34px; height: 34px; border-radius: 999px; border: none;
  background: var(--ink); color: var(--paper); display: grid; place-items: center; flex-shrink: 0;
  transition: transform .15s ease, background .15s ease;
}
.chat-mock-send:hover { transform: scale(1.04); }
.chat-mock-send.is-sent, .chat-mock-send:disabled { opacity: .45; pointer-events: none; }
.chat-msg { display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.ai { align-self: flex-start; }
.chat-msg-meta { display: flex; align-items: center; gap: 8px; }
.chat-msg-who { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--read-muted); }
.chat-msg-bubble {
  border-radius: 16px; padding: 12px 14px; font-size: 14px; line-height: 1.65;
  font-family: var(--font-body); color: var(--ink);
}
.chat-msg-prompt {
  background: color-mix(in srgb, var(--prompt) 8%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--prompt) 35%, transparent);
}
.chat-msg-output {
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--output) 35%, transparent);
  box-shadow: var(--shadow-soft);
}
.chat-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--slate);
  animation: chatDot 1s ease infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.phone-pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .phone-pair { grid-template-columns: 1fr 1fr; } }
.phone-chat {
  border-radius: 28px; border: 2px solid rgba(26,35,50,.12);
  background: #111827; padding: 10px 10px 12px;
  box-shadow: var(--shadow-card); position: relative;
}
.phone-chat--weak { outline: 2px solid color-mix(in srgb, var(--coral) 45%, transparent); outline-offset: 2px; }
.phone-chat--strong { outline: 2px solid color-mix(in srgb, var(--output) 45%, transparent); outline-offset: 2px; }
.phone-chat-notch {
  width: 72px; height: 8px; border-radius: 999px; background: #1f2937; margin: 4px auto 8px;
}
.phone-chat-label {
  text-align: center; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--line); margin-bottom: 8px;
}
.phone-chat-log {
  background: var(--surface-2); border-radius: 18px; min-height: 220px; max-height: 300px;
  overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.phone-bubble {
  border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.55;
  font-family: var(--font-body);
}
.phone-bubble.user { align-self: flex-end; background: var(--surface-2); color: var(--ink); max-width: 92%; }
.phone-bubble.ai { align-self: stretch; background: var(--surface); border: 1px solid rgba(26,35,50,.08); }
.phone-ai-title { font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.phone-ai-body { color: var(--read-ink); font-size: 12.5px; }
.phone-chat-bar {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  background: #1f2937; border-radius: 999px; padding: 8px 10px; color: #9ca3af;
}
.phone-chat-draft { flex: 1; font-size: 11px; color: var(--line-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-chat-send {
  width: 26px; height: 26px; border-radius: 999px; background: var(--surface); color: #111;
  display: grid; place-items: center;
}

.step-flow {
  background: var(--surface); border: 1px solid var(--line-mid); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow-soft);
}
.step-flow-track {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 6px 4px;
}
.step-flow-node {
  width: 110px; text-align: center; opacity: .4; transition: opacity .25s ease, transform .25s ease;
}
.step-flow-node.is-on { opacity: 1; }
.step-flow-node.is-active { transform: translateY(-2px); }
.step-flow-orb {
  width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 16px;
  background: color-mix(in srgb, var(--step-c, var(--teal)) 14%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--step-c, var(--teal)) 40%, transparent);
  display: grid; place-items: center; position: relative; color: var(--step-c, var(--teal));
}
.step-flow-num {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--step-c, var(--teal)); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; font-family: var(--font-ui);
}
.step-flow-label { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.step-flow-desc { font-size: 11px; color: var(--read-muted); margin-top: 2px; line-height: 1.35; }
.step-flow-wire {
  width: 28px; height: 2px; background: rgba(26,35,50,.1); align-self: center; margin-top: 24px; position: relative;
}
.step-flow-wire i {
  display: block; height: 100%; width: 0; background: var(--teal); transition: width .35s ease;
}
.step-flow-panel {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line); min-height: 56px;
}
.step-flow-play { margin-top: 12px; width: 100%; }

.loop-ring { display: grid; gap: 14px; }
@media (min-width: 800px) { .loop-ring { grid-template-columns: 280px 1fr; align-items: center; } }
.loop-ring-stage {
  position: relative; width: 280px; height: 280px; margin: 0 auto;
}
.loop-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-ring-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--indigo) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--indigo) 28%, transparent);
  color: var(--indigo); display: grid; place-items: center; z-index: 2;
}
.loop-ring-center.is-spin { animation: loopSpin .7s ease; }
@keyframes loopSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.loop-ring-node {
  position: absolute; transform: translate(-50%,-50%);
  width: 88px; padding: 8px 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-mid); box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; z-index: 3; transition: border-color .2s, transform .2s;
}
.loop-ring-node:hover { border-color: var(--indigo); }
.loop-ring-node.is-active, .loop-ring-node.is-seen {
  border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--surface));
}
.loop-ring-ico { color: var(--indigo); }
.loop-ring-txt { font-size: 10px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--ink); }
.loop-ring-panel {
  padding: 16px; border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--line-mid); min-height: 100px; box-shadow: var(--shadow-soft);
}

.tip-callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px; margin: 12px 0;
  background: var(--tip-bg); border: 1px solid color-mix(in srgb, var(--amber) 14%, transparent);
}
.tip-callout-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface)); color: var(--amber);
  display: grid; place-items: center;
}
.tip-callout-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.tip-callout-text { font-size: 14px; color: var(--read-ink); margin: 0; }

.fig-caption {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; color: var(--read-muted); font-family: var(--font-body);
}
.fig-caption-mark {
  width: 8px; height: 8px; border-radius: 2px; background: var(--teal); flex-shrink: 0;
}

.lesson-opener { margin-bottom: 16px; }
.lesson-kicker {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 8px;
}
.lesson-lead .vb:first-child {
  font-family: var(--font-display); font-size: 1.08rem; line-height: 1.75; color: var(--ink);
}

.mission-card {
  border: 1.5px dashed color-mix(in srgb, var(--moss) 45%, transparent);
  background: color-mix(in srgb, var(--moss) 5%, var(--surface));
  border-radius: var(--radius-md); padding: 16px; margin: 8px 0;
}
.mission-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mission-card-ico {
  width: 30px; height: 30px; border-radius: 9px; background: var(--moss); color: #fff;
  display: grid; place-items: center;
}
.mission-card-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }

.info-panel {
  border-radius: var(--radius-md); padding: 14px 16px; margin: 8px 0;
  border: 1px solid var(--line-mid);
  background: transparent;
}
.info-panel--context {
  border-color: color-mix(in srgb, var(--prompt) 22%, transparent);
}
.info-panel--cost {
  border-color: color-mix(in srgb, var(--amber) 25%, transparent);
}

.compare-rows { display: grid; gap: 8px; margin-top: 12px; }
.compare-row {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
}
@media (min-width: 640px) {
  .compare-row { grid-template-columns: 140px 1fr 1fr; align-items: start; }
}
.compare-row-k { font-weight: 700; font-size: 13px; color: var(--indigo); }
.compare-weak { font-size: 13px; color: var(--coral); }
.compare-strong { font-size: 13px; color: var(--output); }

.quiz-card {
  background: var(--surface); border: 1px solid var(--line-mid); border-radius: var(--radius-lg);
  padding: 18px 16px; box-shadow: var(--shadow-soft);
}
.quiz-q {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--ink, var(--ink));
  margin-bottom: 14px;
}
.quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 12px 14px; margin: 0; border-radius: 14px;
  border: 1px solid var(--line-mid); background: var(--surface);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--ink);
  min-height: 48px; transition: border-color .15s, background .15s;
}
.quiz-opt:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 40%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 4%, var(--surface));
}
.quiz-opt.is-pick {
  border-color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
}
.quiz-opt.is-pick .quiz-opt-letter {
  background: var(--brand, #0F6B6B);
  color: #fff;
}
.quiz-opt.is-correct {
  border-color: color-mix(in srgb, #2F8F5B 55%, transparent);
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
  color: var(--ink, var(--ink));
}
.quiz-opt.is-correct .quiz-opt-letter {
  background: #2F8F5B;
  color: #fff;
}
.quiz-opt.is-wrong {
  border-color: color-mix(in srgb, #C45C4A 50%, transparent);
  background: color-mix(in srgb, #C45C4A 9%, var(--surface));
  color: var(--ink, var(--ink));
}
.quiz-opt.is-wrong .quiz-opt-letter {
  background: #C45C4A;
  color: #fff;
}
.quiz-opt-letter {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 10%, var(--surface));
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--brand, #0F6B6B);
  transition: background .15s, color .15s;
}
.quiz-fb {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  min-height: 0;
}
.quiz-fb-msg {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.4;
}
.quiz-fb-msg.is-ok { color: var(--moss, #2F8F5B); }
.quiz-fb-msg.is-wrong { color: var(--coral, #C45C4A); }
.quiz-retry,
.vl-mq-retry,
.et-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(26, 35, 50, 0.12);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-retry:hover,
.vl-mq-retry:hover,
.et-retry:hover {
  border-color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 6%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.et-retry {
  padding: 2px 10px;
  font-size: 0.8rem;
  margin-left: 4px;
  vertical-align: baseline;
}
.ts-retry { margin-top: 4px; }
.vl-mq-status {
  display: grid;
  gap: 8px;
}
.vl-mq-ok { color: #2F8F5B; font-weight: 550; }
.vl-mq-bad { color: #C45C4A; font-weight: 550; }

.read-panel {
  background: transparent;
  border-radius: 0;
  padding: 8px 4px 12px;
}

.read-list > li {
  background: transparent;
  border: none;
}
body { background: var(--paper); }
.app-shell { background: var(--paper); }

.rtcft-span {
  border-radius: 4px; padding: 1px 3px; cursor: pointer;
  transition: box-shadow .15s ease;
}
.rtcft-span.is-on { box-shadow: 0 0 0 2px currentColor; }

@media (prefers-reduced-motion: reduce) {
  .chat-typing i, .loop-ring-center.is-spin, .token-pop, .beat-enter, .pulse-once {
    animation: none !important;
  }
  .step-flow-wire i { transition: none; }
}

/* ===== Impressive Sim UI ? shared stage chrome ===== */
.rw-app,
.sim-stage {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-mid);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.sim-stage--deep {
  background: linear-gradient(165deg, #1e3348 0%, #243B55 48%, #1a2a3c 100%);
  border-color: rgba(255,255,255,.08);
  color: var(--surface-2);
}
.sim-stage--deep .rw-wintitle {
  color: var(--surface-2);
  background: linear-gradient(105deg, #7dd3c0 0%, #93c5fd 55%, #bfdbfe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sim-stage--deep .rw-panel-h,
.sim-stage--deep .font-sansbn { color: var(--surface-2); }
.sim-stage--deep .rw-winbar {
  background: rgba(255,255,255,.04);
  border-bottom-color: rgba(255,255,255,.08);
}
.sim-stage--deep .rw-teach-mark { background: var(--secondary); }
.sim-stage--deep .rw-panel {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.sim-stage--deep .rw-body { color: #d7e0ea; }

.rw-winbar {
  background: color-mix(in srgb, var(--secondary) 5%, var(--surface));
  border-bottom: 1px solid var(--line);
}
.rw-teach-mark { background: var(--secondary); width: 4px; height: 16px; }
.rw-wintitle {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
  background: linear-gradient(105deg, var(--secondary) 0%, var(--navy) 55%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rw-btn-navy,
.rw-btn-brand,
.sim-cta {
  background: var(--secondary) !important;
  color: #fff !important;
  min-height: 44px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(var(--secondary-rgb), 0.28);
}
.rw-btn-navy:hover,
.rw-btn-brand:hover,
.sim-cta:hover { background: color-mix(in srgb, var(--secondary) 86%, #000) !important; }

/* Amber token chips */
.rw-tok, .rw-tok-id, .sim-tok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--amber) 35%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .25s ease;
}
.rw-tok-id {
  flex-direction: column;
  opacity: .4;
  min-width: 64px;
}
.rw-tok-id em {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
}
.rw-tok-id.is-lit,
.sim-tok.is-lit {
  opacity: 1;
  background: color-mix(in srgb, var(--amber) 18%, var(--surface));
  border-color: var(--amber);
}
.rw-tok-id.is-current,
.sim-tok.is-current {
  opacity: 1;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 35%, transparent),
              0 8px 20px rgba(196, 138, 42, 0.25);
  background: var(--amber);
  color: #fff;
}
.rw-tok-id.is-current em { color: rgba(255,255,255,.85); }
.rw-tok.is-pick,
.sim-tok.is-pick {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
  animation: tokPop .35s ease;
}
@keyframes tokPop {
  from { transform: scale(.86); opacity: .4; }
  to { transform: scale(1); opacity: 1; }
}

/* Probability bars */
.sim-prob {
  display: grid;
  gap: 8px;
  width: 100%;
}
.sim-prob-row {
  display: grid;
  grid-template-columns: minmax(52px, auto) 1fr auto;
  gap: 8px;
  align-items: center;
}
.sim-prob-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sim-stage--deep .sim-prob-label { color: var(--surface-2); }
.sim-prob-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(26,35,50,.08);
  overflow: hidden;
}
.sim-stage--deep .sim-prob-track { background: rgba(255,255,255,.12); }
.sim-prob-track > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), #e0a93a);
  transition: width .45s ease;
}
.sim-prob-row.is-win .sim-prob-track > i {
  background: linear-gradient(90deg, var(--teal), #1a9a9a);
}
.sim-prob-row.is-win .sim-prob-label {
  color: var(--teal);
  font-weight: 700;
}
.sim-stage--deep .sim-prob-row.is-win .sim-prob-label { color: #7ddeb8; }
.sim-prob-pct {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--read-muted);
  min-width: 36px;
  text-align: right;
}

/* Theatre layout */
.theatre-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 720px) {
  .theatre-grid { grid-template-columns: 1.1fr 1fr; }
}
.theatre-grow {
  min-height: 88px;
  padding: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sim-stage--deep .theatre-grow {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.theatre-stepcap {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}
.sim-stage--deep .theatre-stepcap {
  background: rgba(0,0,0,.2);
  border-color: rgba(255,255,255,.08);
  color: #d7e0ea;
}
.theatre-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.theatre-progress span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(26,35,50,.1);
}
.theatre-progress span.is-on {
  background: var(--amber);
}
.sim-stage--deep .theatre-progress span { background: rgba(255,255,255,.12); }
.sim-stage--deep .theatre-progress span.is-on { background: var(--amber); }

/* Atlas / card grids */
.sim-atlas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .sim-atlas { grid-template-columns: repeat(3, 1fr); }
}
.sim-atlas-card {
  text-align: left;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--line-mid);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  min-height: 96px;
}
.sim-atlas-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.sim-atlas-card.is-on {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 6%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent);
}
.sim-atlas-ico {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 8px;
  color: #fff;
}
.sim-atlas-title { font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.35; }
.sim-atlas-meta { font-size: 11px; color: var(--read-muted); margin-top: 4px; line-height: 1.35; }

/* Sort bins */
.sim-bin {
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--indigo) 35%, transparent);
  background: color-mix(in srgb, var(--indigo) 4%, var(--surface));
  padding: 12px;
  min-height: 110px;
  transition: border-color .2s, background .2s, transform .15s;
}
.sim-bin.is-hot {
  border-style: solid;
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--surface));
  transform: scale(1.02);
}
.sim-bin.is-ok {
  border-color: var(--moss);
  background: color-mix(in srgb, var(--moss) 8%, var(--surface));
}
.sim-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--moss);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  animation: tokPop .3s ease;
}

/* Flip / limit cards */
.sim-flip {
  perspective: 900px;
  min-height: 120px;
}
.sim-flip-inner {
  position: relative;
  width: 100%;
  min-height: 120px;
  transition: transform .45s ease;
  transform-style: preserve-3d;
}
.sim-flip.is-flipped .sim-flip-inner { transform: rotateY(180deg); }
.sim-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sim-flip-back {
  transform: rotateY(180deg);
  background: color-mix(in srgb, var(--coral) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--coral) 28%, transparent);
}

/* Duel curtain */
.duel-arena {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative;
}
@media (min-width: 720px) {
  .duel-arena { grid-template-columns: 1fr 1fr; }
}
.duel-side {
  border-radius: 16px;
  padding: 0;
  border: 1.5px solid var(--line-mid);
  background: var(--surface);
  min-height: 180px;
  overflow: hidden;
  position: relative;
}
.duel-side--weak { border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.duel-side--strong { border-color: color-mix(in srgb, var(--output) 40%, transparent); }
.duel-curtain {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26,35,50,.04), rgba(26,35,50,.12));
  display: grid;
  place-items: center;
  border-radius: 16px;
  z-index: 2;
  transition: opacity .35s ease, visibility .35s;
}
.duel-curtain.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Visit progress */
.sim-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 10%, var(--surface));
  color: var(--teal);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .rw-tok-id.is-current,
  .sim-tok.is-current,
  .rw-tok.is-pick,
  .sim-stamp,
  .sim-flip-inner,
  .duel-curtain {
    animation: none !important;
    transition: none !important;
  }
}
/* ===== Wave polish: atlas, orbit, door, duel, rtcft, industry ===== */
.sim-atlas-card .sim-atlas-ico { background: var(--c, var(--teal)); }
.rw-dock-item, .sim-atlas-card.is-visited::after {
  content: "";
}
.sim-atlas-card.is-visited {
  border-color: var(--moss);
}
.sim-atlas-card.is-visited .sim-atlas-meta { color: var(--moss); font-weight: 700; }

.orbit-ring.is-on { stroke: var(--secondary) !important; stroke-width: 2.5 !important; filter: drop-shadow(0 0 6px rgba(var(--secondary-rgb), 0.35)); }
.orbit-core.is-on ellipse { stroke: var(--amber) !important; fill: color-mix(in srgb, var(--amber) 12%, var(--surface)) !important; }

.dg-door-stage {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-mid);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 18px 14px;
  position: relative;
  overflow: hidden;
}
.dg-door-stage::before {
  content: none;
}
.dg-door-node {
  border-radius: 14px;
  border: 1.5px solid var(--line-mid);
  background: color-mix(in srgb, var(--teal) 3%, var(--surface));
  padding: 12px 10px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.dg-door-node.is-on {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15,107,107,.15);
}
.dg-door-arrow { color: var(--read-muted); transition: color .3s, transform .3s; }
.dg-door-arrow.is-on { color: var(--teal); transform: scale(1.15); }
.dg-door-panel {
  width: 36px; height: 48px; border-radius: 4px 8px 8px 4px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  position: relative;
  transition: transform .5s ease;
  transform-origin: left center;
}
.dg-door-node.is-on .dg-door-panel { transform: perspective(200px) rotateY(-42deg); }
.dg-door-knob {
  position: absolute; right: 6px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--amber); transform: translateY(-50%);
}

.dg-bridge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.dg-bridge-side {
  border-radius: 16px;
  border: 1.5px solid var(--line-mid);
  background: var(--surface);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.dg-bridge-side.engine { --c: var(--navy); }
.dg-bridge-side.tools { --c: var(--teal); }
.dg-bridge-side.is-on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 6%, var(--surface));
  transform: translateY(-2px);
}
.dg-bridge-ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--teal)) 12%, var(--surface));
  color: var(--c, var(--teal));
}
.dg-bridge-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 64px;
}
.dg-bridge-link i {
  display: block; width: 48px; height: 3px; border-radius: 999px;
  background: rgba(26,35,50,.12);
  position: relative;
  overflow: hidden;
}
.dg-bridge-link.is-on i {
  background: linear-gradient(90deg, var(--navy), var(--amber), var(--teal));
}
.dg-bridge-link.is-on i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: bridgePulse 1.2s ease infinite;
}
@keyframes bridgePulse {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.dg-industry {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-mid);
  background: linear-gradient(160deg, color-mix(in srgb, var(--moss) 5%, var(--surface)), var(--surface));
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.dg-industry-core {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--moss); color: #fff; font-weight: 700; font-size: 13px;
  margin-bottom: 12px;
}
.dg-industry-nodes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.dg-industry-node {
  padding: 8px 12px; border-radius: 999px;
  border: 1.5px solid var(--line-mid);
  background: var(--surface); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: .2s;
}
.dg-industry-node.is-on {
  background: color-mix(in srgb, var(--moss) 12%, var(--surface));
  border-color: var(--moss); color: var(--moss);
}

.dg-tips-board {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .dg-tips-board { grid-template-columns: repeat(3, 1fr); }
}
.dg-tip-note {
  position: relative;
  text-align: left;
  padding: 14px 12px 12px;
  border-radius: 4px 12px 12px 12px;
  background: color-mix(in srgb, var(--tip, #F5EBD8) 80%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 25%, transparent);
  box-shadow: var(--shadow-soft);
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease, min-height .4s ease;
  min-height: 88px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dg-tip-note:hover:not(.is-on) { transform: rotate(0deg) translateY(-2px); z-index: 1; }
.dg-tip-hint {
  font-size: 12px;
  color: rgba(46,139,87,.75);
  transition: opacity .25s ease, max-height .3s ease, margin .3s ease;
  max-height: 24px;
}
.dg-tip-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition:
    max-height .48s cubic-bezier(.4, 0, .2, 1),
    opacity .36s cubic-bezier(.4, 0, .2, 1) .04s,
    transform .42s cubic-bezier(.4, 0, .2, 1);
}
.dg-tip-note.is-on {
  transform: rotate(0deg) translateY(-2px);
  border-color: rgba(46, 139, 87, 0.35);
  box-shadow: 0 4px 14px var(--line);
  min-height: 120px;
}
.dg-tip-note.is-on .dg-tip-hint {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
}
.dg-tip-note.is-on .dg-tip-body {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}
.dg-tip-pin {
  position: absolute; top: 6px; right: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.dg-squad {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-mid);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.dg-squad-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 639px) {
  .dg-squad-slots { grid-template-columns: repeat(3, 1fr); }
}
.dg-squad-slot {
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--c, var(--teal)) 40%, transparent);
  background: color-mix(in srgb, var(--c, var(--teal)) 5%, var(--surface));
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: .2s;
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.dg-squad-slot b { font-size: 18px; color: var(--c); }
.dg-squad-slot span { font-size: 11px; font-weight: 700; }
.dg-squad-slot small { font-size: 10px; color: var(--read-muted); }
.dg-squad-slot.is-on {
  border-style: solid;
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent);
}
.dg-squad-slot.is-dropped { opacity: .4; text-decoration: line-through; }

.dg-lens-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-lens-tab {
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--line-mid); background: var(--surface);
  font-weight: 600; font-size: 13px; cursor: pointer; transition: .2s;
}
.dg-lens-tab.is-on {
  background: var(--slate); color: #fff; border-color: var(--slate);
}
.dg-lens-stage, .dg-lens-card, .dg-panel {
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.dg-output-tile .dg-output-ico { color: var(--c); }

.rw-rtcft-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-width: 56px; min-height: 64px; padding: 10px 8px;
  border-radius: 14px; border: 1.5px solid; background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s, background .2s;
  cursor: pointer;
}
.rw-rtcft-key:hover { transform: translateY(-2px); }
.rw-rtcft-key.is-on {
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(15,107,107,.25);
  transform: translateY(-3px) scale(1.04);
}
.rw-rtcft-key.is-on b, .rw-rtcft-key.is-on small { color: #fff !important; }

.twin-panels.sim-stage, .twin-panels.rw-app { overflow: hidden; }
/* Twin dual-accent system lives earlier ? keep late overrides from flattening colors */

.duel-curtain.curtain {
  background: linear-gradient(135deg, var(--teal), var(--navy)) !important;
  color: #fff;
  border-radius: inherit;
}
.dg-spot {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-mid);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.dg-spot-hero {
  display: flex; gap: 14px; align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c, var(--teal)) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c, var(--teal)) 22%, transparent);
}
.dg-spot-letter {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800;
  color: var(--c, var(--teal));
  min-width: 48px; text-align: center;
}

/* ---------- Limitation cards: clean expand ---------- */
.rw-warn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .rw-warn-grid { grid-template-columns: repeat(2, 1fr); }
}
.rw-warn-card {
  --warn-c: #C45C4A;
  --warn-soft: #FDF6F4;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(21, 42, 50, 0.04);
  cursor: pointer;
  overflow: hidden;
  min-height: 140px;
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s ease,
    background .35s ease;
}
.rw-warn-card:hover:not(.is-open) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ink) 14.000000000000002%, transparent);
  box-shadow: 0 6px 16px rgba(21, 42, 50, 0.07);
}
.rw-warn-sheen { display: none; }
.rw-warn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.rw-warn-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 11px;
  font-weight: 650;
  color: var(--warn-c);
  background: color-mix(in srgb, var(--warn-c) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn-c) 14%, transparent);
}
.rw-warn-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--warn-c);
  background: color-mix(in srgb, var(--warn-c) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn-c) 12%, transparent);
  transition: background .35s ease;
}
.rw-warn-title {
  margin: 2px 0 0;
  font-family: 'Noto Serif Bengali', serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1A2A32;
}
.rw-warn-line {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(26, 42, 50, 0.7);
}
.rw-warn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--warn-c);
  max-height: 24px;
  transition: opacity .3s ease, max-height .3s ease, margin .3s ease;
}
.rw-warn-cta i { font-style: normal; }
.rw-warn-reveal {
  position: relative;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height .58s cubic-bezier(.4, 0, .2, 1);
}
.rw-warn-reveal-inner {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .42s cubic-bezier(.4, 0, .2, 1) .2s,
    transform .48s cubic-bezier(.4, 0, .2, 1) .2s;
}
.rw-warn-scene {
  margin-top: 4px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.rw-warn-scene-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-ui), sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.rw-warn-scene p {
  margin: 0;
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(26, 42, 50, 0.78);
}
.rw-warn-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn-c) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn-c) 12%, transparent);
  font-family: 'Noto Sans Bengali', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(26, 42, 50, 0.78);
  font-weight: 550;
}
.rw-warn-tip-ico {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warn-c);
}
.rw-warn-done {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warn-c);
  color: #fff;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .3s ease .22s, transform .35s cubic-bezier(.4, 0, .2, 1) .22s;
  z-index: 2;
  pointer-events: none;
}

.rw-warn-card.is-open {
  border-color: color-mix(in srgb, var(--warn-c) 28%, var(--line-mid));
  background: linear-gradient(180deg, var(--surface) 0%, var(--warn-soft) 100%);
  box-shadow: 0 4px 14px var(--line);
  transform: translateY(-1px);
}
.rw-warn-card.is-open .rw-warn-ico {
  background: color-mix(in srgb, var(--warn-c) 12%, var(--surface));
}
.rw-warn-card.is-open .rw-warn-cta {
  opacity: 0;
  max-height: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.rw-warn-card.is-open .rw-warn-reveal {
  max-height: 280px;
}
.rw-warn-card.is-open .rw-warn-reveal-inner {
  opacity: 1;
  transform: translateY(0);
}
.rw-warn-card.is-open .rw-warn-done {
  opacity: 1;
  transform: scale(1);
}
.rw-warn-card.is-open .rw-warn-head .rw-warn-ico { margin-right: 20px; }
.rw-warn-card.is-open .card-shutter i {
  transform: scaleY(0);
  opacity: 0;
}

/* Shared shutter / iris / wipe open effects */
.card-shutter {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
  border-radius: 10px;
}
.card-shutter i {
  flex: 1 1 0;
  display: block;
  min-height: 0;
  margin: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 10%, var(--surface-2)) 0%,
    color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 6%, #EEF1F4) 100%
  );
  border-bottom: 1px solid var(--line);
  transform: scaleY(1);
  transform-origin: center top;
  opacity: 1;
  transition:
    transform .48s cubic-bezier(.4, 0, .2, 1),
    opacity .36s ease;
}
.card-shutter i:last-child { border-bottom: none; }
.card-shutter i:nth-child(1) { transition-delay: 0s, 0s; }
.card-shutter i:nth-child(2) { transition-delay: .05s, .05s; }
.card-shutter i:nth-child(3) { transition-delay: .1s, .1s; }
.card-shutter i:nth-child(4) { transition-delay: .15s, .15s; }
.card-shutter i:nth-child(5) { transition-delay: .2s, .2s; }

/* Iris: circular aperture open */
.anim-iris .card-shutter {
  flex-direction: row;
  background: color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 8%, #F1F3F5);
}
.anim-iris .card-shutter i {
  border-bottom: none;
  border-right: 1px solid var(--line);
  transform: scaleX(1);
  transform-origin: center;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 10%, var(--surface-2)),
    color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 5%, #EEF1F4)
  );
}
.anim-iris .card-shutter i:last-child { border-right: none; }
.anim-iris.is-open .card-shutter,
.anim-iris.is-on .card-shutter {
  background: transparent;
}
.anim-iris.is-open .card-shutter i,
.anim-iris.is-on .card-shutter i {
  transform: scaleX(0);
  opacity: 0;
}
.anim-iris.is-open .rw-warn-reveal-inner,
.anim-iris.is-on .dg-remember-body-text {
  clip-path: circle(0% at 50% 50%);
  animation: cardIrisReveal .55s cubic-bezier(.4, 0, .2, 1) .12s forwards;
}
@keyframes cardIrisReveal {
  from { clip-path: circle(0% at 50% 50%); opacity: 0; }
  to { clip-path: circle(140% at 50% 50%); opacity: 1; }
}

/* Wipe: soft curtain from top */
.anim-wipe .card-shutter {
  background: transparent;
}
.anim-wipe .card-shutter i {
  display: none;
}
.anim-wipe .card-shutter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 12%, #F5F6F8) 0%,
    color-mix(in srgb, var(--warn-c, var(--c, #6B7F9E)) 4%, #EEF1F4) 100%
  );
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.anim-wipe.is-open .card-shutter::before,
.anim-wipe.is-on .card-shutter::before {
  transform: translateY(-105%);
}
.anim-wipe.is-open .rw-warn-reveal-inner,
.anim-wipe.is-on .dg-remember-body-text {
  transition-delay: .12s, .12s;
}

@media (prefers-reduced-motion: reduce) {
  .card-shutter,
  .card-shutter i,
  .card-shutter::before,
  .rw-warn-reveal,
  .rw-warn-reveal-inner,
  .dg-remember-body,
  .dg-remember-body-text {
    transition: none !important;
    animation: none !important;
  }
  .rw-warn-card.is-open .card-shutter,
  .dg-remember-card.is-on .card-shutter {
    display: none;
  }
  .rw-warn-card.is-open .rw-warn-reveal-inner,
  .dg-remember-card.is-on .dg-remember-body-text {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

.dg-cost-track {
  height: 12px; border-radius: 999px;
  background: rgba(26,35,50,.08); overflow: hidden;
}
.dg-cost-track > i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--navy), var(--teal));
  transition: width .4s ease;
}
.dg-cost-track.amber > i {
  background: linear-gradient(90deg, var(--amber), #e0a93a);
}
.dg-cost-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--line);
}

.dg-chip {
  display: inline-block; padding: 2px 8px; margin: 2px; border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font-size: 12px; font-weight: 600;
}
.dg-chip.soft {
  background: var(--chip-bg, color-mix(in srgb, var(--teal) 8%, var(--surface)));
  border-color: var(--chip-bd, color-mix(in srgb, var(--teal) 22%, transparent));
  color: var(--chip-fg, inherit);
}
.dg-chip-ico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  margin: 0;
}

.cinema-stage .cinema-hi,
.cinema-titlecard .cinema-accent {
  color: var(--teal);
}
.cinema-tick-ring { stroke: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .dg-door-panel, .dg-bridge-link i::after, .dg-door-node, .dg-squad-slot {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Unit 4 remap ? chrome, sidebar collapse, video-focus, studio
   ============================================================ */

/* Header progress + actions */
.app-header .header-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 72px;
  max-width: 100px;
}
.header-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.header-progress-pct {
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.header-progress-pct.is-active { color: #0F6B6B; }
.header-progress-pct.is-complete { color: #16A34A; }
.header-progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.header-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  transition: width 0.35s ease;
}
.header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.header-actions .header-progress {
  margin-inline-start: 4px;
}

/* Unit points counter (header right) */
.points-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 7px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--ink, var(--ink));
  flex-shrink: 0;
  max-width: 120px;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
button.points-counter {
  appearance: none;
  -webkit-appearance: none;
}
.points-counter:hover {
  background: var(--surface);
  border-color: rgba(15, 107, 107, 0.22);
}
.points-counter:focus-visible {
  outline: 2px solid rgba(15, 107, 107, 0.45);
  outline-offset: 2px;
}
.points-counter-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.points-counter-ico img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.points-counter-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}
.points-counter-label {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.points-counter-val {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0F6B6B;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.points-counter-burst {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 30% 50%, rgba(212, 168, 67, 0.35), transparent 68%);
}
.points-counter {
  position: relative;
  overflow: visible;
}
.points-counter.is-earning {
  border-color: rgba(196, 138, 42, 0.55);
  background: var(--surface);
  box-shadow:
    0 0 0 3px rgba(212, 168, 67, 0.18),
    0 6px 18px rgba(140, 100, 20, 0.12);
  animation: pts-wallet-pulse 0.55s ease;
}
.points-counter.is-earning .points-counter-val {
  color: #8B6914;
}
.points-counter.is-earning .points-counter-burst {
  opacity: 1;
  animation: pts-wallet-burst 0.7s ease-out;
}
.points-counter.is-catch .points-counter-ico {
  animation: pts-ico-pop 0.32s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.points-counter.is-catch .points-counter-ico img {
  filter: drop-shadow(0 0 6px rgba(212, 168, 67, 0.55));
}

/* Award FX — content-area center toast → shrink into wallet */
.pts-fx-layer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
  contain: none !important;
}
.pts-fx-toast {
  position: fixed !important;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  will-change: transform, opacity;
  z-index: 1;
}
.pts-fx-toast.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.pts-fx-toast.is-fly {
  animation: pts-toast-to-wallet 0.65s cubic-bezier(0.4, 0.05, 0.55, 1) forwards;
}
.pts-fx-toast.is-out {
  animation: pts-toast-fade 0.28s ease forwards;
}
.pts-fx-flip {
  display: block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
}
.pts-fx-flip.is-show,
.pts-fx-toast.is-in .pts-fx-flip--star,
.pts-fx-toast.is-in .pts-fx-flip--val {
  opacity: 1;
}
.pts-fx-toast.is-in .pts-fx-flip--star {
  animation: pts-flip-in 0.5s cubic-bezier(0.22, 1.15, 0.36, 1) 0.02s both;
}
.pts-fx-toast.is-in .pts-fx-flip--val {
  animation: pts-flip-in 0.5s cubic-bezier(0.22, 1.15, 0.36, 1) 0.12s both;
}
.pts-fx-toast.is-in .pts-fx-toast-label {
  animation: pts-label-in 0.35s ease 0.24s both;
}
.pts-fx-toast.is-fly .pts-fx-flip--star,
.pts-fx-toast.is-fly .pts-fx-flip--val,
.pts-fx-toast.is-fly .pts-fx-toast-label {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.pts-fx-toast-ico {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(140, 90, 10, 0.32));
}
.pts-fx-toast-val {
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: #8B6914;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(255, 248, 230, 0.9);
}
.pts-fx-toast-label {
  font-size: 0.72rem;
  font-weight: 650;
  color: rgba(92, 66, 16, 0.78);
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.15s ease;
}

@keyframes pts-flip-in {
  0% {
    opacity: 0;
    transform: rotateX(-85deg) translateY(14px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: rotateX(8deg) translateY(-2px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0) scale(1);
  }
}
@keyframes pts-label-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pts-toast-to-wallet {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
    transform: translate(calc(-50% + var(--pts-dx, 0px)), calc(-50% + var(--pts-dy, -200px))) scale(0.16);
  }
}
@keyframes pts-toast-fade {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}

@keyframes pts-wallet-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes pts-wallet-burst {
  0% { opacity: 0.9; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes pts-ico-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .points-counter.is-earning,
  .pts-fx-toast,
  .pts-fx-toast.is-in .pts-fx-flip--star,
  .pts-fx-toast.is-in .pts-fx-flip--val,
  .pts-fx-toast.is-in .pts-fx-toast-label,
  .pts-fx-toast.is-fly {
    animation: none !important;
    opacity: 1 !important;
  }
  .pts-fx-toast {
    transform: translate(-50%, -50%) !important;
  }
}
@media (max-width: 640px) {
  .points-counter-label { display: none; }
  .points-counter {
    padding: 0 8px 0 6px;
    max-width: none;
    width: max-content;
    gap: 5px;
  }
  .points-counter-ico { width: 20px; height: 20px; }
  .points-counter-ico img { width: 16px; height: 16px; }
  .pts-fx-toast-ico { width: 36px; height: 36px; }
  .pts-fx-toast-val { font-size: 1.45rem; }
}

/* Points rules popup (wallet click) — warm paper, human layout */
body.pts-rules-open { overflow: hidden; }
.pts-rules-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
}
.pts-rules-modal[hidden] { display: none !important; }
.pts-rules-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(15, 107, 107, 0.18), transparent 70%),
    rgba(22, 32, 44, 0.55);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.pts-rules-modal.is-open .pts-rules-backdrop { opacity: 1; }
.pts-rules-dialog {
  --pts-ink: var(--ink);
  --pts-teal: #0F6B6B;
  --pts-amber: #A67C2A;
  position: relative;
  z-index: 1;
  width: min(400px, 94vw);
  max-height: min(88vh, 620px);
  overflow: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(165deg, rgba(255, 252, 246, 0.97) 0%, rgba(244, 248, 247, 0.98) 48%, #eef5f3 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 18px 40px rgba(18, 40, 48, 0.22);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.pts-rules-modal.is-open .pts-rules-dialog {
  transform: none;
  opacity: 1;
}
.pts-rules-glow {
  position: absolute;
  top: -40px;
  left: 18%;
  right: 18%;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(212, 168, 67, 0.28), transparent 70%);
  pointer-events: none;
}
.pts-rules-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.pts-rules-x:hover {
  background: var(--surface);
  color: var(--pts-ink);
}
.pts-rules-hero {
  position: relative;
  padding: 28px 28px 20px;
  padding-right: 52px;
}
.pts-rules-title {
  margin: 0 0 14px;
  font-family: "Noto Serif Bengali", "Noto Sans Bengali", serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.pts-rules-score {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.pts-rules-score-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--surface) 0%, rgba(255, 244, 214, 0.9) 100%);
  box-shadow:
    0 0 0 1px rgba(196, 138, 42, 0.16),
    0 6px 14px rgba(166, 124, 42, 0.12);
}
.pts-rules-score-ico img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(166, 100, 20, 0.2));
}
.pts-rules-total-val {
  margin: 0;
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--pts-teal);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pts-rules-total-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.pts-rules-total-cap {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  max-width: 18rem;
}
.pts-rules-body {
  padding: 4px 22px 24px;
}
.pts-rules-lead {
  margin: 0 0 14px;
  padding: 0 6px;
  font-family: "Noto Serif Bengali", serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pts-ink);
  line-height: 1.4;
}
.pts-rules-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  overflow: hidden;
}
.pts-rules-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.pts-rules-list li:last-child { border-bottom: none; }
.pts-rules-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
}
.pts-rules-list li.is-ten .pts-rules-mark {
  color: var(--pts-teal);
  background: rgba(15, 107, 107, 0.1);
}
.pts-rules-list li.is-five .pts-rules-mark {
  color: var(--pts-amber);
  background: rgba(166, 124, 42, 0.12);
}
.pts-rules-list li.is-zero .pts-rules-mark {
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  background: var(--line);
}
.pts-rules-copy {
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--pts-ink);
  line-height: 1.45;
}
.pts-rules-note {
  margin: 0;
  padding: 0 8px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-left: 2px solid rgba(15, 107, 107, 0.28);
  padding-left: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .pts-rules-backdrop,
  .pts-rules-dialog {
    transition: none !important;
  }
  .pts-rules-modal.is-open .pts-rules-dialog {
    transform: none;
  }
}
@media (max-width: 420px) {
  .pts-rules-hero { padding: 24px 20px 16px; padding-right: 48px; }
  .pts-rules-body { padding: 0 16px 20px; }
  .pts-rules-total-val { font-size: 2rem; }
  .pts-rules-list li { grid-template-columns: 48px 1fr; gap: 10px; }
}

.header-actions .header-icon-btn,
.header-actions .header-summary-btn,
.header-actions .header-chrome-expand {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-summary-btn[hidden],
#btnFsSummary[hidden] {
  display: none !important;
}
/* Icon-only summary ? same footprint as sibling actions */
.header-summary-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0;
  gap: 0;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.header-summary-btn:hover {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--brand);
}
.header-summary-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
  border-color: var(--line-strong);
  color: var(--brand);
}
.header-summary-btn iconify-icon {
  display: flex;
  flex-shrink: 0;
  opacity: 1;
}
.header-chrome-expand:not([hidden]) {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
  border-color: var(--line-strong);
  color: var(--brand);
}
.header-chrome-expand:not([hidden]):hover {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface-2));
  border-color: var(--line-strong);
}
body.is-content-fullscreen .header-actions,
body.is-banner-collapsed .header-actions {
  margin-left: auto;
}

/* Lesson summary popup ? polished reading card */
.summary-modal[hidden] { display: none !important; }
.summary-modal {
  --summary-accent: #0F6B6B;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.summary-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 40, 0.42);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.summary-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(440px, 92vw);
  max-height: min(78vh, 520px);
  overflow: auto;
  padding: 22px 22px 20px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--summary-accent) 9%, var(--surface)) 0%, var(--surface) 38%),
    var(--surface);
  border: 1px solid var(--line-mid);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 48px rgba(15, 28, 40, 0.18);
  animation: summaryModalIn 0.22s ease both;
}
.summary-modal-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--summary-accent), color-mix(in srgb, var(--summary-accent) 35%, var(--ink)));
}
.summary-modal-x {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.summary-modal-x:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
  transform: scale(1.04);
}
.summary-modal-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 28px 0 0;
  margin: 0;
}
.summary-modal-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--summary-accent);
  background: color-mix(in srgb, var(--summary-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--summary-accent) 22%, transparent);
}
.summary-modal-top-text {
  min-width: 0;
  padding-top: 2px;
}
.summary-modal-kicker {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  margin: 0 0 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--summary-accent) 22%, transparent);
  background: color-mix(in srgb, var(--summary-accent) 8%, var(--surface));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--summary-accent);
}
.summary-modal-meta {
  margin: 0;
  font-size: 12px;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  letter-spacing: 0.01em;
}
.summary-modal-title {
  font-family: "Noto Serif Bengali", "Noto Sans Bengali", "Hind Siliguri", serif;
  font-size: 1.22rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.4;
  margin: 14px 0 0;
  padding-right: 12px;
}
.summary-modal-divider {
  height: 1px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--summary-accent) 35%, transparent), var(--line));
}
.summary-modal-body {
  margin: 14px 0 0;
  padding: 0 0 4px;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.summary-modal-foot {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-mid);
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  letter-spacing: 0.01em;
}
body.summary-modal-open { overflow: hidden; }
@keyframes summaryModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 480px) {
  .summary-modal-dialog { width: min(100%, 94vw); border-radius: 18px; }
  .summary-modal-title { font-size: 1.1rem; }
  .summary-modal-body { font-size: 0.9rem; }
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.header-icon-btn:hover {
  background: var(--surface);
  border-color: var(--line-strong);
}
.header-icon-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-2));
  border-color: var(--line-strong);
  color: var(--brand);
}
.header-icon-btn--chat {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface-2));
  color: var(--brand);
}

@media (max-width: 720px) {
  .app-header .header-progress { min-width: 56px; max-width: 72px; }
  .header-progress-label { display: none; }
  .header-title { display: none; }
}

/* Sidebar unit meta (no 4.1/4.2 switcher) */
.sidebar-unit-meta { border-bottom: 1px solid var(--line); }
.sidebar-unit-hint { line-height: 1.3; }

/* SkillUp-style circular icons + timeline */
#navList {
  position: relative;
}
#navList > .nav-item {
  z-index: 1;
}
#navList > .nav-item:not(:last-of-type)::before {
  content: '';
  position: absolute;
  left: 29px;
  top: calc(50% + 18px);
  bottom: calc(-50% + 18px);
  width: 1.5px;
  background: var(--line);
  z-index: 0;
  pointer-events: none;
}
.nav-item .nav-type-ico {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--nav-bg, var(--surface-2));
  border: 1.5px solid var(--nav-ring, var(--line-mid));
  color: var(--nav-c, rgba(21, 42, 50, 0.62));
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.nav-item[data-type="video"] .nav-type-ico,
.nav-item[data-type="text"] .nav-type-ico,
.nav-item[data-type="intro"] .nav-type-ico {
  background: var(--nav-bg, var(--surface-2));
  border-color: var(--nav-ring, var(--line-mid));
  color: var(--nav-c, rgba(21, 42, 50, 0.62));
}
.nav-item:hover .nav-type-ico {
  border-color: color-mix(in srgb, var(--nav-c, #0F6B6B) 35%, var(--surface));
  color: var(--nav-c, rgba(21, 42, 50, 0.82));
}
.nav-item.is-active:hover .nav-type-ico {
  border-color: var(--nav-progress, #2E8B3A);
  color: #fff;
}
.nav-item .nav-label {
  flex: 1;
  text-align: left;
  line-height: 1.45;
  font-size: 13.5px;
  font-weight: 500;
}

/* Sidebar footer: Quiz + Additional resource ? compact layout, original type */
.sidebar-nav-foot {
  border-top: 1px solid var(--line);
  margin-top: auto;
  background: var(--surface);
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  gap: 0;
}
.sidebar-nav-foot .nav-item {
  margin: 0;
  padding: 6px 10px;
  gap: 10px;
  min-height: 0;
}
.sidebar-nav-foot .nav-item .nav-label {
  color: #2F6F7A;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1.35;
}
.sidebar-nav-foot .nav-item:hover .nav-label {
  color: #0F6B6B;
}
.sidebar-nav-foot .nav-item.is-active .nav-label {
  color: #0A4F52;
  font-weight: 600;
}
.sidebar-nav-foot .nav-item.is-locked .nav-label {
  color: rgba(47, 111, 122, 0.55);
}
.sidebar-nav-foot .nav-item .nav-type-ico {
  width: 26px;
  height: 26px;
  border-width: 1px;
  color: var(--nav-c, #2F6F7A);
  border-color: var(--nav-ring, rgba(47, 111, 122, 0.18));
  background: var(--nav-bg, var(--surface-2));
}
.sidebar-nav-foot .nav-item .nav-type-ico iconify-icon {
  width: 13px !important;
  height: 13px !important;
  font-size: 13px !important;
}
.sidebar-nav-foot .nav-item:hover .nav-type-ico {
  color: var(--nav-c, #0F6B6B);
  border-color: var(--nav-ring, rgba(15, 107, 107, 0.28));
}
.sidebar-nav-foot .nav-item.is-active .nav-type-ico {
  background: var(--nav-progress, #2E8B3A);
  border-color: var(--nav-progress, #2E8B3A);
  color: #fff;
}
.sidebar-nav-foot .nav-item .nav-state {
  width: 14px;
  opacity: 0.7;
}
.sidebar-nav-foot .nav-item .nav-state iconify-icon {
  width: 13px !important;
  height: 13px !important;
}

/* Collapsed sidebar ? icon rail (desktop) */
body.sidebar-collapsed #sidebarSlot {
  display: none !important;
  width: 0 !important;
  flex: 0 0 0 !important;
}
@media (min-width: 1024px) {
  body.sidebar-collapsed {
    --l2-sidebar-w: 72px;
  }
  body.sidebar-collapsed #sidebar {
    display: flex !important;
    width: var(--l2-sidebar-w) !important;
    flex: 0 0 var(--l2-sidebar-w) !important;
    transition: width 0.22s ease, flex-basis 0.22s ease;
  }
  body.sidebar-collapsed .sidebar-brand-block .min-w-0,
  body.sidebar-collapsed .sidebar-unit-label,
  body.sidebar-collapsed .sidebar-section-head,
  body.sidebar-collapsed .nav-item .nav-label,
  body.sidebar-collapsed .nav-item .nav-state {
    display: none !important;
  }
  body.sidebar-collapsed .sidebar-nav-foot {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.sidebar-collapsed .sidebar-brand-block {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
  }
  body.sidebar-collapsed .sidebar-brand-block > .flex {
    justify-content: center;
  }
  body.sidebar-collapsed .nu-logo--sidebar {
    width: 36px;
    height: 36px;
  }
  body.sidebar-collapsed .sidebar-unit-meta {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }
  body.sidebar-collapsed .sidebar-nav,
  body.sidebar-collapsed #navList {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.sidebar-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    padding: 8px 0;
  }
  body.sidebar-collapsed .nav-item.is-active {
    transform: none;
    background: transparent;
    box-shadow: none;
  }
  body.sidebar-collapsed .nav-item.is-active::after {
    display: none;
  }
  body.sidebar-collapsed .nav-item.is-active .nav-type-ico {
    background: var(--nav-progress, #2E8B3A);
    border-color: var(--nav-progress, #2E8B3A);
    color: #fff;
  }
  body.sidebar-collapsed .nav-item .nav-type-ico {
    width: 36px;
    height: 36px;
    border-radius: 999px;
  }
  body.sidebar-collapsed #navList > .nav-item::before {
    display: none;
  }
  body[data-layout="2"].sidebar-collapsed #contentColumn {
    width: 100%;
    max-width: none;
  }
}
.sidebar-float-btn {
  display: none !important;
}
@media (max-width: 1023px) {
  #btnSidebarToggle { display: none; }
}

/* Transparent footer ? buttons only, no white slab */
body[data-layout="2"] #contentColumn > .content-nav-foot,
body[data-layout="2"] #contentColumn > footer,
.content-nav-foot {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
}
.footer-nav-inner {
  background: transparent !important;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body[data-layout="2"] #contentColumn {
  padding-bottom: calc(var(--l2-footer-h) + 4px);
}
.footer-nav-inner {
  min-height: 52px;
}
.footer-btn-chat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #9B4FC4 0%, #702c91 46%, #4A1C62 100%);
  color: #fff;
  box-shadow:
    0 6px 18px rgba(112, 44, 145, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  gap: 8px;
  padding-inline: 16px;
  font-family: 'Plus Jakarta Sans', var(--font-ui), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transform: translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}
.footer-btn-chat::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 48%,
    transparent 100%
  );
  transform: translateX(-140%) skewX(-18deg);
  animation: aiTutorSheen 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.footer-btn-chat > * {
  position: relative;
  z-index: 1;
}
.footer-btn-chat > span {
  color: #fff;
  font-weight: 800;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  animation: none;
}
.footer-btn-chat:hover {
  background: linear-gradient(135deg, #8B45B5 0%, #702c91 48%, #5A2375 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(112, 44, 145, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  filter: none;
}
.footer-btn-chat:hover > span {
  color: #fff;
  background: none;
}
.footer-btn-chat:hover .footer-chat-ico {
  animation: aiTutorIconPop .55s ease;
  color: #fff;
}
.footer-btn-chat:active {
  transform: translateY(0) scale(0.98);
}
.footer-btn-chat svg,
.footer-btn-chat iconify-icon,
.footer-btn-chat .footer-chat-ico {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  min-height: 15px;
  color: #fff;
  stroke: currentColor;
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
  stroke-width: 2.35;
  filter: none;
}
.footer-btn-chat.is-open,
.footer-btn-chat[aria-pressed="true"] {
  background: linear-gradient(135deg, #5A2375 0%, #4A1C62 100%);
  color: #fff;
  box-shadow:
    0 4px 12px rgba(112, 44, 145, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  filter: none;
}
.footer-btn-chat.is-open::before,
.footer-btn-chat[aria-pressed="true"]::before {
  animation: none;
  opacity: 0;
}
.footer-btn-chat.is-open > span,
.footer-btn-chat[aria-pressed="true"] > span {
  color: #fff;
  background: none;
  animation: none;
}
.footer-btn-chat.is-open .footer-chat-ico,
.footer-btn-chat[aria-pressed="true"] .footer-chat-ico {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .ai-tutor-fab,
  .footer-btn-chat::before,
  .footer-btn-chat:hover .footer-chat-ico,
  .ai-tutor-fab:hover .ai-fab-icon {
    animation: none !important;
  }
}

/* Hide sidebar progress foot if leftover markup */
.sidebar-progress-foot { display: none !important; }

/* Topbar + banner collapse (sidebar nav); expand via breadcrumb button */
body.is-banner-collapsed #layoutBanner,
body.is-banner-collapsed #layoutTop {
  max-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}
/* Video-focus: calm header only (banner stays until sidebar collapse) */
body.video-focus .header-progress {
  opacity: 0.55;
}
body.video-focus #contentColumn {
  background: var(--surface);
}
/* Video lessons: keep header→card gap tight and even */
body[data-layout="2"].video-focus:not(.cinema-mode) #layoutBody {
  padding-top: 10px;
  gap: 12px;
}
@media (min-width: 1024px) {
  body[data-layout="2"].video-focus:not(.cinema-mode) #layoutBody {
    padding-top: 12px;
    gap: 14px;
  }
}

/* Content fullscreen polish */
body.is-content-fullscreen #contentColumn,
#contentColumn:fullscreen,
#contentColumn:-webkit-full-screen {
  --fs-stage-pad-x: 28px;
  --fs-stage-pad-y: 20px;
  background: var(--surface);
  padding: 0;
  border: none;
  border-radius: 0;
  height: 100dvh !important;
  max-height: 100dvh !important;
  position: relative;
}

/* Same content padding for every page while fullscreen */
body.is-content-fullscreen .stage-shell,
#contentColumn:fullscreen .stage-shell,
#contentColumn:-webkit-full-screen .stage-shell,
body.is-content-fullscreen .stage-shell.is-video-lesson,
body.is-content-fullscreen .stage-shell.is-studio,
#contentColumn:fullscreen .stage-shell.is-video-lesson,
#contentColumn:fullscreen .stage-shell.is-studio,
#contentColumn:-webkit-full-screen .stage-shell.is-video-lesson,
#contentColumn:-webkit-full-screen .stage-shell.is-studio {
  padding: var(--fs-stage-pad-y) var(--fs-stage-pad-x) !important;
  box-sizing: border-box;
}

/* Fullscreen (non-video / non-studio): same centered column as normal pages */
body.is-content-fullscreen:not(.video-focus):not(.studio-focus):not(.cinema-mode) .stage-shell:not(.is-video-lesson):not(.is-studio),
#contentColumn:fullscreen .stage-shell:not(.is-video-lesson):not(.is-studio),
#contentColumn:-webkit-full-screen .stage-shell:not(.is-video-lesson):not(.is-studio) {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
body.is-content-fullscreen:not(.video-focus):not(.studio-focus):not(.cinema-mode) .slide-head,
#contentColumn:fullscreen .stage-shell:not(.is-video-lesson):not(.is-studio) .slide-head,
#contentColumn:-webkit-full-screen .stage-shell:not(.is-video-lesson):not(.is-studio) .slide-head {
  max-width: none;
  width: 100%;
}
body.is-content-fullscreen:not(.video-focus):not(.studio-focus):not(.cinema-mode) .ov-shell,
body.is-content-fullscreen:not(.video-focus):not(.studio-focus):not(.cinema-mode) .kh-shell,
#contentColumn:fullscreen .ov-shell,
#contentColumn:fullscreen .kh-shell,
#contentColumn:-webkit-full-screen .ov-shell,
#contentColumn:-webkit-full-screen .kh-shell {
  max-width: none; /* parent stage-shell already = content-max */
  width: 100%;
}
body.is-content-fullscreen #stageWrap,
#contentColumn:fullscreen #stageWrap,
#contentColumn:-webkit-full-screen #stageWrap {
  padding-bottom: 12px !important;
}
@media (max-width: 720px) {
  body.is-content-fullscreen #contentColumn,
  #contentColumn:fullscreen,
  #contentColumn:-webkit-full-screen {
    --fs-stage-pad-x: 16px;
    --fs-stage-pad-y: 16px;
  }
}

/* AI Tutor reparented into #contentColumn during content fullscreen */
body.ai-tutor-in-fs #contentColumn .ai-tutor-fab,
body.is-content-fullscreen #contentColumn .ai-tutor-fab,
#contentColumn:fullscreen .ai-tutor-fab,
#contentColumn:-webkit-full-screen .ai-tutor-fab {
  position: absolute;
  right: 20px;
  bottom: calc(var(--l2-footer-h, 52px) + 18px);
  z-index: 95;
}
body.ai-tutor-in-fs #contentColumn .ai-chat-panel,
body.is-content-fullscreen #contentColumn .ai-chat-panel,
#contentColumn:fullscreen .ai-chat-panel,
#contentColumn:-webkit-full-screen .ai-chat-panel {
  position: absolute;
  right: 20px;
  bottom: calc(var(--l2-footer-h, 52px) + 18px);
  z-index: 96;
  width: min(390px, calc(100% - 28px));
  height: min(560px, calc(100% - var(--l2-footer-h, 52px) - 36px));
  max-height: calc(100% - var(--l2-footer-h, 52px) - 36px);
}

/* Fullscreen corner chrome: ?????????? + exit */
.fs-chrome[hidden] { display: none !important; }
.fs-chrome {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 80;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
.fs-chrome-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fs-chrome-btn:hover {
  transform: translateY(-1px);
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--brand);
}
.fs-chrome-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border-color: var(--line-strong);
  color: var(--brand);
}
body.is-content-fullscreen .fs-chrome:not([hidden]),
#contentColumn:fullscreen .fs-chrome:not([hidden]),
#contentColumn:-webkit-full-screen .fs-chrome:not([hidden]) {
  display: inline-flex;
}

/* Summary modal must paint above FS chrome when hosted inside column */
body.is-content-fullscreen #contentColumn .summary-modal,
#contentColumn:fullscreen .summary-modal,
#contentColumn:-webkit-full-screen .summary-modal {
  position: absolute;
  inset: 0;
  z-index: 100;
}

/* ---- Fit-panel slides (video + prompt studio): fill content card, no page scroll ---- */
body[data-layout="2"].video-focus:not(.cinema-mode) #stageWrap,
body[data-layout="2"].studio-focus:not(.cinema-mode) #stageWrap {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}
body[data-layout="2"].video-focus:not(.cinema-mode) #stage,
body[data-layout="2"].studio-focus:not(.cinema-mode) #stage {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
body[data-layout="2"]:not(.cinema-mode) .stage-shell.is-video-lesson,
body[data-layout="2"]:not(.cinema-mode) .stage-shell.is-studio,
body[data-layout="2"].video-focus:not(.cinema-mode) .stage-shell,
body[data-layout="2"].studio-focus:not(.cinema-mode) .stage-shell {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
body[data-layout="2"]:not(.cinema-mode) .stage-scroll.is-fit-panel {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}
body[data-layout="2"]:not(.cinema-mode) .stage-scroll.is-fit-panel > .fit-panel-beat,
body[data-layout="2"]:not(.cinema-mode) .stage-scroll.is-fit-panel > .beat-enter {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body[data-layout="2"]:not(.cinema-mode) .fit-panel-beat > .fit-panel-sim,
body[data-layout="2"]:not(.cinema-mode) .fit-panel-beat > .vl-host,
body[data-layout="2"]:not(.cinema-mode) .fit-panel-beat > .ps-host {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* ---- Video-only: top-aligned with even professional inset (all modules) ---- */
body.video-focus .stage-shell.is-video-lesson,
.stage-shell.is-video-lesson {
  padding: 12px !important;
  box-sizing: border-box;
}
body[data-layout="2"].studio-focus:not(.cinema-mode) .stage-shell.is-studio,
body[data-layout="2"]:not(.cinema-mode) .stage-shell.is-studio {
  padding: 18px 20px 16px;
}
@media (min-width: 640px) {
  body[data-layout="2"].studio-focus:not(.cinema-mode) .stage-shell.is-studio,
  body[data-layout="2"]:not(.cinema-mode) .stage-shell.is-studio {
    padding: 20px 28px 18px;
  }
}
@media (min-width: 1024px) {
  body[data-layout="2"].studio-focus:not(.cinema-mode) .stage-shell.is-studio,
  body[data-layout="2"]:not(.cinema-mode) .stage-shell.is-studio {
    padding: 22px 32px 20px;
  }
}
.vl-host {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.vl-shell,
.vl-shell--compact {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  container-type: size;
  container-name: vl-shell;
}
.vl-head { display: none; }
.sidebar-unit-hint { display: none !important; }
.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 1.5px solid var(--line-mid);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  color: var(--brand, #0F6B6B);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.sidebar-collapse-btn:hover,
.sidebar-collapse-btn:focus-visible {
  background: var(--surface);
  border-color: #9CA3AF;
  box-shadow: none;
  color: var(--teal, #0F6B6B);
  outline: none;
}
.sidebar-collapse-btn[aria-pressed="true"] {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 55%, var(--surface));
  box-shadow: none;
  color: #0891B2;
}
.sidebar-collapse-btn[aria-pressed="true"]:hover,
.sidebar-collapse-btn[aria-pressed="true"]:focus-visible {
  border-color: var(--brand, #0F6B6B);
  color: var(--brand, #0F6B6B);
}
.sidebar-collapse-btn iconify-icon {
  display: block;
  pointer-events: none;
  color: inherit;
}
@media (max-width: 1023px) {
  .sidebar-collapse-btn { display: none !important; }
}
body[data-layout="2"] .slide-head--compact {
  padding-top: 0;
  padding-bottom: 8px;
  margin-bottom: 2px;
}
body.video-focus .slide-head { display: none !important; }
/* Fill available area as a true 16:9 box — top-aligned, never vertically centered */
.vl-frame {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: min(100%, calc(100cqh * 16 / 9));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 100%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  background: #0b1016;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(15, 26, 40, 0.06);
}
/* Fallback when container queries unavailable */
@supports not (width: 1cqh) {
  .vl-frame {
    width: 100%;
    max-height: calc(var(--l2-panel-h, 100dvh) - var(--l2-footer-h, 52px) - 36px);
  }
}

/* Content fullscreen: shrink video so exit / footer icons don't overlap */
body.is-content-fullscreen.video-focus .stage-shell.is-video-lesson,
#contentColumn:fullscreen .stage-shell.is-video-lesson,
#contentColumn:-webkit-full-screen .stage-shell.is-video-lesson {
  padding: 56px 40px 60px !important;
  box-sizing: border-box;
}
body.is-content-fullscreen.video-focus .vl-shell,
#contentColumn:fullscreen .vl-shell,
#contentColumn:-webkit-full-screen .vl-shell {
  width: 100%;
  height: 100%;
  max-width: min(1100px, 92%);
  margin: 0 auto;
}
body.is-content-fullscreen.video-focus .vl-frame,
#contentColumn:fullscreen .vl-frame,
#contentColumn:-webkit-full-screen .vl-frame {
  width: min(92%, calc(100cqh * 16 / 9));
  max-width: 92%;
  max-height: min(100%, calc(100% - 8px));
}
@supports not (width: 1cqh) {
  body.is-content-fullscreen.video-focus .vl-frame,
  #contentColumn:fullscreen .vl-frame,
  #contentColumn:-webkit-full-screen .vl-frame {
    width: 92%;
    max-height: calc(100dvh - var(--l2-footer-h, 52px) - 120px);
  }
}

.vl-frame iframe,
.vl-frame .vl-player,
.vl-frame .vl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.vl-frame .vl-video,
.vl-player .vl-video {
  object-fit: contain;
  object-position: center;
  background: #0b1016;
  cursor: pointer;
}
.vl-frame.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1a2332 0%, #243b55 55%, #0f6b6b 140%);
  min-height: 160px;
}
.vl-placeholder {
  text-align: center;
  color: #fff;
  padding: 16px 18px;
  max-width: 360px;
}
.vl-ph-ico { display: inline-flex; opacity: 0.9; margin-bottom: 6px; }
.vl-ph-title { font-family: "Noto Serif Bengali", serif; font-size: 1.05rem; font-weight: 600; }
.vl-ph-text { margin-top: 6px; font-size: 0.86rem; opacity: 0.82; line-height: 1.45; }

/* ---- Custom video player ? minimal cinema chrome ---- */
.vl-player {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: #0b1016;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vl-player:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(15, 107, 107, 0.55);
}
.vl-player .vl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vl-err {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 56px;
  z-index: 5;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(196, 92, 74, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.vl-big-play {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: auto;
  width: 72px;
  height: 72px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.vl-player.is-paused .vl-big-play,
.vl-player:not(.is-playing) .vl-big-play {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.vl-player.is-playing .vl-big-play {
  opacity: 0;
  pointer-events: none;
}
.vl-big-play-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(12, 18, 26, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease, transform 0.18s ease;
}
.vl-big-play:hover .vl-big-play-ring {
  background: rgba(15, 107, 107, 0.72);
  transform: scale(1.04);
}
.vl-big-play-ico {
  position: relative;
  z-index: 1;
  display: flex;
  margin-left: 3px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.vl-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 28px 14px 12px;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 18, 0) 0%,
    rgba(8, 12, 18, 0.55) 42%,
    rgba(8, 12, 18, 0.88) 100%
  );
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.vl-player.is-controls-visible .vl-controls,
.vl-player.is-paused .vl-controls,
.vl-player.is-scrubbing .vl-controls,
.vl-player:focus-within .vl-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.vl-seek-wrap {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.vl-markers,
.vl-marker {
  display: none !important;
}
.vl-vol {
  --vl-vol: 100%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 36px;
  overflow: hidden;
  border-radius: 10px;
  transition: max-width 0.18s ease, background 0.15s ease;
}
.vl-vol:hover,
.vl-vol:focus-within {
  max-width: 118px;
  background: rgba(255, 255, 255, 0.1);
  padding-right: 8px;
}
.vl-vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  min-width: 0;
  height: 4px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.95) var(--vl-vol),
    rgba(255, 255, 255, 0.22) var(--vl-vol),
    rgba(255, 255, 255, 0.22) 100%
  );
  outline: none;
  cursor: pointer;
  opacity: 0;
  transition: width 0.18s ease, opacity 0.15s ease;
}
.vl-vol:hover .vl-vol-range,
.vl-vol:focus-within .vl-vol-range {
  width: 72px;
  min-width: 72px;
  opacity: 1;
}
.vl-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.vl-vol-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.vl-vol-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}
@media (max-width: 640px) {
  .vl-vol {
    max-width: none;
    overflow: visible;
    background: transparent;
    padding-right: 0;
  }
  .vl-vol-range {
    width: 56px;
    min-width: 56px;
    opacity: 1;
  }
}
.vl-seek-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  pointer-events: none;
  transition: height 0.15s ease;
}
.vl-seek-wrap:hover .vl-seek-track,
.vl-player.is-scrubbing .vl-seek-track {
  height: 5px;
}
.vl-seek-buf {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.22);
}
.vl-seek-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #0F6B6B, #2bb3b3);
  box-shadow: 0 0 0 0 rgba(15, 107, 107, 0);
}
.vl-seek-fill::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  transform: translateY(-50%) scale(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.vl-seek-wrap:hover .vl-seek-fill::after,
.vl-player.is-scrubbing .vl-seek-fill::after {
  transform: translateY(-50%) scale(1);
}
.vl-seek {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.vl-seek::-webkit-slider-runnable-track {
  height: 3px;
  background: transparent;
}
.vl-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.vl-seek::-moz-range-track {
  height: 3px;
  background: transparent;
  border: 0;
}
.vl-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.vl-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
}
.vl-bar-spacer { flex: 1 1 auto; }
.vl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.vl-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.vl-btn:active { transform: scale(0.96); }
.vl-btn:focus-visible {
  outline: 2px solid rgba(43, 179, 179, 0.7);
  outline-offset: 1px;
}
.vl-btn iconify-icon { display: flex; }
.vl-btn--rate {
  width: auto;
  min-width: 38px;
  padding: 0 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
}
.vl-time {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 2px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vl-time-sep { opacity: 0.45; }
.vl-player.is-fullscreen,
.vl-frame:fullscreen,
.vl-frame:-webkit-full-screen {
  border-radius: 0;
  border: 0;
  max-height: none !important;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #000;
}
/* Inset player in native fullscreen so control icons aren't edge-clipped */
.vl-frame:fullscreen .vl-player,
.vl-frame:-webkit-full-screen .vl-player,
.vl-player.is-fullscreen {
  inset: 3vh 3vw !important;
  width: auto !important;
  height: auto !important;
  border-radius: 10px;
  overflow: hidden;
}
.vl-frame:fullscreen .vl-controls,
.vl-frame:-webkit-full-screen .vl-controls,
.vl-player.is-fullscreen .vl-controls {
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: max(12px, 1.5vh);
}
@media (max-width: 560px) {
  .vl-controls { padding: 24px 10px 10px; }
  .vl-btn { width: 32px; height: 32px; border-radius: 9px; }
  .vl-big-play { width: 64px; height: 64px; }
  .vl-time { font-size: 11px; }
}

/* ---- Overview ? minimal editorial ---- */
.ov-host {
  width: 100%;
  min-height: 0;
}
.ov-shell {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 14px;
  box-sizing: border-box;
}

.ov-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line-mid);
}
.ov-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 10px 18px 12px;
  margin: 0;
  font-family: "Noto Serif Bengali", serif;
  font-size: 1rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
}
.ov-tab:hover { color: color-mix(in srgb, var(--ink) 75%, transparent); }
.ov-tab.is-active {
  color: var(--brand, #0F6B6B);
}
.ov-tab.is-active::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  background: var(--brand, #0F6B6B);
}

.ov-stage {
  min-height: 200px;
  margin-bottom: 22px;
}
.ov-stage.is-out .ov-panel {
  opacity: 0;
  transform: translateY(6px);
}
.ov-stage.is-in .ov-panel {
  animation: ovPanelIn 0.32s ease both;
}
@keyframes ovPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.ov-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 28px;
  align-items: start;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.ov-num {
  font-family: "Noto Serif Bengali", serif;
  font-size: clamp(3.5rem, 8vw, 4.75rem);
  font-weight: 600;
  line-height: 0.9;
  color: color-mix(in srgb, var(--ink) 12%, transparent);
  letter-spacing: -0.03em;
  user-select: none;
}
.ov-panel-body { min-width: 0; padding-top: 6px; }
.ov-panel-title {
  font-family: "Noto Serif Bengali", serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--brand, #0F6B6B);
  line-height: 1.4;
}
.ov-panel-title--brand {
  color: var(--brand, #0F6B6B);
}
.ov-panel-lead {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.ov-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.ov-panel-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.ov-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0F6B6B;
}
.ov-panel-list--num li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-left: 0;
}
.ov-panel-list--num li::before { display: none; }
.ov-num-n {
  flex-shrink: 0;
  font-weight: 700;
  color: #0F6B6B;
  min-width: 1.4em;
}

/* Categorized objectives by lesson */
.ov-panel--cats {
  grid-template-columns: 1fr;
}
.ov-panel--cats .ov-num { display: none; }
.ov-cats {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.35rem;
}
.ov-cat {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line-mid);
}
.ov-cat:last-child {
  margin-bottom: 0;
}
.ov-cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0;
  border-bottom: none;
}
.ov-cat-lesson {
  display: inline;
  flex: 0 0 auto;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--secondary, #2F6FAD);
  line-height: 1.4;
  white-space: nowrap;
}
.ov-cat-lesson:not(:empty)::after {
  content: ' ·';
}
.ov-cat-title {
  margin: 0;
  flex: 1 1 auto;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--secondary, #2F6FAD);
  line-height: 1.4;
}
.ov-cat-range {
  display: none;
}
.ov-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ov-cat-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-left: 0;
}
.ov-cat-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.48em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 42%, transparent);
}
.ov-cat-n {
  display: none;
}
.ov-cat-list--serial li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem;
  align-items: start;
  padding-left: 0;
}
.ov-cat-list--serial li::before {
  display: none;
}
.ov-cat-list--serial .ov-cat-n {
  display: inline;
  flex-shrink: 0;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F6B6B;
  line-height: 1.65;
  min-width: 1.6em;
}
.ov-cat-t {
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink, var(--ink));
}
.ov-cat-list--plain li {
  display: block;
  grid-template-columns: none;
  padding-left: 1.15rem;
}

@media (max-width: 640px) {
  .ov-tab { padding: 10px 14px 12px; font-size: 0.95rem; }
  .ov-tab.is-active::after { left: 14px; right: 14px; }
  .ov-panel {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ov-num {
    font-size: 3rem;
    margin-bottom: 4px;
  }
  .ov-panel-body { padding-top: 0; }
}
/* ---- Keyword hub ? tabs on top, detail below ---- */
.kh-host { width: 100%; --kh: var(--brand, #0F6B6B); }
.kh-shell { width: 100%; max-width: none; margin: 0; padding: 2px 0 18px; box-sizing: border-box; }
.kh-sub {
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 55%, rgba(26, 35, 50, 0.4));
  line-height: 1.35;
}
.kh-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.kh-index {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.kh-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: max-content;
  width: auto;
  padding: 8px 10px;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  animation: khItemIn 0.3s ease forwards;
  animation-delay: var(--d, 0ms);
  transition: color 0.16s ease, background 0.16s ease;
}
@keyframes khItemIn {
  to { opacity: 1; transform: translateY(0); }
}
.kh-item-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(15, 107, 107, 0.06);
  color: rgba(15, 107, 107, 0.55);
  flex-shrink: 0;
  transition: background 0.16s ease, color 0.16s ease;
}
.kh-item-label {
  display: block;
  min-width: 0;
  font-weight: 550;
  font-size: 0.82rem;
  line-height: 1.3;
  color: inherit;
  white-space: nowrap;
}
.kh-item:hover {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  background: rgba(15, 107, 107, 0.05);
}
.kh-item:hover .kh-item-ico {
  background: rgba(15, 107, 107, 0.1);
  color: #0F6B6B;
}
.kh-item.is-on {
  color: var(--brand);
  background: rgba(15, 107, 107, 0.09);
  box-shadow: none;
}
.kh-item.is-on .kh-item-ico {
  background: rgba(15, 107, 107, 0.14);
  color: #0F6B6B;
}
.kh-item.is-on .kh-item-label {
  color: var(--brand);
  font-weight: 650;
}
.kh-detail, .kh-panel {
  --kh: var(--brand, #0F6B6B);
  margin-top: 0;
  min-height: 280px;
  padding: 20px 20px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  animation: khDetailIn 0.28s ease;
}
@keyframes khDetailIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.kh-detail-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.kh-detail-ico {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: #0F6B6B;
  flex-shrink: 0;
}
.kh-detail-copy { min-width: 0; }
.kh-detail-kicker {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--brand);
  letter-spacing: 0;
  margin: 0 0 4px;
  line-height: 1.35;
}
.kh-detail-blurb {
  margin: 0;
  font-weight: 450;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  line-height: 1.5;
}
.kh-detail-points {
  padding-left: 1.1rem;
  display: grid;
  gap: 7px;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  margin: 0 0 14px;
  font-size: 0.88rem;
  font-weight: 450;
  line-height: 1.55;
}
.kh-detail-points li::marker { color: #0F6B6B; }
.kh-detail-keys {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.kh-detail-keys-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(15, 107, 107, 0.8);
}
.kh-panel-label { font-weight: 700; margin-bottom: 6px; color: #0F6B6B; }
.kh-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  line-height: 1.55;
}
.kh-tags span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 500;
  color: #C9A227;
}
.kh-tags span:not(:last-child)::after {
  content: '\00a0\00b7\00a0';
  margin: 0 2px 0 6px;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
  font-weight: 400;
}
@media (max-width: 720px) {
  .kh-item {
    flex: 0 0 auto;
  }
  .kh-detail, .kh-panel { min-height: 0; }
}

/* ---- Prompt Studio ? polished, professional, compact ---- */
.ps-host {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ps-shell.ps-chat {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.ps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  padding: 2px 2px 0;
}
.ps-kicker {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.ps-lead {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  line-height: 1.35;
}
.ps-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.ps-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  flex-shrink: 0;
  height: 32px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ps-live-btn:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--surface-2);
}
.ps-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(26, 35, 50, 0.25);
  flex-shrink: 0;
}
.ps-live-btn.is-on {
  border-color: rgba(47, 143, 91, 0.32);
  color: var(--output);
  background: rgba(47, 143, 91, 0.07);
}
.ps-live-btn.is-on .ps-live-dot {
  background: #2F8F5B;
  box-shadow: 0 0 0 3px rgba(47, 143, 91, 0.15);
}

/* Code workbench — Code tab default */
.ps-code-workbench {
  margin: 0;
  border-radius: 16px;
  border: 1px solid rgba(26, 35, 50, 0.1);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.05);
}
.ps-code-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--paper), var(--surface-2));
  border-bottom: 1px solid var(--line);
}
.ps-code-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(26, 35, 50, 0.1);
  background: var(--surface);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ps-code-tab:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
}
.ps-code-tab.is-on:not(.ps-code-tab--preview) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.ps-code-tab--preview:hover {
  border-color: color-mix(in srgb, #0f6b6b 40%, transparent);
  color: var(--brand);
}
.ps-code-tab--preview.is-on {
  background: #0f6b6b;
  border-color: #0f6b6b;
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 107, 107, 0.22);
}
.ps-code-tab--preview.is-on .ps-code-live-dot {
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.ps-code-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f6b6b;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.16);
}
.ps-code-tab--external {
  margin-left: auto;
  background: var(--surface);
  border-color: color-mix(in srgb, #0f6b6b 30%, transparent);
  color: var(--brand);
}
.ps-code-tab--external:hover {
  background: color-mix(in srgb, #0f6b6b 8%, var(--surface));
  border-color: #0f6b6b;
  color: var(--brand);
}
.ps-code-pane {
  background: #0f1720;
}
.ps-code-pane pre {
  margin: 0;
  padding: 14px 16px;
  max-height: min(42vh, 360px);
  overflow: auto;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--surface-2);
}
.ps-code-pane code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.ps-code-pane--preview {
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(15, 107, 107, 0.07), transparent 55%),
    linear-gradient(180deg, #f7f5f1, #eef1f3);
}
.ps-code-preview-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
}
.ps-code-preview-dots {
  display: inline-flex;
  gap: 5px;
}
.ps-code-preview-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 35, 50, 0.16);
  display: block;
}
.ps-code-preview-dots i:nth-child(1) { background: #e8a59a; }
.ps-code-preview-dots i:nth-child(2) { background: #e2c48a; }
.ps-code-preview-dots i:nth-child(3) { background: #9ec9b3; }
.ps-code-preview-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.ps-code-preview {
  display: block;
  width: 100%;
  height: min(52vh, 420px);
  min-height: 320px;
  border: 0;
  background: transparent;
}

@media (max-width: 640px) {
  .ps-code-tab--external { margin-left: 0; width: 100%; justify-content: center; }
  .ps-code-preview { height: min(48vh, 360px); min-height: 280px; }
}

.ps-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px;
}
.ps-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.ps-mode-ico {
  display: inline-flex;
  color: var(--ps-mode-c) !important;
  opacity: 1;
}
.ps-mode-ico iconify-icon,
.ps-mode-ico svg {
  color: inherit !important;
}
.ps-mode:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--surface-2);
}
.ps-mode.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.14);
}
.ps-mode.is-on .ps-mode-ico,
.ps-mode.is-on .ps-mode-ico iconify-icon,
.ps-mode.is-on .ps-mode-ico svg {
  color: var(--paper) !important;
  opacity: 0.95;
}
.ps-tech-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 8px;
  margin: 0;
  position: relative;
  z-index: 2;
}
.ps-composer-panel .ps-hint-inline {
  margin-top: 0;
}
.ps-tech-label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  flex-shrink: 0;
}
.ps-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}
.ps-tech-chip {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: transparent;
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ps-tech-chip:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
}
.ps-tech-chip.is-on {
  border-color: color-mix(in srgb, var(--secondary) 40%, transparent);
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 9%, var(--surface));
  font-weight: 600;
}
.ps-tech-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--secondary) 40%, transparent);
  outline-offset: 2px;
}
.ps-gpt.gpt-shell,
.gpt-shell.ps-gpt {
  /* Fill leftover space only ? never push mode/tech rows off-screen */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (max-width: 640px) {
  .ps-gpt .gpt-hero,
  .ps-gpt .gpt-hero--compact {
    min-height: 0 !important;
    padding-top: 4px !important;
  }
}
/* ChatGPT-like message stage ? scrolls inside; top rows stay visible */
.ps-gpt .gpt-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto;
  padding: 18px 18px 16px;
  background: var(--surface);
}
.ps-gpt .gpt-log:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100%;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  padding: 4px 0 12px;
}
.ps-gpt .gpt-msg {
  display: flex;
  width: 100%;
}
.ps-gpt .gpt-msg.user { justify-content: flex-end; }
.ps-gpt .gpt-msg.ai { justify-content: flex-start; }

/* User = soft gray pill (ChatGPT) */
.ps-gpt .gpt-msg.user .gpt-bubble {
  max-width: min(85%, 560px);
  padding: 11px 16px;
  border-radius: 22px;
  border-bottom-right-radius: 8px;
  background: var(--surface-2);
  border: none;
  box-shadow: none;
  color: var(--ink);
  font-family: "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* AI = full-width prose, no card border */
.ps-gpt .gpt-msg.ai .gpt-bubble {
  max-width: 100%;
  width: 100%;
  padding: 2px 2px 4px;
  border: none !important;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none !important;
  white-space: normal;
  color: var(--ink);
}

.ps-gpt .gpt-hero,
.ps-gpt .gpt-hero--compact {
  text-align: left;
  padding: 4px 2px 8px;
  min-height: 0;
}
.ps-hero {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 2px 8px !important;
}
.ps-hero-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 163, 127, 0.08);
  border: 1px solid rgba(16, 163, 127, 0.16);
  color: #0D8C6D;
  flex-shrink: 0;
}
.ps-hero-title {
  margin: 0 0 3px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.ps-gpt .gpt-hero-sub {
  color: var(--read-muted);
  font-size: 0.88rem;
  max-width: none;
  margin: 0;
  line-height: 1.5;
}

/* ---- Reply body (ChatGPT typography) ---- */
.ps-reply {
  width: 100%;
}
.ps-reply-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.ps-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--ps-c, #10A37F);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.ps-reply-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ps-reply-meta .sim-source-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 550;
}
.ps-reply-body {
  font-family: "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.ps-reply-body > *:first-child { margin-top: 0; }
.ps-reply-body > *:last-child { margin-bottom: 0; }
.ps-reply-body > .ps-code-workbench,
.ps-reply-body > .ps-email-card,
.ps-reply-body > .ps-logo-stage,
.ps-reply-body > .ps-video-deck,
.ps-reply-body > .ps-poster-live,
.ps-reply-body > .ps-reveal {
  margin-top: 0;
}
.ps-reply-body p,
.ps-reply-body .vb {
  margin: 0 0 0.85em;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
}
.ps-reply-body p:last-child,
.ps-reply-body .vb:last-child { margin-bottom: 0; }
.ps-reply-body strong,
.ps-reply-body b {
  font-weight: 650;
  color: var(--ink);
}
.ps-reply-body ul,
.ps-reply-body ol {
  margin: 0.4em 0 0.9em;
  padding-left: 1.35em;
}
.ps-reply-body li {
  margin: 0.25em 0;
  line-height: 1.7;
}
.ps-muted-note {
  margin: 0 0 10px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--read-muted) !important;
}

/* Generated images ? natural size, no padded colored frame */
.ps-gpt .sim-generated-image,
.ps-reply-body .sim-generated-image {
  margin: 10px 0 4px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  box-shadow: none;
}
.ps-gpt .sim-generated-image img,
.ps-reply-body .sim-generated-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(420px, 55vh);
  object-fit: contain;
  object-position: center;
  background: transparent;
  vertical-align: top;
}

/* Code blocks inside replies */
.ps-reply-body .sim-code-editor {
  margin: 12px 0 4px;
  border-radius: 14px;
  overflow: hidden;
}
.ps-reply-body .sim-code-editor pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.55;
}
.ps-reply-body pre {
  margin: 10px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: #0F172A;
  color: #E2E8F0;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

/* Soften nested offline demo cards inside reply */
.ps-reply-body .rounded-\[12px\],
.ps-reply-body [class*="rounded-[12px]"],
.ps-reply-body [class*="rounded-[10px]"] {
  border-radius: 12px !important;
}
.ps-reply-body .font-sansbn {
  font-family: inherit !important;
  line-height: inherit;
}
.ps-reply-body .text-\[13px\],
.ps-reply-body .text-\[12px\],
.ps-reply-body .text-\[14px\],
.ps-reply-body .text-\[15px\] {
  font-size: inherit !important;
  line-height: inherit !important;
}
.ps-reply-body .text-ink\/70,
.ps-reply-body .text-ink\/55 {
  color: var(--read-muted) !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

/* Composer ? original teal style (unchanged first-row chrome) */
.ps-gpt .gpt-composer-wrap,
.ps-composer-panel {
  flex: 0 0 auto;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(15, 107, 107, 0.1);
  background: var(--surface);
  box-sizing: border-box;
}
.ps-hint-inline[hidden] { display: none !important; }
.ps-hint-inline {
  margin: 0 0 5px;
  text-align: center;
  font-size: 10.5px;
  color: rgba(15, 107, 107, 0.55);
  line-height: 1.2;
}
.ps-gpt .ps-composer.gpt-composer,
.ps-composer--row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1.5px solid rgba(15, 107, 107, 0.28);
  background: var(--surface);
  box-shadow: none;
  padding: 5px 6px 5px 10px;
  min-height: 44px;
}
.ps-gpt .ps-composer.gpt-composer:focus-within {
  border-color: #0F6B6B;
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.12);
}
.ps-composer-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border: none;
  outline: none;
  resize: none;
  min-height: 36px !important;
  max-height: 96px !important;
  height: 36px;
  padding: 6px 4px;
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.35;
  background: transparent;
  color: inherit;
  overflow-y: auto;
  cursor: default;
}
.ps-composer-input[readonly] {
  opacity: 0.95;
}
.ps-composer-input::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
@media (min-width: 1440px) {
  .ps-gpt .ps-composer.gpt-composer,
  .ps-composer--row {
    align-items: flex-end;
    min-height: 92px;
    padding: 10px 8px 10px 14px;
  }
  .ps-composer-input {
    min-height: 76px !important;
    max-height: 168px !important;
    height: 76px;
    padding: 8px 4px;
    line-height: 1.45;
  }
}
.ps-gpt .gpt-send,
.ps-gpt .gpt-send.is-ready {
  background: #0F6B6B !important;
  color: var(--paper) !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  border-radius: 10px !important;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(15, 107, 107, 0.28);
  border: none;
}
.ps-gpt .gpt-send.is-ready:hover {
  background: color-mix(in srgb, var(--brand) 82%, var(--ink)) !important;
  filter: none;
}
.ps-pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0.35rem 0 0;
  line-height: 1.7;
  font-size: inherit;
}
.ps-gpt .gpt-msg.ai .gpt-bubble .sim-source-badge { margin-bottom: 0; }

@media (max-width: 720px) {
  .ps-mode span:not(.ps-mode-ico) {
    max-width: 8.5ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ps-live-btn [data-live-label] { display: none; }
  .ps-lead { display: none; }
  .ps-hero-ico { width: 34px; height: 34px; border-radius: 10px; }
  .ps-gpt .gpt-stage { padding: 14px 12px 12px; }
  .ps-gpt .gpt-composer-wrap,
  .ps-composer-panel { padding: 8px 12px 12px; }
  .ps-reply-body { font-size: 15px; line-height: 1.7; }
  .ps-gpt .sim-generated-image,
  .ps-reply-body .sim-generated-image {
    max-width: 100%;
  }
  .ps-gpt .sim-generated-image img,
  .ps-reply-body .sim-generated-image img {
    max-height: min(280px, 45vh);
  }
  .ps-tech-modal-dialog { padding: 0 16px 14px; }
  .ps-tech-modal-dialog::before { margin: 0 -16px 14px; }
}

/* Technique info popup */
.ps-tech-chip { cursor: pointer; }
.ps-tech-modal[hidden] { display: none !important; }
.ps-tech-modal {
  --ps-tech-c: #0F6B6B;
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ps-tech-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 40, 0.45);
  backdrop-filter: blur(5px);
  cursor: pointer;
}
.ps-tech-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(86vh, 640px);
  overflow-y: auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ps-tech-c) 10%, var(--surface)) 0%, var(--surface) 42%),
    var(--surface);
  border-radius: 20px;
  border: 1px solid var(--line-mid);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 22px 52px rgba(15, 28, 40, 0.2);
  padding: 0 22px 18px;
  animation: summaryModalIn 0.22s ease both;
}
.ps-tech-modal-dialog::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -22px 18px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--ps-tech-c), color-mix(in srgb, var(--ps-tech-c) 40%, var(--ink)));
}
.ps-tech-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ps-tech-modal-x:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
}
.ps-tech-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 28px 12px 0;
}
.ps-tech-modal-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ps-tech-c);
  background: color-mix(in srgb, var(--ps-tech-c) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ps-tech-c) 24%, transparent);
}
.ps-tech-modal-head-text { min-width: 0; }
.ps-tech-modal-kicker {
  margin: 0 0 4px;
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ps-tech-c) 24%, transparent);
  background: color-mix(in srgb, var(--ps-tech-c) 8%, var(--surface));
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-tech-c);
}
.ps-tech-modal-title {
  margin: 6px 0 4px;
  font-family: "Noto Serif Bengali", "Noto Sans Bengali", serif;
  font-size: 1.22rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}
.ps-tech-modal-blurb {
  margin: 0;
  font-size: 13.5px;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
  line-height: 1.45;
}
.ps-tech-modal-body p {
  margin: 0 0 10px;
  font-family: "Noto Sans Bengali", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.72;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.ps-tech-modal-body p:last-child { margin-bottom: 0; }
.ps-tech-modal-example {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ps-tech-c) 5%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--ps-tech-c) 16%, var(--line));
}
.ps-tech-modal-ex-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ps-tech-c) 70%, #6B7280);
}
.ps-tech-modal-ex {
  margin: 0;
  white-space: pre-wrap;
  font-family: "Noto Sans Bengali", "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.ps-tech-modal-tip {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ps-tech-c) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ps-tech-c) 18%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ps-tech-c) 82%, var(--ink));
}
.ps-tech-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}
.ps-tech-modal-ok {
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: "Noto Sans Bengali", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ps-tech-c);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ps-tech-c) 28%, transparent);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ps-tech-modal-ok:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
body.ps-tech-modal-open { overflow: hidden; }
body.is-content-fullscreen #contentColumn .ps-tech-modal,
#contentColumn:fullscreen .ps-tech-modal,
#contentColumn:-webkit-full-screen .ps-tech-modal {
  z-index: 120;
}

/* Studio: footer in flow under content ? beat fixed rule with higher specificity */
body[data-layout="2"].studio-focus #contentColumn {
  padding-bottom: 0 !important;
}
body[data-layout="2"].studio-focus #contentColumn > .content-nav-foot,
body[data-layout="2"].studio-focus #contentColumn > footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  z-index: 2;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body[data-layout="2"].studio-focus #contentColumn > .content-nav-foot > div,
body[data-layout="2"].studio-focus .footer-nav-inner {
  background: transparent !important;
  min-height: 48px;
  box-shadow: none !important;
  border: none !important;
}
body[data-layout="2"].studio-focus #stageWrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide legacy FAB by default when header/footer chat exist */
.ai-tutor-fab[hidden] { display: none !important; }

.nav-item.is-active .nav-type-ico,
.nav-item.is-active.is-done .nav-type-ico {
  background: var(--nav-progress, #2E8B3A);
  border-color: var(--nav-progress, #2E8B3A);
  color: #fff;
  box-shadow: none;
}
.nav-item.is-active .nav-type-ico iconify-icon {
  color: #fff !important;
}
.nav-item.is-done:not(.is-active) .nav-type-ico {
  background: var(--nav-bg, #E8F3EB);
  border-color: var(--nav-ring, var(--line-mid));
  color: var(--nav-c, rgba(21, 42, 50, 0.62));
  box-shadow: none;
}
.nav-item .nav-label {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.nav-item.is-active .nav-label {
  color: var(--deep);
}
.nav-item .nav-label { font-size: 13.5px !important; font-weight: 500; }
@media (min-width: 1024px) {
  .nav-item .nav-label { font-size: 14.5px !important; }
  .sidebar-section-head { font-size: 14px; }
  .sidebar-unit-label { font-size: 15.5px; }
}

/* ============================================================
   Unit 4 ? simulation-first visuals (u4v)
   ============================================================ */
.u4v-host { width: 100%; max-width: 980px; margin: 0 auto; }
.u4v-sim .u4v-shell { padding: 0 0 12px; }
.u4v-lab-head { margin-bottom: 14px; }
.u4v-pill {
  display: inline-flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 82%, var(--ink));
  background: color-mix(in srgb, var(--brand, #0F6B6B) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent);
}
.u4v-lead {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--read-muted);
  line-height: 1.5;
}
.u4v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 6px 4px 0;
  padding: 9px 14px;
  border-radius: 11px;
  border: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand, #0F6B6B) 92%, var(--surface)), var(--brand, #0F6B6B));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
}
.u4v-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.u4v-btn--ghost {
  background: var(--surface);
  color: var(--brand, #0F6B6B);
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  box-shadow: none;
}
.u4v-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  border: 1px solid rgba(15, 107, 107, 0.18);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.u4v-chip:hover { transform: translateY(-1px); color: var(--ink); }
.u4v-chip.is-on,
.er-chip.is-on {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 35%, transparent);
  color: var(--brand);
  font-weight: 650;
}
.u4v-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.84rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  line-height: 1.45;
}
.u4v-status.is-ok { color: #2F8F5B; font-weight: 600; }
.u4v-status.is-bad { color: #C45C4A; font-weight: 600; }

/* Lab inputs ? don't inherit heavy label weight into textareas */
.u4v-lab input,
.u4v-lab textarea,
.u4v-sim input,
.u4v-sim textarea {
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.u4v-lab input::placeholder,
.u4v-lab textarea::placeholder,
.u4v-sim input::placeholder,
.u4v-sim textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-weight: 400;
}

/* ---- GenAI live lab ---- */
.gc-compare {
  position: relative;
}
.gc-compare .u4v-lab-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.gc-compare .u4v-lead {
  max-width: 42rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.gc-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 4px 0 2px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .gc-stage { grid-template-columns: 1fr; gap: 16px; }
  .gc-stage::before { display: none; }
}
/* Soft VS divider between panels */
.gc-stage::before {
  content: "vs";
  position: absolute;
  z-index: 3;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background:
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid rgba(26, 35, 50, 0.1);
  box-shadow:
    0 6px 18px rgba(20, 35, 50, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.gc-lab {
  --gc: #0F6B6B;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--gc) 18%, var(--line));
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--gc) 7%, var(--surface)) 0%,
      var(--surface) 42%,
      color-mix(in srgb, var(--gc) 4%, var(--surface-2)) 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 14px 32px -12px rgba(20, 35, 50, 0.12);
  overflow: hidden;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.gc-lab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 40px -14px rgba(20, 35, 50, 0.14);
}
.gc-lab.is-running {
  transform: scale(0.995);
}
.gc-lab.is-done {
  border-color: color-mix(in srgb, var(--gc) 42%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gc) 28%, transparent),
    0 16px 36px -12px color-mix(in srgb, var(--gc) 22%, rgba(20, 35, 50, 0.12));
}
.gc-lab-top {
  position: relative;
  z-index: 1;
}
.gc-lab-top h3 {
  margin: 8px 0 4px;
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gc-lab-top p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 450;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
  line-height: 1.45;
}
.gc-lab-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc);
  background: color-mix(in srgb, var(--gc) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gc) 16%, transparent);
}
.gc-lab-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 18%, transparent);
}
.gc-viewport {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: 190px;
  min-height: 190px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 70% at 50% 40%, var(--surface), var(--surface-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 8px 20px -10px rgba(20, 35, 50, 0.12);
}
.gc-viewport--scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 35, 50, 0.08), transparent 28%, transparent 72%, rgba(20, 35, 50, 0.12)),
    linear-gradient(90deg, rgba(47, 111, 173, 0.08), transparent 30%, transparent 70%, rgba(47, 111, 173, 0.06));
  z-index: 1;
}
.gc-viewport--gen {
  background:
    linear-gradient(180deg, #fbfcfd, #f0f4f6);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--gc, #0F6B6B) 26%, rgba(26, 35, 50, 0.1));
}
.gc-lab--gen .gc-lab-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gc-live-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--line);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.gc-live-badge.is-on {
  background: color-mix(in srgb, #0F6B6B 14%, var(--surface));
  color: #0F6B6B;
}
.gc-prompt-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.gc-prompt {
  width: 100%;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gc, #0F6B6B) 20%, rgba(26, 35, 50, 0.1));
  background: var(--surface);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(20, 35, 50, 0.03);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gc-prompt:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gc, #0F6B6B) 70%, var(--ink));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--gc, #0F6B6B) 16%, transparent),
    inset 0 1px 2px rgba(20, 35, 50, 0.02);
}
.gc-prompt[readonly] {
  cursor: default;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  background: color-mix(in srgb, var(--gc, #0F6B6B) 5%, var(--surface-2));
  border-color: color-mix(in srgb, var(--gc, #0F6B6B) 14%, var(--line));
  box-shadow: none;
  user-select: text;
}
.gc-prompt[readonly]:focus {
  border-color: color-mix(in srgb, var(--gc, #0F6B6B) 14%, var(--line));
  box-shadow: none;
}
.gc-photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #e8f0f4, var(--surface-2));
}
.gc-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.45s ease;
}
.gc-lab:hover .gc-photo-img {
  transform: scale(1.04);
}
.gc-photo-emoji,
.gc-photo-ico {
  font-size: 3.2rem;
  filter: drop-shadow(0 4px 12px rgba(15, 107, 107, 0.15));
  color: var(--brand, #0F6B6B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gc-photo-ico iconify-icon,
.gc-photo-ico svg { width: 48px; height: 48px; }
.gc-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--gc, #2F6FAD) 70%, var(--surface)),
    #7dd3fc,
    transparent
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--gc, #2F6FAD) 50%, transparent);
  opacity: 0;
}
.gc-lab.is-running .gc-scanline {
  opacity: 1;
  animation: gcScan 0.9s linear infinite;
}
@keyframes gcScan {
  from { top: 8%; }
  to { top: 90%; }
}
.gc-bars {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid color-mix(in srgb, var(--gc, #2F6FAD) 16%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(20, 35, 50, 0.12);
  animation: gcBarsIn 0.35s ease;
}
@keyframes gcBarsIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.gc-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 650;
}
.gc-bar i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc, #2F6FAD) 10%, var(--surface-2));
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
}
.gc-bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--w);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gc, #2F6FAD) 85%, #0F6B6B),
    color-mix(in srgb, var(--gc, #2F6FAD) 55%, #7dd3fc)
  );
  border-radius: inherit;
  animation: gcBar 0.6s ease;
}
@keyframes gcBar { from { width: 0; } }
.gc-gen-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  font-size: 0.78rem;
  line-height: 1.45;
}
.gc-gen-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 16px;
  color: var(--gc, #0F6B6B);
  background: color-mix(in srgb, var(--gc, #0F6B6B) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gc, #0F6B6B) 14%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--gc, #0F6B6B) 10%, transparent);
}
.gc-gen-empty strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.gc-gen-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: color-mix(in srgb, var(--gc, #0F6B6B) 6%, rgba(255, 255, 255, 0.92));
  color: var(--gc, #0F6B6B);
  font-size: 0.82rem;
  font-weight: 650;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.gc-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--gc, #0F6B6B) 16%, transparent);
  border-top-color: var(--gc, #0F6B6B);
  animation: gcSpin 0.8s linear infinite;
}
@keyframes gcSpin {
  to { transform: rotate(360deg); }
}
.gc-gen-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  display: block;
}
.gc-gen-art.is-pop {
  opacity: 1;
}
.gc-gen-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--line);
}
.gc-gen-art.is-pop { animation: gcPop 0.7s ease forwards; }
@keyframes gcPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.gc-gen-blob {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 40% 60% 55% 45%;
  background: radial-gradient(circle at 30% 30%, #fde68a, #f97316 55%, #0F6B6B);
  top: 28%; left: 28%;
  filter: blur(0.2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  animation: gcBlob 2.4s ease-in-out infinite;
}
.gc-gen-blob--2 {
  width: 54px; height: 54px;
  top: 48%; left: 52%;
  background: radial-gradient(circle at 40% 30%, #fff7ed, #fb923c 60%, #134e4a);
  animation-delay: 0.3s;
}
@keyframes gcBlob {
  0%, 100% { border-radius: 40% 60% 55% 45%; }
  50% { border-radius: 55% 45% 40% 60%; }
}
.gc-gen-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #d1fae5;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
}
.gc-run.u4v-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 2px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gc) 88%, var(--surface)),
    var(--gc)
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 22px -8px color-mix(in srgb, var(--gc) 45%, transparent);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.gc-run.u4v-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 14px 26px -8px color-mix(in srgb, var(--gc) 50%, transparent);
}
.gc-out {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  min-height: 1.3em;
  background: color-mix(in srgb, var(--gc) 5%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--gc) 8%, transparent);
  line-height: 1.4;
}
.gc-lab.is-done .gc-out {
  color: var(--gc);
  background: color-mix(in srgb, var(--gc) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--gc) 18%, transparent);
}

/* ---- Model/tool stack ---- */
.mtl-sim {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 12px;
}
.mtl-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mtl-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.mtl-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 4px 2px 10px;
  border-radius: 0;
  border: none;
  background: transparent;
  min-height: 0;
  transition: transform 0.15s ease;
}
.mtl-drum {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding-bottom: 4px;
}
@media (max-width: 900px) {
  .mtl-sim {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .mtl-stack {
    grid-template-columns: 1fr;
  }
}
.mtl-device {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 40, 50, 0.08);
  min-height: 220px;
}
.mtl-device.is-alive {
  box-shadow: 0 0 0 2px color-mix(in srgb, #0F6B6B 40%, transparent), 0 12px 28px rgba(15, 107, 107, 0.18);
}
.mtl-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #f8fbfb, #f1f5f5);
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mtl-chrome span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
}
.mtl-chrome span:nth-child(2) { background: #eab308; }
.mtl-chrome span:nth-child(3) { background: #22c55e; }
.mtl-chrome b { margin-left: 8px; font-weight: 600; }
.mtl-chat-fake {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
  min-height: 160px;
}
.mtl-bubble {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.35;
}
.mtl-bubble--user {
  align-self: flex-end;
  background: #0F6B6B;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.mtl-bubble--ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 4px;
  padding: 14px 16px;
}
.mtl-bubble--ai i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #94a3b8;
  animation: mtlDot 1s ease infinite;
}
.mtl-bubble--ai i:nth-child(2) { animation-delay: 0.15s; }
.mtl-bubble--ai i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mtlDot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.mtl-slot.is-over {
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px);
}
.mtl-slot.is-over .ts-bucket-rim {
  border-color: color-mix(in srgb, var(--bk, var(--app, #0F6B6B)) 88%, var(--ink));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 0 color-mix(in srgb, var(--bk, var(--app, #0F6B6B)) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 4px 7px rgba(20, 35, 50, 0.1),
    inset 0 -2px 3px rgba(255, 255, 255, 0.6);
  transform: scaleY(1.1);
}
.mtl-slot.is-over .mtl-drum-vessel {
  box-shadow:
    inset 0 16px 22px -10px rgba(20, 35, 50, 0.07),
    inset 0 -4px 8px rgba(20, 35, 50, 0.03),
    0 12px 22px -4px rgba(20, 35, 50, 0.1);
}
.mtl-slot.is-correct,
.mtl-slot.is-wrong {
  border: none;
  background: transparent;
}
.mtl-slot.is-correct .ts-bucket-rim {
  border-color: #2F8F5B;
}
.mtl-slot.is-wrong .ts-bucket-rim {
  border-color: #C45C4A;
}
.mtl-slot-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mtl-slot-ico {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--app, var(--secondary, #2F6FAD)) 16%, var(--surface));
  color: var(--app, var(--secondary, #2F6FAD));
  border: 1px solid color-mix(in srgb, var(--app, var(--secondary, #2F6FAD)) 12%, transparent);
}
.mtl-slot-ico.ts-app-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.mtl-slot-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtl-slot-meta { font-size: 0.82rem; font-weight: 650; color: color-mix(in srgb, var(--brand, #0F6B6B) 30%, var(--ink)); }
.mtl-slot-hint { font-size: 0.72rem; font-weight: 450; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.mtl-drum {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding-bottom: 4px;
}
.mtl-drum-vessel {
  min-height: 64px;
  margin-bottom: 8px;
  padding: 12px 10px 14px;
}
.mtl-drum .ts-bucket-drop {
  min-height: 36px;
}
.mtl-drop {
  min-height: 36px;
  width: 100%;
}
.mtl-drop-ph { font-size: 0.72rem; color: color-mix(in srgb, var(--ink) 35%, transparent); }
.mtl-placed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--app, var(--secondary, #2F6FAD)) 16%, var(--surface));
  font-weight: 600;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--app, var(--secondary, #2F6FAD)) 75%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--app, var(--secondary, #2F6FAD)) 18%, transparent);
  cursor: pointer;
  max-width: 100%;
}
.mtl-placed-ico {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  pointer-events: none;
}
.mtl-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--secondary, #2F6FAD) 16%, transparent);
  background: color-mix(in srgb, var(--secondary, #2F6FAD) 4%, var(--surface));
  min-width: 0;
}
.mtl-chips-label {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.mtl-chip.ts-app {
  width: auto;
  min-width: 76px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font-weight: inherit;
}
.mtl-chip.ts-app[hidden] {
  display: none !important;
}
.mtl-chip.is-dragging { opacity: 0.45; }

/* ---- Tool sorter apps ---- */
.ts-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 4px 0 8px;
  min-height: 88px;
  background: transparent;
  border: none;
}
.ts-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  cursor: grab;
  transition: transform 0.15s ease;
}
.ts-app:hover { transform: translateY(-2px); }
.ts-app.is-dragging { opacity: 0.4; }
.ts-app-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--app, #0F6B6B) 14%, var(--surface));
  color: var(--app, #0F6B6B);
  border: 1px solid color-mix(in srgb, var(--app, #0F6B6B) 18%, transparent);
  box-shadow: 0 1px 4px rgba(15, 40, 50, 0.04);
}
.ts-app-name {
  font-size: 0.68rem;
  font-weight: 450;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  text-align: center;
  line-height: 1.3;
}
.ts-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 22px;
  align-items: stretch;
  justify-items: center;
}
@media (max-width: 720px) {
  .ts-buckets {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }
}
.ts-bucket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 200px;
  padding: 0 0 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: 128px;
  overflow: visible;
  transition: transform 0.18s ease;
}
.ts-bucket.is-over {
  transform: translateY(-2px) scale(1.02);
}
.ts-bucket-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--bk, #0F6B6B);
  line-height: 1.3;
  padding: 0 4px;
  margin-bottom: 14px;
  position: relative;
  z-index: 3;
}
.ts-bucket-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  color: var(--bk, #0F6B6B);
  background: color-mix(in srgb, var(--bk, #0F6B6B) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk, #0F6B6B) 16%, transparent);
}
.ts-bucket-label {
  min-width: 0;
}
.ts-bucket-rim {
  position: relative;
  z-index: 2;
  display: block;
  height: 16px;
  margin: 0 0 -8px;
  border-radius: 50%;
  /* Recessed mouth — thin deep border only here */
  background:
    radial-gradient(
      105% 140% at 50% 18%,
      #eceef1 0%,
      #f5f6f8 28%,
      #fbfbfc 52%,
      #f0f1f3 78%,
      #e4e6ea 100%
    );
  border: 2px solid var(--bk, #0F6B6B);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 0 color-mix(in srgb, var(--bk, #0F6B6B) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 3px 6px rgba(20, 35, 50, 0.08),
    inset 0 -2px 3px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Inner cavity floor — reads as open drum mouth */
.ts-bucket-rim::after {
  content: "";
  position: absolute;
  inset: 3px 10% 4px;
  border-radius: 50%;
  background:
    radial-gradient(
      120% 100% at 50% 35%,
      var(--surface-2) 0%,
      #f2f3f5 55%,
      var(--line) 100%
    );
  box-shadow:
    inset 0 2px 4px rgba(20, 35, 50, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.ts-bucket-vessel {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 88px;
  margin: 0 3px 10px;
  padding: 16px 12px 18px;
  /* Soft white cylinder — less gray */
  border-radius: 0 0 20px 20px / 0 0 16px 16px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 28%,
      rgba(255, 255, 255, 0.7) 46%,
      rgba(255, 255, 255, 0.25) 54%,
      transparent 72%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(20, 35, 50, 0.045) 0%,
      rgba(20, 35, 50, 0.015) 12%,
      transparent 22%,
      transparent 78%,
      rgba(20, 35, 50, 0.012) 88%,
      rgba(20, 35, 50, 0.035) 100%
    ),
    linear-gradient(
      180deg,
      #f7f8f9 0%,
      var(--surface-2) 40%,
      #f5f6f8 100%
    );
  border: 1.5px solid color-mix(in srgb, var(--bk, #0F6B6B) 42%, transparent);
  border-top: none;
  box-shadow:
    inset 0 16px 20px -12px rgba(20, 35, 50, 0.05),
    inset 0 -4px 8px rgba(20, 35, 50, 0.02),
    inset 1px 0 0 rgba(255, 255, 255, 0.5),
    0 10px 18px -4px rgba(20, 35, 50, 0.08),
    0 2px 4px rgba(20, 35, 50, 0.03);
  transition:
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}
/* Dual hoop ridges — metal band read */
.ts-bucket-vessel::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 46%;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(20, 35, 50, 0.04) 45%,
      rgba(20, 35, 50, 0.07) 55%,
      rgba(255, 255, 255, 0.6) 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(20, 35, 50, 0.08);
  pointer-events: none;
  opacity: 0.7;
}
/* Bottom ellipse + grounded contact shadow */
.ts-bucket-vessel::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 15px;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      var(--surface-2) 0%,
      #eceef1 100%
    );
  border: none;
  box-shadow:
    0 4px 8px rgba(20, 35, 50, 0.07),
    0 1px 2px rgba(20, 35, 50, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 3px rgba(20, 35, 50, 0.04);
  pointer-events: none;
}
.ts-bucket.is-over .ts-bucket-rim {
  border-color: color-mix(in srgb, var(--bk, #0F6B6B) 72%, var(--ink));
  border-width: 2.5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 0 color-mix(in srgb, var(--bk, #0F6B6B) 28%, transparent),
    0 0 0 3px color-mix(in srgb, var(--bk, #0F6B6B) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 4px 7px rgba(20, 35, 50, 0.1),
    inset 0 -2px 3px rgba(255, 255, 255, 0.6);
  transform: scaleY(1.1);
}
.ts-bucket.is-over .ts-bucket-vessel {
  border-color: color-mix(in srgb, var(--bk, #0F6B6B) 58%, transparent);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 28%,
      rgba(255, 255, 255, 0.55) 46%,
      rgba(255, 255, 255, 0.2) 54%,
      transparent 72%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(20, 35, 50, 0.055) 0%,
      rgba(20, 35, 50, 0.02) 12%,
      transparent 22%,
      transparent 78%,
      rgba(20, 35, 50, 0.015) 88%,
      rgba(20, 35, 50, 0.045) 100%
    ),
    linear-gradient(
      180deg,
      #f0f1f3 0%,
      #f7f8f9 40%,
      #eef0f2 100%
    );
  box-shadow:
    inset 0 16px 22px -10px rgba(20, 35, 50, 0.07),
    inset 0 -4px 8px rgba(20, 35, 50, 0.03),
    0 12px 22px -4px rgba(20, 35, 50, 0.1),
    0 0 0 2px color-mix(in srgb, var(--bk, #0F6B6B) 14%, transparent);
}
.ts-bucket.is-over .ts-bucket-vessel::after {
  background:
    linear-gradient(
      180deg,
      #eef0f2,
      #e6e8eb
    );
}
.ts-bucket-drop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 4px 2px 0;
  border-radius: 10px;
}
/* Empty cavity cue — quiet, not color-heavy */
.ts-bucket-drop:empty::before {
  content: "এখানে রাখুন";
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(90, 100, 112, 0.72);
  opacity: 0.9;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ts-placed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--app, #0F6B6B) 18%, transparent);
  background: color-mix(in srgb, var(--app, #0F6B6B) 12%, var(--surface));
  cursor: grab;
  font: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: none;
}
.ts-placed:hover {
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bk, #0F6B6B) 28%, transparent);
}
.ts-placed-ico {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app, #0F6B6B);
  border-radius: 11px;
  background: transparent;
  pointer-events: none;
  flex-shrink: 0;
}
.ts-placed-ico iconify-icon,
.ts-app-ico iconify-icon {
  pointer-events: none;
}
.ts-placed-name,
.ts-placed-x {
  display: none !important;
}
.ts-placed.is-ok {
  border-color: color-mix(in srgb, #2F8F5B 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #2F8F5B 18%, transparent);
}
.ts-placed.is-bad {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 18%, var(--surface));
  box-shadow:
    0 0 0 2px color-mix(in srgb, #C45C4A 35%, transparent),
    0 0 0 5px color-mix(in srgb, #C45C4A 12%, transparent);
  animation: tsWrongPulse 1.4s ease-in-out infinite;
}
.ts-placed.is-bad:hover {
  box-shadow:
    0 0 0 2px color-mix(in srgb, #C45C4A 45%, transparent),
    0 0 0 6px color-mix(in srgb, #C45C4A 16%, transparent);
}
.ts-placed.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
@keyframes tsWrongPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px color-mix(in srgb, #C45C4A 35%, transparent),
      0 0 0 5px color-mix(in srgb, #C45C4A 12%, transparent);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 3px color-mix(in srgb, #C45C4A 50%, transparent),
      0 0 0 8px color-mix(in srgb, #C45C4A 8%, transparent);
  }
}
.u2-chip-placed.is-bad,
.mtl-placed.is-bad,
.u2-formula-val.is-bad,
.u6-chip.is-placed.is-bad,
.u6-aud-chip.is-bad,
.u6-hub-slot.is-bad .u6-chip.is-placed {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 18%, var(--surface, #fff));
  box-shadow:
    0 0 0 2px color-mix(in srgb, #C45C4A 35%, transparent),
    0 0 0 5px color-mix(in srgb, #C45C4A 12%, transparent);
  animation: tsWrongPulse 1.4s ease-in-out infinite;
}

/* ---- LLM factory ---- */
.lp-factory {
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(15,107,107,0.08), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--ink);
  margin-bottom: 12px;
  border: 1px solid rgba(15, 107, 107, 0.14);
  box-shadow: 0 8px 24px rgba(15, 40, 50, 0.06);
}
.lp-belt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.lp-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lp-station.is-on { opacity: 1; transform: translateY(-2px); }
.lp-station.is-done { opacity: 0.85; }
.lp-station-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.18);
  color: var(--brand, #0F6B6B);
  box-shadow: 0 2px 8px rgba(15, 40, 50, 0.05);
}
.lp-station.is-on .lp-station-ico {
  background: #0F6B6B;
  color: #fff;
  border-color: #0F6B6B;
  box-shadow: 0 6px 16px rgba(15, 107, 107, 0.28);
}
.lp-label { font-size: 0.68rem; font-weight: 750; color: var(--ink); }
.lp-pipe {
  width: 22px;
  height: 3px;
  background: rgba(15, 107, 107, 0.16);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.lp-pipe span {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #0F6B6B, transparent);
  animation: lpFlow 1s linear infinite;
  opacity: 0;
}
.lp-station.is-on + .lp-pipe span,
.lp-station.is-done + .lp-pipe span { opacity: 1; }
@keyframes lpFlow {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
.lp-hud {
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.lp-token-stream {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 28px;
}
.lp-tok {
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand, #0F6B6B);
  opacity: 0.35;
}
.lp-token-stream.is-active .lp-tok {
  animation: lpTok 0.5s ease forwards;
}
.lp-token-stream.is-active .lp-tok:nth-child(2) { animation-delay: 0.08s; }
.lp-token-stream.is-active .lp-tok:nth-child(3) { animation-delay: 0.16s; }
.lp-token-stream.is-active .lp-tok:nth-child(4) { animation-delay: 0.24s; }
.lp-token-stream.is-active .lp-tok:nth-child(5) { animation-delay: 0.32s; }
@keyframes lpTok {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.lp-prob { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.lp-prob-row {
  display: grid;
  grid-template-columns: minmax(72px, 5.5rem) 1fr 52px;
  gap: 10px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink);
}
.lp-prob-row i {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 107, 107, 0.1);
  position: relative;
  overflow: hidden;
}
.lp-prob-row i::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--p);
  background: linear-gradient(90deg, #0F6B6B, #2dd4bf);
  animation: gcBar 0.5s ease;
}
.lp-stage-text { margin: 0; font-size: 0.88rem; font-weight: 650; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.lp-response {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.45;
  animation: gcPop 0.4s ease;
}
.lp-controls { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- Context window · clean minimal chat ---- */
.cm-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0;
  border-radius: 16px;
  border: 1px solid rgba(15, 40, 50, 0.08);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 40, 50, 0.03);
  min-height: 420px;
}
@media (max-width: 760px) {
  .cm-shell { grid-template-columns: 1fr; }
  .cm-side {
    border-right: 0;
    border-bottom: 1px solid rgba(15, 40, 50, 0.06);
    max-height: 150px;
  }
}
.cm-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  background: transparent;
  border-right: 1px solid rgba(15, 40, 50, 0.06);
  min-width: 0;
}
.cm-side-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 8px 8px;
}
.cm-side-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  border: 0;
  flex-shrink: 0;
}
.cm-side-head strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #3a4556;
  line-height: 1.25;
}
.cm-side-head span {
  display: block;
  font-size: 0.66rem;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  margin-top: 1px;
}
.cm-hist {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  padding: 0 2px;
}
.cm-hist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  transition: background 0.15s ease, opacity 0.2s ease, color 0.15s ease;
}
.cm-hist-item:hover {
  background: rgba(15, 40, 50, 0.04);
  color: var(--ink);
}
.cm-hist-ico {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--ink) 32%, transparent);
  display: inline-flex;
}
.cm-hist-line {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-hist-item.is-out {
  opacity: 0.38;
}
.cm-hist-item.is-out .cm-hist-line {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--ink) 28.000000000000004%, transparent);
}
.cm-shell.is-overflow .cm-side {
  background: transparent;
}
.cm-box {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
}
.cm-box-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid rgba(15, 40, 50, 0.06);
}
.cm-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cm-box-title strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2a3442;
  line-height: 1.2;
}
.cm-box-title span {
  display: block;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  margin-top: 1px;
}
.cm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a9a7a;
  box-shadow: none;
  flex-shrink: 0;
}
.cm-usage {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 220px);
  flex: 1;
  justify-content: flex-end;
}
.cm-meter {
  position: relative;
  flex: 1;
  max-width: 120px;
  height: 5px;
  border-radius: 999px;
  background: rgba(15, 40, 50, 0.08);
  overflow: hidden;
}
.cm-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #6b8f8f;
  transition: width 0.35s ease, background 0.25s ease;
}
.cm-fill.is-warn { background: #c4a06a; }
.cm-fill.is-over { background: #c47a6e; }
.cm-count {
  font-size: 0.74rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  white-space: nowrap;
}
.cm-count b { color: #3a4556; font-weight: 600; }
.cm-thread {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  max-height: 260px;
  min-height: 180px;
  background: var(--surface-2);
}
.cm-msg {
  position: relative;
  max-width: 86%;
  padding: 9px 12px 8px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  animation: cmMsgIn 0.22s ease both;
}
.cm-msg p { margin: 0; }
.cm-tok {
  display: inline-block;
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: 0.01em;
}
.cm-msg--user {
  align-self: flex-end;
  background: var(--brand, #0F6B6B);
  color: #fff;
  border: 1px solid var(--brand, #0F6B6B);
  border-bottom-right-radius: 4px;
}
.cm-msg--user .cm-tok {
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}
.cm-msg--ai {
  align-self: flex-start;
  background: var(--surface);
  color: #2a3442;
  border: 1px solid rgba(15, 40, 50, 0.07);
  border-bottom-left-radius: 4px;
  box-shadow: none;
}
.cm-msg--ai .cm-tok { color: color-mix(in srgb, var(--ink) 50%, transparent); opacity: 1; }
@keyframes cmMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.cm-msg--pdf {
  max-width: min(88%, 260px);
  padding-bottom: 10px;
}
.cm-pdf {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid rgba(15, 40, 50, 0.08);
}
.cm-pdf-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(15, 40, 50, 0.04);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  flex-shrink: 0;
}
.cm-pdf-copy { min-width: 0; }
.cm-pdf-copy strong {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2a3442;
}
.cm-msg--pdf .cm-pdf {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.cm-msg--pdf .cm-pdf-ico {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.cm-msg--pdf .cm-pdf-copy strong,
.cm-msg--pdf .cm-pdf-copy span {
  color: #fff;
}
.cm-msg--pdf .cm-pdf-copy span {
  opacity: 0.8;
}
.cm-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
}
.cm-quick .u4v-chip {
  border-color: rgba(15, 40, 50, 0.1) !important;
  color: color-mix(in srgb, var(--ink) 68%, transparent) !important;
  background: var(--surface) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.cm-quick .u4v-chip:hover {
  background: var(--surface-2) !important;
  border-color: rgba(15, 40, 50, 0.16) !important;
  color: var(--ink) !important;
}
.cm-chip-pdf {
  border-color: rgba(15, 40, 50, 0.1) !important;
  color: color-mix(in srgb, var(--ink) 68%, transparent) !important;
  background: var(--surface) !important;
}
.cm-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 8px;
  padding: 5px 5px 5px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 40, 50, 0.1);
  background: var(--surface);
  box-shadow: none;
}
.cm-composer:focus-within {
  border-color: rgba(15, 107, 107, 0.28);
}
.cm-composer--pick {
  padding: 10px 14px;
}
.cm-pick-hint {
  margin: 0;
  flex: 1;
  font-size: 0.82rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  line-height: 1.35;
}
.cm-composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 450;
  color: var(--ink);
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  padding: 8px 0;
}
.cm-composer input::placeholder {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.cm-send {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand, #0F6B6B);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cm-send:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 86%, #000);
  transform: none;
}
.cm-send.is-sent { background: var(--output, #2F8F5B); }
.cm-send iconify-icon,
.cm-send svg { color: #fff; }
.cm-status {
  margin: 0 16px 14px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.cm-status.is-bad {
  color: #8f3a2e;
  font-weight: 650;
}

/* ---- RTFTC single prompt box ---- */
.rtftc-box {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #0F6B6B 16%, transparent);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 10px 28px rgba(15, 40, 50, 0.06);
}
.rtftc-box-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.rtftc-box-top .rtftc-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.rtftc-prompt {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #0F6B6B 22%, transparent);
  background: #0F6B6B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.rtftc-prompt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
}
.rtftc-prompt-bar .rtftc-chat-dot {
  background: #86efac;
  box-shadow: 0 0 8px rgba(134, 239, 172, 0.55);
}
.rtftc-prompt-body {
  padding: 16px 18px;
  min-height: 110px;
  max-height: 220px;
  overflow: auto;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
}
.rtftc-prompt-body.is-filled {
  color: #fff;
}
.rtftc-hint {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink, var(--ink)) 62%, transparent);
  background: color-mix(in srgb, #0F6B6B 5%, var(--surface));
  border: 1px solid color-mix(in srgb, #0F6B6B 10%, transparent);
}
.rtftc-hint.is-ready {
  color: var(--brand);
  font-weight: 650;
  background: color-mix(in srgb, #2F8F5B 8%, var(--surface));
  border-color: color-mix(in srgb, #2F8F5B 22%, transparent);
}
.rtftc-starters { margin-bottom: 10px; }
.rtftc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 640px) {
  .rtftc-grid { grid-template-columns: 1fr; }
}
.rtftc-field { display: flex; flex-direction: column; gap: 4px; }
.rtftc-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--rtftc-c, #2563A8);
  letter-spacing: 0.02em;
}
.rtftc-label b {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  font-size: 0.65rem;
  background: color-mix(in srgb, var(--rtftc-c, #2563A8) 14%, var(--surface));
  color: var(--rtftc-c, #2563A8);
}
.rtftc-field input,
.rtftc-field select {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 107, 107, 0.18);
  font-size: 0.85rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  background: var(--surface);
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  width: 100%;
  cursor: pointer;
}
.rtftc-field input:focus,
.rtftc-field select:focus {
  outline: none;
  border-color: #0F6B6B;
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.12);
}
.rtftc-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: color-mix(in srgb, #C45C4A 12%, var(--surface));
  color: #C45C4A;
  border: 1px solid color-mix(in srgb, #C45C4A 22%, transparent);
}
.rtftc-badge.is-mid {
  background: color-mix(in srgb, #C48A2A 12%, var(--surface));
  color: #C48A2A;
  border-color: color-mix(in srgb, #C48A2A 22%, transparent);
}
.rtftc-badge.is-strong {
  background: color-mix(in srgb, #2F8F5B 12%, var(--surface));
  color: #2F8F5B;
  border-color: color-mix(in srgb, #2F8F5B 22%, transparent);
}
.rtftc-chat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
}

/* legacy split layout (unused by builder; keep harmless) */
.rtftc-sim {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.rtftc-editor {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(37, 99, 168, 0.18);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.rtftc-chat {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: var(--surface);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px rgba(15, 40, 50, 0.08);
}
.rtftc-chat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f8fbfb, #f1f5f5);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.rtftc-chat-body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
}
.rtftc-bubble {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.rtftc-bubble--user {
  align-self: flex-end;
  background: var(--brand, #0F6B6B);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.rtftc-bubble--ai {
  align-self: flex-start;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom-left-radius: 4px;
}
.rtftc-bubble--ai.is-ready {
  color: #0F6B6B;
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
}

/* ---- Technique dual chat ---- */
.tp-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.tp-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 168, 0.2);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}
.tp-pill b { font-size: 0.82rem; }
.tp-pill span { font-size: 0.68rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.tp-pill.is-on {
  background: #2563A8;
  border-color: #2563A8;
  color: #fff;
}
.tp-pill.is-on span { color: rgba(255,255,255,0.75); }
.tp-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .tp-dual { grid-template-columns: 1fr; }
}
.tp-pane {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--surface);
  min-height: 180px;
}
.tp-pane header {
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tp-pane--weak header { background: rgba(196, 92, 74, 0.1); color: #C45C4A; }
.tp-pane--strong header { background: rgba(47, 143, 91, 0.12); color: #2F8F5B; }
.tp-pane .tp-bubble {
  margin: 8px 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.tp-bubble--user { background: color-mix(in srgb, var(--secondary) 16%, var(--surface)); color: var(--secondary); }
.tp-bubble--ai { background: var(--surface-2); color: var(--ink); }
.tp-bubble--ai.is-dim { opacity: 0.55; font-style: italic; }
.tp-bubble--ai.is-type { animation: gcPop 0.35s ease; }

/* ---- Iterative email (brand teal + connecting track) ---- */
.il-host { width: 100%; }
.il-stepper {
  --il-brand: var(--brand, #0F6B6B);
  position: relative;
  margin-bottom: 14px;
  padding: 4px 2px 2px;
}
.il-track {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--il-brand) 14%, #e8eef0);
  overflow: hidden;
  z-index: 0;
}
.il-track-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--il-brand) 75%, #2F8F5B),
    var(--il-brand)
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--il-brand) 40%, transparent);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.il-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.il-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  transition: color 0.2s ease;
}
.il-num {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--il-brand) 22%, transparent);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--il-brand) 70%, var(--ink));
  box-shadow: 0 0 0 4px #fff;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.il-lab {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.il-node:hover .il-num {
  border-color: color-mix(in srgb, var(--il-brand) 45%, transparent);
  transform: translateY(-1px);
}
.il-node.is-on {
  color: var(--brand);
}
.il-node.is-on .il-num {
  background: var(--il-brand);
  border-color: var(--il-brand);
  color: #fff;
  transform: scale(1.06);
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 7px color-mix(in srgb, var(--il-brand) 28%, transparent),
    0 8px 18px color-mix(in srgb, var(--il-brand) 28%, transparent);
  animation: ilPulse 0.55s ease;
}
.il-node.is-done {
  color: var(--brand);
}
.il-node.is-done .il-num {
  background: color-mix(in srgb, var(--il-brand) 12%, var(--surface));
  border-color: var(--il-brand);
  color: var(--il-brand);
}
@keyframes ilPulse {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1.06); }
}
.il-mail {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 16%, transparent);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 8px 22px rgba(15, 107, 107, 0.06);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.il-mail.is-swap {
  animation: ilMailIn 0.35s ease;
}
@keyframes ilMailIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.il-mail.is-ready {
  border-color: color-mix(in srgb, #2F8F5B 40%, transparent);
  box-shadow: 0 0 0 2px rgba(47, 143, 91, 0.18), 0 12px 28px rgba(47, 143, 91, 0.1);
}
.il-mail-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 7%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 12%, transparent);
  font-size: 0.8rem;
  font-weight: 550;
  color: rgba(12, 88, 88, 0.85);
}
.il-mail-ico {
  display: inline-flex;
  color: var(--brand, #0F6B6B);
}
.il-mail-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.88rem;
  color: var(--ink);
}
.il-mail-row b {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-weight: 700;
  font-size: 0.78rem;
}
.il-mail-body {
  margin: 0;
  padding: 12px 14px 14px;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 450;
  line-height: 1.55;
  min-height: 72px;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.il-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
@media (max-width: 520px) {
  .il-track { left: 8%; right: 8%; top: 16px; }
  .il-num { width: 32px; height: 32px; font-size: 0.72rem; }
  .il-lab { font-size: 0.7rem; }
}

/* ---- Create studio ? ChatGPT chips ? light + dark ---- */
.cs-host.u4v-host { max-width: none; }
.cs-shell {
  --cs-bg: #ffffff;
  --cs-bg-soft: #f7f7f8;
  --cs-bg-muted: #ececf1;
  --cs-surface: #ffffff;
  --cs-ink: #0d0d0d;
  --cs-muted: #6e6e80;
  --cs-line: rgba(0, 0, 0, 0.08);
  --cs-chip: #f4f4f4;
  --cs-chip-hover: #ececec;
  --cs-chip-on: #0d0d0d;
  --cs-chip-on-ink: #ffffff;
  --cs-accent: #10a37f;
  --cs-accent-soft: rgba(16, 163, 127, 0.12);
  --cs-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: var(--cs-ink);
  background: transparent;
}
.cs-shell[data-cs-theme="dark"] {
  --cs-bg: #212121;
  --cs-bg-soft: #2f2f2f;
  --cs-bg-muted: #3a3a3a;
  --cs-surface: #2f2f2f;
  --cs-ink: #ececec;
  --cs-muted: #b4b4b4;
  --cs-line: rgba(255, 255, 255, 0.1);
  --cs-chip: #3a3a3a;
  --cs-chip-hover: #444444;
  --cs-chip-on: #ececec;
  --cs-chip-on-ink: #0d0d0d;
  --cs-accent: #19c37d;
  --cs-accent-soft: rgba(25, 195, 125, 0.16);
  --cs-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 10px 28px rgba(0,0,0,0.35);
}
.cs-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.cs-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--cs-bg-muted);
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.cs-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--cs-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cs-tab:hover { color: var(--cs-ink); }
.cs-tab.is-on {
  background: var(--cs-surface);
  color: var(--cs-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.cs-shell[data-cs-theme="dark"] .cs-tab.is-on {
  background: #424242;
  box-shadow: none;
}
.cs-theme-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: var(--cs-chip);
  color: var(--cs-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cs-theme-btn:hover { background: var(--cs-chip-hover); }
.cs-panels { flex: 1; min-height: 0; overflow: auto; }
.cs-desk {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 12px;
}
@media (max-width: 800px) {
  .cs-desk { grid-template-columns: 1fr; }
}
.cs-mail-app,
.cs-gate,
.cs-ide,
.cs-cmp {
  border-radius: 16px;
  border: 1px solid var(--cs-line);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow);
}
.cs-mail-app { overflow: hidden; }
.cs-mail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--cs-bg-soft);
  border-bottom: 1px solid var(--cs-line);
  color: var(--cs-ink);
  font-weight: 700;
  font-size: 0.88rem;
}
.cs-mail-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cs-chip);
  color: var(--cs-muted);
}
.cs-blocks,
.cs-risks,
.cs-iter { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-blocks { padding: 12px 14px 4px; }
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: var(--cs-chip);
  color: var(--cs-ink);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-chip:hover { background: var(--cs-chip-hover); }
.cs-chip.is-on {
  background: var(--cs-chip-on);
  color: var(--cs-chip-on-ink);
}
.cs-chip.is-ok {
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
}
.cs-chip.is-bad {
  background: rgba(196, 92, 74, 0.14);
  color: #C45C4A;
}
.cs-chip--sm { padding: 5px 10px; font-size: 0.74rem; }
.cs-draft {
  margin: 8px 14px 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--cs-line);
  background: var(--cs-bg-soft);
  min-height: 110px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cs-ink);
}
.cs-draft-empty { margin: 0; color: var(--cs-muted); }
.cs-tone { display: block; padding: 0 14px 14px; }
.cs-tone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cs-ink);
  margin-bottom: 4px;
}
.cs-tone-val { color: var(--cs-accent); font-weight: 700; }
.cs-tone input[type="range"] {
  width: 100%;
  margin: 8px 0 4px;
  accent-color: var(--cs-accent);
}
.cs-tone-labels {
  display: flex;
  justify-content: space-between;
  font-style: normal;
  font-weight: 600;
  color: var(--cs-muted);
  font-size: 0.7rem;
}
.cs-gate {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.84rem;
}
.cs-gate-title {
  margin: 0;
  font-weight: 650;
  color: var(--cs-accent);
  font-size: 0.9rem;
}
.cs-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--cs-ink);
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cs-bg-soft);
}
.cs-check input { accent-color: var(--cs-accent); width: 16px; height: 16px; }
.cs-gate-hint { margin: 0; font-size: 0.72rem; color: var(--cs-muted); }
.cs-vibe-desk { display: flex; flex-direction: column; gap: 12px; }
.cs-ide { overflow: hidden; margin-bottom: 0; }
.cs-ide-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cs-bg-soft);
  border-bottom: 1px solid var(--cs-line);
  color: var(--cs-muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.cs-ide-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cs-ide-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 180px;
}
@media (max-width: 720px) {
  .cs-ide-split { grid-template-columns: 1fr; }
}
.cs-code {
  margin: 0;
  padding: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow: auto;
  background: #1a1a1a;
  color: #e8eef5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-right: 1px solid var(--cs-line);
  white-space: pre-wrap;
}
.cs-mock {
  display: flex;
  flex-direction: column;
  background: var(--cs-bg-soft);
  color: var(--cs-ink);
  min-height: 160px;
}
.cs-mock-bar { height: 10px; background: var(--cs-bg-muted); }
.cs-mock-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 0.88rem;
  font-weight: 650;
  text-align: center;
  transition: background 0.3s ease;
}
.cs-mock[data-ver="2"] .cs-mock-body {
  background: linear-gradient(90deg, var(--cs-accent-soft), transparent);
}
.cs-mock[data-ver="3"] .cs-mock-body {
  background: #111;
  color: #ececec;
}
.cs-mock[data-ver="4"] .cs-mock-body {
  background: linear-gradient(180deg, var(--cs-bg-soft), var(--cs-accent-soft));
}
.cs-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .cs-compare { grid-template-columns: 1fr; }
}
.cs-cmp {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
}
.cs-cmp b { color: var(--cs-accent); font-size: 0.88rem; }
.cs-cmp span { color: var(--cs-muted); line-height: 1.4; }
.cs-risks { margin-top: 2px; }
.cs-block, .cs-iter-btn, .cs-risk { display: none !important; }

body[data-layout="2"].studio-focus .cs-shell { height: 100%; }
body[data-layout="2"] .fit-panel-beat > .cs-host {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* ---- Ethics board (brand-aligned) ---- */
.et-host { width: 100%; }
.et-shell { max-width: none; }
.et-head { margin-bottom: 12px; }
.et-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.et-progress {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(15, 107, 107, 0.75);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 16%, transparent);
  font-variant-numeric: tabular-nums;
}
.et-progress.is-ready {
  color: #2F8F5B;
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
  border-color: color-mix(in srgb, #2F8F5B 22%, transparent);
}
.et-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 720px) {
  .et-layout { grid-template-columns: 1fr; }
}
.et-cases {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--surface);
}
.et-case {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 10px;
  text-align: left;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.et-case-tag {
  grid-column: 1;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 107, 107, 0.55);
  white-space: nowrap;
}
.et-case-text {
  grid-column: 2;
  min-width: 0;
}
.et-case-mark {
  grid-column: 3;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(15, 107, 107, 0.2);
  background: var(--surface);
  flex-shrink: 0;
}
.et-case:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface));
}
.et-case.is-active {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  color: var(--brand);
}
.et-case.is-active .et-case-tag { color: var(--brand); }
.et-case.is-active .et-case-mark {
  border-color: var(--brand, #0F6B6B);
  box-shadow: inset 0 0 0 4px var(--brand, #0F6B6B);
}
.et-case.is-ok {
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
  color: #2F8F5B;
}
.et-case.is-ok .et-case-tag { color: #2F8F5B; }
.et-case.is-ok .et-case-mark {
  border-color: #2F8F5B;
  background: #2F8F5B;
  box-shadow: none;
}
.et-case.is-ok .et-case-mark::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: center / 10px 10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.et-case.is-bad:not(.is-ok) {
  border-color: color-mix(in srgb, #C45C4A 30%, transparent);
}
.et-case.is-bad:not(.is-ok) .et-case-mark {
  border-color: #C45C4A;
}
.et-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--surface);
  min-height: 0;
}
.et-side-label {
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 107, 107, 0.65);
}
.et-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
}
.et-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.et-cat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  color: #0F6B6B;
  flex-shrink: 0;
}
.et-cat-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.et-cat-copy strong {
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, var(--ink));
  line-height: 1.25;
}
.et-cat-copy small {
  font-size: 0.68rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  line-height: 1.2;
}
.et-cat:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
}
.et-cat.is-pick {
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
}
.et-cat.is-pick .et-cat-ico {
  background: color-mix(in srgb, #2F8F5B 16%, var(--surface));
  color: #2F8F5B;
}
.et-cat.is-wrong {
  background: color-mix(in srgb, #C45C4A 8%, var(--surface));
  border-color: color-mix(in srgb, #C45C4A 30%, transparent);
  animation: etShake 0.35s ease;
}
.et-cat.is-wrong .et-cat-ico {
  background: color-mix(in srgb, #C45C4A 14%, var(--surface));
  color: #C45C4A;
}
@keyframes etShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.et-status {
  margin: 4px 0 0;
  min-height: 1.35em;
  font-size: 0.8rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  line-height: 1.4;
}
.et-status.is-ok { color: #2F8F5B; }
.et-status.is-bad { color: #C45C4A; }

/* ---- Decision stage ---- */
.ed-stage {
  padding: 4px;
  border-radius: 18px;
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(15, 107, 107, 0.08), transparent 60%),
    var(--surface-2);
  margin-bottom: 10px;
}
.ed-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: var(--surface);
  min-height: 150px;
  box-shadow: 0 8px 24px rgba(15, 40, 50, 0.06);
}
.ed-q { margin: 0 0 14px; font-size: 1.02rem; font-weight: 650; color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, var(--ink)); line-height: 1.4; }
.ed-choices { display: flex; flex-direction: column; gap: 8px; }
.ed-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  background: var(--surface);
  color: var(--brand, #0F6B6B);
  font-weight: 750;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ed-choice:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  border-color: var(--brand, #0F6B6B);
  transform: translateX(2px);
}
.ed-end-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 4px;
}
.ed-end-wrap.is-ok .ed-end-ico { color: #2F8F5B; }
.ed-end-wrap.is-bad .ed-end-ico { color: #C45C4A; }
.ed-end { margin: 0; font-size: 0.98rem; font-weight: 700; line-height: 1.45; }
.ed-end-wrap.is-ok .ed-end { color: #2F8F5B; }
.ed-end-wrap.is-bad .ed-end { color: #C45C4A; }

/* ---- Ethics policy builder ---- */
.er-board {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .er-board { grid-template-columns: 1fr; }
}
.er-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.er-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.er-chip:hover { transform: translateY(-1px); }
.er-chip.is-on {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 10%, var(--surface));
  border-color: var(--brand, #0F6B6B);
  color: var(--brand, #0F6B6B);
}
.er-summary {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface)));
  box-shadow: 0 8px 24px rgba(15, 40, 50, 0.06);
}
.er-summary-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--brand, #0F6B6B);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.er-summary ul { margin: 0 0 12px; padding-left: 18px; font-size: 0.88rem; line-height: 1.55; min-height: 80px; }
.er-meter {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
  overflow: hidden;
}
.er-meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand, #0F6B6B), #2dd4bf);
  transition: width 0.25s ease;
}
.er-meter.is-ready i { background: linear-gradient(90deg, #2F8F5B, #0F6B6B); }

body[data-layout="2"].studio-focus .cs-shell { height: 100%; }
body[data-layout="2"] .fit-panel-beat > .cs-host {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Unit 4 ? presentation polish (figures, replies, lab accents)
   ============================================================ */
.u4-figure-host {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
.u4-figure-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.u4-figure-panel--card {
  gap: 0;
}
.u4-fig-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.u4-fig-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.u4-fig-head--zoom-only {
  justify-content: flex-end;
  border-bottom: none;
  padding-bottom: 8px;
}
.u4-fig-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 107, 107, 0.65);
}
.u4-fig-title {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--brand);
  line-height: 1.35;
}
.u4-fig-title:empty {
  display: none;
}
.u4-fig-lead {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 450;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u4-fig-expand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  color: var(--brand);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.u4-fig-expand:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 36%, transparent);
}
.u4-fig-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px;
}
.u4-fig-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface));
  font-size: 0.78rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.u4-fig-chip b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 14%, var(--surface));
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
}
.u4-figure-panel--card .u4-figure {
  margin: 0;
  padding: 0 12px 12px;
}
.u4-figure-panel--card .u4-fig-media {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--paper, var(--paper)) 70%, var(--surface)));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 22px var(--line);
  padding: 8px;
}
.u4-figure-panel--card .u4-fig-img {
  border-radius: 8px;
  background: var(--surface);
}
.u4-fig-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 4%, var(--surface));
}
.u4-fig-foot-ico {
  color: #0F6B6B;
  flex-shrink: 0;
  margin-top: 2px;
}
.u4-fig-foot p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.u4-figure-gist {
  margin: 0;
}
.u4-figure-tip {
  margin: 0;
}
.u4-figure-panel .u4-fig-media {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
  background:
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--paper, var(--paper)) 70%, var(--surface)));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 28px rgba(21, 42, 50, 0.07);
  padding: 10px;
}
.u4-figure-panel .u4-fig-img {
  border-radius: 10px;
  background: var(--surface);
}
.u4-figure-panel .fig-caption {
  margin: 2px 4px 0;
  text-align: center;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 68%, transparent);
}

/* ---- Compact lesson detail cards (keywordHub-style) ---- */
.ld-card {
  --ld: var(--brand, #0F6B6B);
  margin: 0;
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.1);
  animation: khDetailIn 0.28s ease;
}
.ld-card + .ld-card {
  margin-top: 14px;
}
.ld-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ld-ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ld, #0F6B6B);
  flex-shrink: 0;
}
.ld-ico .tint-ico,
.ld-ico .ts-brand-mark {
  width: 32px;
  height: 32px;
}
.ld-copy { min-width: 0; }
.ld-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.ld-blurb {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--read-ink);
  line-height: 1.85;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}
.ld-blurb strong,
.ld-blurb b {
  font-weight: 600;
  color: var(--term, #2F6FAD);
}
/* Category tool rows stay secondary — not reading body */
.ld-top--cat .ld-blurb {
  font-size: 0.9rem;
  font-weight: 450;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  line-height: 1.55;
}
.ld-top--cat {
  --cat: var(--ld, #0F6B6B);
  margin-bottom: 0;
  padding-top: 14px;
  padding-bottom: 18px;
}
.ld-top--cat .ld-title {
  color: #2A3442;
  font-weight: 600;
  font-size: 0.97rem;
}
.ld-top--cat .ld-ico {
  color: var(--cat);
  width: 24px;
  height: 24px;
}
.ld-tool-chips,
.ld-tool-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 4px;
}
.ld-tool-tag {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}
.ld-tool-tag strong {
  font-weight: 700;
  color: var(--ink);
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  line-height: 1.35;
}
.brand-chip-ico {
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  opacity: 1;
}
.brand-chip-ico .ts-brand-mark {
  width: 15px;
  height: 15px;
  border-radius: 0;
  overflow: visible;
}
.brand-chip-ico .ts-brand-letter {
  display: none;
}
.brand-chip-ico .ts-brand-mark iconify-icon {
  color: var(--app, #0F6B6B) !important;
  filter: none;
  opacity: 1;
}
.brand-chip-name {
  padding-right: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.tint-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 28px;
  min-height: 28px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--app, #0F6B6B) 14%, var(--surface));
  color: var(--app, #0F6B6B) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app, #0F6B6B) 18%, transparent);
  line-height: 0;
  vertical-align: middle;
}
.tint-ico iconify-icon {
  color: inherit !important;
  display: block;
  flex-shrink: 0;
  margin: 0;
  line-height: 0;
}
/* Lesson cards: flat colored icons only — no tint tiles / chip fills */
.ld-card .tint-ico {
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--app, #0F6B6B) !important;
}
.ld-card .ld-ico .tint-ico {
  color: var(--cat, var(--ld, #0F6B6B)) !important;
}
.ld-points {
  padding-left: 0;
  display: grid;
  gap: 7px;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  margin: 0 0 14px;
  font-size: 0.88rem;
  font-weight: 450;
  line-height: 1.55;
  list-style: none;
}
/* display:grid hides native markers — draw bullets explicitly */
.ld-points > li {
  position: relative;
  padding-left: 1.1rem;
}
.ld-points > li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ld, #0F6B6B);
  font-weight: 700;
  line-height: 1.55;
}
.ld-cats {
  display: grid;
  gap: 0;
  margin: 0 0 14px;
}
.ld-top--cat:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ld-keys {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ld-keys-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(15, 107, 107, 0.8);
}
.ld-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  line-height: 1.55;
}
.ld-tags span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 500;
  color: #C9A227;
}
.ld-tags span:not(:last-child)::after {
  content: '\00a0\00b7\00a0';
  margin: 0 2px 0 6px;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
  font-weight: 400;
}
.ld-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 0.84rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

/* RTCFT hub letter badges */
.rtcft-hub .rtcft-letter {
  font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--kh, #0F6B6B) 12%, var(--surface)) !important;
  color: var(--kh, #0F6B6B) !important;
}
.rtcft-hub .kh-item.is-on .rtcft-letter {
  background: color-mix(in srgb, var(--kh, #0F6B6B) 18%, var(--surface)) !important;
  color: var(--kh, #0F6B6B) !important;
}
.rtcft-letter-lg {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kh, #0F6B6B) 12%, var(--surface));
  color: var(--kh, #0F6B6B) !important;
  font-family: var(--font-ui, "Plus Jakarta Sans"), sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}
.rtcft-example {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--kh, #0F6B6B) 16%, transparent);
  background: color-mix(in srgb, var(--kh, #0F6B6B) 6%, var(--surface));
}
.rtcft-example span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kh, #0F6B6B) 70%, transparent);
}
.rtcft-example q {
  display: block;
  quotes: none;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  font-style: normal;
}

.u4v-pill {
  --u4v-accent: var(--brand, #0F6B6B);
  color: var(--u4v-accent);
  background: color-mix(in srgb, var(--u4v-accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--u4v-accent) 22%, transparent);
}

.ps-reply-lead {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 70%, transparent);
}
.ps-reply-card {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 16%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 6%, var(--surface));
  padding: 12px;
  display: grid;
  gap: 4px;
}
.ps-reply-card--prompt {
  border-color: color-mix(in srgb, var(--prompt, #2563A8) 22%, transparent);
  background: color-mix(in srgb, var(--prompt, #2563A8) 7%, var(--surface));
}
.ps-reply-card--amber {
  border-color: color-mix(in srgb, var(--amber, #C48A2A) 22%, transparent);
  background: color-mix(in srgb, var(--amber, #C48A2A) 8%, var(--surface));
}
.ps-reply-card--indigo {
  border-color: color-mix(in srgb, var(--indigo, #4A5D8A) 22%, transparent);
  background: color-mix(in srgb, var(--indigo, #4A5D8A) 8%, var(--surface));
}
.ps-reply-card .ps-reply-meta {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 55%, transparent);
}
.ps-reply-card .ps-reply-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 30%, var(--ink));
}
.ps-reply-card .ps-reply-body {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink, var(--ink));
}
.ps-reply-steps {
  display: grid;
  gap: 6px;
}
.ps-reply-step {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 10%, transparent);
  background: var(--surface);
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--ink, var(--ink));
}
.ps-reply-code {
  margin: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--moss, #3F6F4E) 22%, transparent);
  background: var(--ink);
  color: #e8eef5;
  padding: 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.kh-host .kh-sub {
  color: color-mix(in srgb, var(--ink, var(--ink)) 62%, transparent);
}

body[data-layout="2"] .read-panel .lesson-opener + .gist-callout,
body[data-layout="2"] .read-panel .vb + .tip-callout,
body[data-layout="2"] .read-panel .gist-callout {
  margin-top: 12px;
}

/* ---- Unit 4 ? Token lab / Prob / Prompt upgrade / Writing / Glossary ---- */
.tl-samples,
.pu-tabs,
.wp-modes,
.ge-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tl-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.tl-input-wrap textarea,
.wp-pane textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--teal, #0F6B6B) 20%, transparent);
  background: var(--surface);
  padding: 12px 14px;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  resize: vertical;
  min-height: 72px;
}
.tl-actions,
.pn-actions,
.wp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
}
.tl-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--teal, #0F6B6B) 85%, var(--ink));
}
.tl-stream {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--teal, #0F6B6B) 28%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--teal, #0F6B6B) 5%, var(--surface)));
  margin-bottom: 12px;
  overflow: visible;
}
.tl-tok {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 2.75rem;
  padding: 8px 12px 6px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--c, #0F6B6B) 35%, transparent);
  background: color-mix(in srgb, var(--c, #0F6B6B) 10%, var(--surface));
  color: var(--c, #0F6B6B);
  overflow: visible;
  animation: tlTokIn 0.45s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay: var(--d, 0ms);
}
.tl-tok em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: visible;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
}
.tl-tok b {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.65;
  line-height: 1;
}
@keyframes tlTokIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.tl-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .tl-compare { grid-template-columns: 1fr; }
}
.tl-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--teal, #0F6B6B) 18%, transparent);
  background: var(--surface);
}
.tl-card--warn {
  border-color: color-mix(in srgb, #C48A2A 35%, transparent);
  background: color-mix(in srgb, #C48A2A 7%, var(--surface));
}
.tl-card--gen {
  border-color: color-mix(in srgb, #2563A8 28%, transparent);
  background: color-mix(in srgb, #2563A8 6%, var(--surface));
}
.tl-card--gen strong { color: #2563A8; }
.tl-card-k { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.65; }
.tl-card strong { font-size: 1.35rem; color: var(--teal, #0F6B6B); }
.tl-card--warn strong { color: #C48A2A; }
.tl-card span:last-child { font-size: 0.78rem; color: color-mix(in srgb, var(--ink, var(--ink)) 55%, transparent); }

.tl-lab .tl-sub {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink, var(--ink)) 62%, transparent);
}
.tl-pipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #0F6B6B 7%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, #0F6B6B 14%, transparent);
}
.tl-pipe-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink, var(--ink)) 55%, transparent);
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tl-pipe-step b {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: 0.68rem;
  background: color-mix(in srgb, #0F6B6B 12%, var(--surface));
  color: #0F6B6B;
}
.tl-pipe-step.is-on {
  color: var(--brand);
  border-color: color-mix(in srgb, #0F6B6B 35%, transparent);
  background: color-mix(in srgb, #0F6B6B 10%, var(--surface));
}
.tl-pipe-arr {
  color: color-mix(in srgb, #0F6B6B 45%, transparent);
  font-size: 0.85rem;
}
.tl-panel {
  margin-bottom: 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #0F6B6B 16%, transparent);
  background: var(--surface);
  overflow: hidden;
}
.tl-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--brand);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.tl-panel-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tl-panel-hint {
  font-size: 0.75rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--ink, var(--ink)) 50%, transparent);
}
.tl-panel .tl-stream {
  margin: 0;
  border: 0;
  border-radius: 0;
  min-height: 72px;
}
.tl-empty {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 48%, transparent);
  padding: 8px 4px;
}
.tl-tok--in {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tl-tok--in:hover,
.tl-tok--in:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--c, #0F6B6B) 22%, transparent);
  outline: none;
}
.tl-tok--dim {
  opacity: 0.78;
  filter: saturate(0.85);
}
.tl-tok--out {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #2563A8) 35%, transparent);
}
.tl-tok--out.is-flash {
  animation: tlTokIn 0.45s cubic-bezier(.34,1.4,.64,1) both, tlTokFlash 0.7s ease;
}
@keyframes tlTokFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #2563A8) 40%, transparent); }
  40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c, #2563A8) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.tl-embed-top { margin-bottom: 8px; }
.tl-embed-status {
  margin: 10px 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink, var(--ink)) 68%, transparent);
}
.tl-embed {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
  background: var(--surface);
  padding: 12px 14px 14px;
  overflow: visible;
  margin-bottom: 10px;
}
.tl-embed-label {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand);
  text-align: left;
}
.tl-embed-map {
  position: relative;
  height: 160px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 40%, color-mix(in srgb, #0F6B6B 8%, transparent), transparent 40%),
    radial-gradient(circle at 75% 60%, color-mix(in srgb, #C45C4A 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--paper, var(--paper)) 80%, var(--surface));
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: visible;
}
.tl-embed-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tl-embed-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.tl-embed-node.is-on .tl-embed-name {
  border-color: color-mix(in srgb, #0F6B6B 40%, transparent);
  background: color-mix(in srgb, #0F6B6B 8%, var(--surface));
  color: var(--brand);
}
.tl-embed-node.is-on .tl-embed-dot {
  transform: scale(1.12);
}
.tl-embed-dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--c, #0F6B6B);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c, #0F6B6B) 35%, transparent);
  animation: tlPulse 2.8s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.tl-embed-dot--lg { width: 32px; height: 32px; }
.tl-embed-node--b .tl-embed-dot { animation-delay: 0.4s; }
.tl-embed-node--c .tl-embed-dot { animation-delay: 0.8s; }
.tl-embed-name {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
  box-shadow: 0 2px 8px var(--line);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tl-embed-tag {
  position: absolute;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.tl-embed-tag.is-on {
  opacity: 1;
  transform: none;
}
.tl-embed-tag--near {
  left: 28%;
  top: 12%;
  background: color-mix(in srgb, #2F8F5B 14%, var(--surface));
  color: #1f6b3f;
  border: 1px solid color-mix(in srgb, #2F8F5B 30%, transparent);
}
.tl-embed-tag--far {
  right: 8%;
  bottom: 10%;
  background: color-mix(in srgb, #C45C4A 12%, var(--surface));
  color: #8f3a2e;
  border: 1px solid color-mix(in srgb, #C45C4A 28%, transparent);
}
.tl-line.is-hot {
  stroke-width: 1.6;
  opacity: 1 !important;
  animation: tlLinePulse 1.1s ease;
}
@keyframes tlLinePulse {
  from { stroke-dashoffset: 12; }
  to { stroke-dashoffset: 0; }
}
@keyframes tlPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.tl-io {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .tl-io { grid-template-columns: 1fr; }
  .tl-io-mid { flex-direction: row; padding: 2px 0; }
  .tl-io-arrow { transform: rotate(90deg); }
}
.tl-io-col {
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tl-io-col header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tl-io-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
}
.tl-io-meta {
  font-size: 0.72rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink, var(--ink)) 50%, transparent);
}
.tl-io-col--in {
  border-color: color-mix(in srgb, #0F6B6B 18%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #0F6B6B 5%, var(--surface)), var(--surface));
}
.tl-io-col--out {
  border-color: color-mix(in srgb, #2563A8 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #2563A8 6%, var(--surface)), var(--surface));
}
.tl-io-prompt {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.tl-io-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #0F6B6B;
}
.tl-io-brain {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, color-mix(in srgb, #0F6B6B 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, #0F6B6B 22%, transparent);
  color: #0F6B6B;
}
.tl-io-arrow {
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0.55;
}
.tl-stream--compact,
.tl-stream--out {
  margin: 0;
  min-height: 64px;
}
.tl-readable {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, #2563A8 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #2563A8 18%, transparent);
  font-size: 0.88rem;
  line-height: 1.45;
}
.tl-readable b { color: #2563A8; }
.tl-loop-live {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 650;
  color: #0F6B6B;
  animation: tlPulse 1.4s ease-in-out infinite;
}
.tl-cost-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #C48A2A 8%, var(--surface));
  border: 1px solid color-mix(in srgb, #C48A2A 22%, transparent);
  font-size: 0.84rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink, var(--ink)) 78%, transparent);
}
.tl-cost-note iconify-icon,
.tl-cost-note svg { flex-shrink: 0; margin-top: 2px; color: #C48A2A; }

/* Compact token labs — calmer two-zone / chat layout */
.tl-lab--compact .tl-samples { margin-bottom: 10px; }
.tl-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 820px) {
  .tl-split { grid-template-columns: 1fr; }
}
.tl-zone {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, #0F6B6B 14%, transparent);
  background: var(--surface);
  min-width: 0;
}
.tl-zone--embed {
  border-color: color-mix(in srgb, #2F8F5B 18%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #2F8F5B 4%, var(--surface)), var(--surface));
}
.tl-zone-k {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--brand);
}
.tl-sentence {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #0F6B6B 6%, var(--surface));
  border: 1px solid color-mix(in srgb, #0F6B6B 12%, transparent);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, #0F6B6B);
}
.tl-input-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, #0F6B6B 72%, transparent);
}
.tl-sentence--input {
  display: block;
  width: 100%;
  min-height: 64px;
  resize: vertical;
  font: inherit;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 68%, #0F6B6B);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tl-sentence--input:focus {
  border-color: color-mix(in srgb, #0F6B6B 42%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #0F6B6B 14%, transparent);
}
.tl-sentence--ro {
  resize: none;
  margin: 0;
  cursor: default;
  white-space: pre-wrap;
}
.tl-break {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: color-mix(in srgb, #0F6B6B 55%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tl-break span:first-child,
.tl-break span:last-child {
  height: 1px;
  background: color-mix(in srgb, #0F6B6B 18%, transparent);
}
.tl-stream--live {
  margin: 0 0 8px;
  min-height: 52px;
  padding: 10px;
}
.tl-insight {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink, var(--ink)) 62%, transparent);
}
.tl-insight.is-ok,
.tl-lab--compact .tl-insight.is-ok,
.tl-lab--simple .tl-insight.is-ok {
  color: var(--brand);
  font-weight: 600;
}
.tl-zone--embed .tl-embed-def {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.tl-zone--embed .tl-embed-map {
  height: 148px;
  margin-bottom: 8px;
}
.tl-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.tl-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--surface);
}
.tl-bubble--you {
  background: color-mix(in srgb, #0F6B6B 5%, var(--surface));
  border-color: color-mix(in srgb, #0F6B6B 14%, transparent);
}
.tl-bubble--ai {
  background: color-mix(in srgb, #2563A8 5%, var(--surface));
  border-color: color-mix(in srgb, #2563A8 16%, transparent);
}
.tl-bubble-k {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink, var(--ink)) 48%, transparent);
}
.tl-bubble--you p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 72%, #0F6B6B);
}
.tl-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tl-bubble-head .tl-bubble-k { margin: 0; }
.tl-bubble-head .u4v-btn {
  padding: 6px 12px;
  font-size: 0.8rem;
}
.tl-bubble .tl-stream--out {
  margin: 0 0 8px;
  min-height: 56px;
}
.tl-bubble .tl-readable {
  margin: 0;
  padding: 8px 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 70%, #2563A8);
}
.tl-lab--compact .tl-tok,
.tl-lab--simple .tl-tok {
  min-width: 2.4rem;
  padding: 6px 10px 5px;
}
.tl-lab--compact .tl-tok em,
.tl-lab--simple .tl-tok em { font-size: 0.86rem; }
.tl-lab--compact .tl-tok b,
.tl-lab--simple .tl-tok b { font-size: 0.6rem; }

/* Simple token labs — one column, clear goal, fewer boxes */
.tl-lab--simple {
  max-width: none;
  width: 100%;
  margin: 0;
}
.tl-goal {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid color-mix(in srgb, #0F6B6B 12%, transparent);
}
.tl-goal-k {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, #0F6B6B 75%, transparent);
}
.tl-goal-t {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 72%, #0F6B6B);
}
.tl-goal-t strong {
  color: #0F6B6B;
  font-weight: 600;
}
.tl-lab--simple .tl-samples {
  margin-bottom: 12px;
}
.tl-lab--simple .tl-input-label {
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--ink, var(--ink)) 55%, transparent);
}
.tl-lab--simple .tl-sentence--input {
  margin-bottom: 4px;
  min-height: 56px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, #0F6B6B 18%, transparent);
}
.tl-flow-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #0F6B6B 58%, transparent);
}
.tl-flow-arr {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, #0F6B6B 10%, var(--surface));
  color: #0F6B6B;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.tl-lab--simple .tl-stream--live,
.tl-lab--simple .tl-stream--out {
  margin: 0 0 10px;
  min-height: 64px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, #0F6B6B 26%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, #0F6B6B 4%, var(--surface)), var(--surface));
}
.tl-lab--out.tl-lab--simple .tl-stream--out {
  border-color: color-mix(in srgb, #2563A8 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #2563A8 5%, var(--surface)), var(--surface));
}
.tl-lab--simple .tl-insight {
  margin: 0 0 18px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.tl-embed-lite {
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, #0F6B6B 10%, transparent);
}
.tl-embed-lite-k {
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand);
}
.tl-embed-lite .tl-embed-def {
  margin: 0 0 12px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink, var(--ink)) 72%, transparent);
}
.tl-embed-lite .tl-embed-def strong {
  color: var(--ink);
  font-weight: 700;
}
.tl-embed-lite .tl-embed-map {
  height: 132px;
  margin-bottom: 8px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 40%, color-mix(in srgb, #0F6B6B 7%, transparent), transparent 42%),
    radial-gradient(circle at 75% 60%, color-mix(in srgb, #C45C4A 6%, transparent), transparent 44%),
    color-mix(in srgb, var(--paper, var(--paper)) 70%, var(--surface));
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.tl-embed-lite .tl-insight {
  margin: 0;
  font-size: 0.8rem;
}
.tl-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, #0F6B6B 5%, var(--surface));
  border: 1px solid color-mix(in srgb, #0F6B6B 12%, transparent);
}
.tl-ask-k {
  flex: 0 0 100%;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, #0F6B6B 70%, transparent);
}
.tl-ask-q {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, #0F6B6B);
}
.tl-ask .u4v-btn {
  margin: 0;
  flex: 0 0 auto;
}
.tl-lab--simple .tl-readable {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, #2563A8 5%, var(--surface));
  border: 1px solid color-mix(in srgb, #2563A8 12%, transparent);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, #2563A8);
}
.tl-lab--simple .tl-readable span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563A8;
  background: color-mix(in srgb, #2563A8 10%, var(--surface));
}
.tl-lab--simple .tl-empty {
  padding: 4px;
  font-size: 0.84rem;
}

.pn-console {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 16%, transparent);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 40, 50, 0.08);
  margin-bottom: 12px;
}
.pn-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f8fbfb, #f1f5f5);
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pn-chrome span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #C45C4A;
}
.pn-chrome span:nth-child(2) { background: #C48A2A; }
.pn-chrome span:nth-child(3) { background: #2F8F5B; }
.pn-chrome b { margin-left: 8px; font-weight: 700; color: var(--ink); }
.pn-chrome em {
  margin-left: auto;
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand, #0F6B6B);
  animation: pnBlink 1.4s ease infinite;
}
@keyframes pnBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pn-body { padding: 14px; background: var(--surface-2); }
.pn-ctx {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  line-height: 1.5;
}
.pn-label {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
  color: var(--brand, #0F6B6B);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 20%, transparent);
}
.pn-ctx code { color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 650; }
.pn-caret {
  display: inline-block;
  width: 8px; height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--brand, #0F6B6B);
  animation: pnBlink 0.9s step-end infinite;
}
.pn-bars { display: flex; flex-direction: column; gap: 8px; }
.pn-row {
  display: grid;
  grid-template-columns: minmax(88px, 1.1fr) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--surface);
  color: var(--ink);
  cursor: default;
  text-align: left;
  font: inherit;
}
.pn-row.is-top {
  border-color: color-mix(in srgb, #0F6B6B 40%, transparent);
  background: color-mix(in srgb, #0F6B6B 8%, var(--surface));
}
.pn-tok { font-size: 0.84rem; font-weight: 700; }
.pn-row i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
  position: relative;
  overflow: hidden;
}
.pn-row i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  animation: pnFill 0.7s ease both;
}
@keyframes pnFill {
  from { width: 0; }
}
.pn-row b { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--brand, #0F6B6B); font-weight: 800; }
.pn-log { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.pn-log-line {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  animation: tlTokIn 0.35s ease both;
}
.pn-log-line code { color: var(--brand, #0F6B6B); font-weight: 700; }

.pu-host,
.wp-host {
  min-height: 0;
}
.pu-lab,
.wp-lab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: 100%;
}
.pu-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 280px;
}
@media (max-width: 720px) {
  .pu-dual { grid-template-columns: 1fr; }
}
.pu-chat-pane,
.wp-chat-pane {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 10%, transparent);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.pu-chat-pane--weak { border-color: color-mix(in srgb, #C45C4A 28%, transparent); }
.pu-chat-pane--strong { border-color: color-mix(in srgb, #2F8F5B 28%, transparent); }
.pu-chat-pane--strong.is-pop { animation: tlTokIn 0.5s ease both; }
.pu-chat-pane.is-locked {
  opacity: 0.72;
  filter: saturate(0.85);
}
.pu-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.pu-chat-pane--weak .pu-chat-head { background: color-mix(in srgb, #C45C4A 10%, var(--surface)); color: #C45C4A; }
.pu-chat-pane--strong .pu-chat-head { background: color-mix(in srgb, #2F8F5B 10%, var(--surface)); color: #2F8F5B; }
.wp-chat-pane .pu-chat-head {
  background: color-mix(in srgb, var(--teal, #0F6B6B) 10%, var(--surface));
  color: var(--teal, #0F6B6B);
}
.pu-live {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--line);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.pu-live.is-on {
  background: color-mix(in srgb, #2F8F5B 14%, var(--surface));
  color: var(--output);
}
.pu-chat-stage {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: min(42vh, 360px);
  overflow: auto;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 55%, var(--surface) 100%);
}
.pu-chat-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  text-align: center;
  color: var(--read-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 12px;
}
.pu-chat-hero p { margin: 0; max-width: 28ch; }
.pu-chat-hero-ico {
  display: inline-flex;
  color: color-mix(in srgb, var(--teal, #0F6B6B) 70%, var(--ink));
  opacity: 0.75;
}
.pu-chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pu-msg .pu-bubble {
  max-width: min(96%, 420px);
  font-size: 0.82rem;
}
.pu-bubble .wp-pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.55;
}
.pu-typing {
  color: var(--teal, #0F6B6B);
  font-weight: 700;
  font-style: italic;
}
.pu-composer-wrap {
  flex: 0 0 auto;
  padding: 8px 10px 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 8%, transparent);
  background: var(--surface);
}
.pu-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 12%, transparent);
  background: var(--surface-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pu-composer:focus-within {
  border-color: color-mix(in srgb, var(--teal, #0F6B6B) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal, #0F6B6B) 12%, transparent);
  background: var(--surface);
}
.pu-composer textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  resize: none;
  outline: none;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink, var(--ink));
  padding: 4px 2px;
  max-height: 140px;
}
.pu-composer textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pu-send {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.pu-send:hover:not(:disabled) {
  background: #000;
  transform: translateY(-1px);
}
.pu-send--strong {
  background: #2F8F5B;
}
.pu-send--strong:hover:not(:disabled) {
  background: #247A4C;
}
.pu-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pu-send.is-busy {
  opacity: 0.7;
  pointer-events: none;
}
.pu-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}
.pu-ph { opacity: 0.45; font-style: italic; }
.pu-loading { color: var(--teal, #0F6B6B); font-weight: 700; }
.pu-src {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal, #0F6B6B);
}
.pu-why {
  margin: 0;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 68%, transparent);
  min-height: 1.2em;
}
.wp-chat-pane {
  flex: 1 1 auto;
  min-height: 300px;
}
.wp-chat-pane .pu-chat-stage {
  max-height: min(46vh, 400px);
}

.wp-pane {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--teal, #0F6B6B) 18%, transparent);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wp-pane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--teal, #0F6B6B);
  background: color-mix(in srgb, var(--teal, #0F6B6B) 7%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--teal, #0F6B6B) 12%, transparent);
}
.wp-pane header em {
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2F8F5B;
}
.wp-pane textarea {
  border: 0;
  border-radius: 0;
  min-height: 140px;
  box-shadow: none;
}
.wp-out {
  flex: 1;
  min-height: 140px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.wp-pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink, var(--ink));
}
.wp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--ink, var(--ink));
  cursor: pointer;
}

.ge-toolbar { margin-bottom: 12px; }
.ge-toolbar input[type="search"] {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent);
  padding: 10px 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  background: var(--surface);
}
.ge-toolbar input[type="search"]::placeholder {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-weight: 400;
}
.ge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ge-card {
  text-align: left;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
  background: var(--surface);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  animation: tlTokIn 0.4s ease both;
  animation-delay: var(--d, 0ms);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
}
.ge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 107, 107, 0.08);
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
}
.ge-card strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 35%, var(--ink));
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.ge-tag {
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 75%, var(--ink));
  background: color-mix(in srgb, var(--brand, #0F6B6B) 9%, var(--surface));
  padding: 2px 8px;
  border-radius: 999px;
}
.ge-def {
  font-size: 0.8rem;
  font-weight: 450;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.25s ease;
}
.ge-card.is-open {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 40%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface)));
}
.ge-card.is-open strong {
  color: var(--brand);
  font-weight: 650;
}
.ge-card.is-open .ge-def {
  max-height: 160px;
  opacity: 1;
  margin-top: 2px;
}

/* ============================================================
   End-of-unit Up Next handoff (YouTube-style, LMS polish)
   ============================================================ */
.upnext-panel {
  --upnext-primary: var(--brand, #0F6B6B);
  --upnext-secondary: var(--secondary, #2F6FAD);
  --upnext-secondary-soft: var(--secondary-soft, #E8F1F8);
  --upnext-accent: var(--upnext-primary);
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 8px 4px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: upnextIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes upnextIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.upnext-done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--upnext-primary) 9%, var(--surface)) 0%, var(--surface) 58%),
    #fff;
  border: 1px solid color-mix(in srgb, var(--upnext-primary) 20%, transparent);
}
.upnext-done--finale {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--upnext-secondary) 10%, var(--surface)) 0%, var(--surface) 58%),
    #fff;
  border-color: color-mix(in srgb, var(--upnext-secondary) 22%, transparent);
}
.upnext-done-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--upnext-primary);
  background: color-mix(in srgb, var(--upnext-primary) 12%, var(--surface));
}
.upnext-done--finale .upnext-done-ico {
  color: var(--upnext-secondary);
  background: color-mix(in srgb, var(--upnext-secondary) 12%, var(--surface));
}
.upnext-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--upnext-primary);
  font-family: var(--font-ui, var(--font-body));
}
.upnext-done--finale .upnext-kicker { color: var(--upnext-secondary); }
.upnext-done-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, var(--ink));
}
.upnext-done-sub {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 58%, transparent);
  line-height: 1.45;
}
.upnext-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: color-mix(in srgb, var(--upnext-secondary) 70%, var(--ink, var(--ink)));
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.upnext-divider::before,
.upnext-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--upnext-secondary) 22%, transparent);
}
.upnext-card {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background:
    linear-gradient(165deg, var(--upnext-secondary-soft) 0%, var(--surface) 46%),
    #fff;
  border: 1px solid color-mix(in srgb, var(--upnext-secondary) 18%, var(--line));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 28px var(--line);
}
.upnext-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--upnext-primary), var(--upnext-secondary));
}
.upnext-card-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.upnext-badge {
  flex-shrink: 0;
  width: 72px;
  min-height: 72px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--upnext-secondary);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--upnext-secondary) 14%, var(--surface)), color-mix(in srgb, var(--upnext-secondary) 5%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--upnext-secondary) 18%, transparent);
}
.upnext-badge-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--upnext-secondary) 88%, var(--ink));
}
.upnext-label {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--upnext-secondary);
}
.upnext-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, var(--ink));
}
.upnext-outcome {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink, var(--ink)) 68%, transparent);
}
.upnext-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.upnext-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: color-mix(in srgb, var(--upnext-secondary) 78%, var(--ink));
  background: color-mix(in srgb, var(--upnext-secondary) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--upnext-secondary) 16%, transparent);
}
.upnext-learn {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 8%, transparent);
}
.upnext-learn-label {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink, var(--ink));
}
.upnext-learn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upnext-learn-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink, var(--ink)) 78%, transparent);
}
.upnext-learn-ico {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--upnext-primary);
  opacity: 0.95;
}
.upnext-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.upnext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.upnext-btn-primary {
  background: var(--upnext-primary);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--upnext-primary) 22%, transparent);
}
.upnext-btn-primary:hover {
  background: color-mix(in srgb, var(--upnext-primary) 88%, #000);
  transform: translateY(-1px);
  color: #fff;
}
.upnext-btn-ghost {
  background: var(--upnext-secondary-soft);
  color: var(--upnext-secondary);
  border: 1px solid color-mix(in srgb, var(--upnext-secondary) 18%, transparent);
}
.upnext-btn-ghost:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--upnext-secondary) 32%, transparent);
  color: color-mix(in srgb, var(--upnext-secondary) 85%, var(--ink));
}
@media (max-width: 640px) {
  .upnext-panel { padding: 4px 0 20px; gap: 14px; }
  .upnext-card { padding: 18px 16px 16px; border-radius: 16px; }
  .upnext-card-top { flex-direction: column; gap: 12px; }
  .upnext-badge { width: 100%; min-height: 56px; flex-direction: row; gap: 10px; }
  .upnext-actions { flex-direction: column; }
  .upnext-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .upnext-panel { animation: none; }
  .upnext-btn-primary:hover { transform: none; }
}

/* Up-next leaderboard + global points */
.upnext-global-pts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--upnext-primary) 8%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--upnext-primary) 16%, transparent);
  text-align: center;
}
.upnext-global-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--upnext-primary);
}
.upnext-global-val {
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 1.9rem);
  font-weight: 700;
  color: var(--ink, var(--ink));
  line-height: 1.15;
}
.lb-panel {
  padding: 20px 0 8px;
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, #F5C542 14%, transparent), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--upnext-primary) 10%, transparent), transparent 50%),
    #fff;
  border: 1px solid color-mix(in srgb, var(--upnext-primary) 14%, var(--line));
  box-shadow: 0 1px 2px rgba(26, 35, 50, 0.04);
}
.lb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--upnext-primary) 12%, transparent);
}
.lb-head-trophy {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, #FFF8E7, #FFE8A8 55%, #FFD56A);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(245, 197, 66, 0.28);
}
.lb-trophy-img,
.lb-head-trophy img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.lb-head-text { min-width: 0; flex: 1; }
.lb-title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, var(--ink));
  line-height: 1.3;
}
.lb-sub {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--upnext-primary) 55%, var(--ink, var(--ink)));
}
.lb-cols {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 88px;
  gap: 12px;
  padding: 10px 20px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--upnext-secondary) 55%, var(--ink, var(--ink)));
}
.lb-cols > span:last-child { text-align: right; }
.lb-list {
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.lb-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
}
.lb-row + .lb-row {
  border-top: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 6%, transparent);
  border-radius: 0;
}
.lb-row.is-you {
  margin: 2px 0;
  border-radius: 8px;
  border-top: none;
  background: color-mix(in srgb, var(--upnext-primary) 8%, var(--surface));
  box-shadow: inset 3px 0 0 var(--upnext-primary);
}
.lb-row.is-top {
  background: linear-gradient(90deg, color-mix(in srgb, #F5C542 16%, var(--surface)), color-mix(in srgb, #F5C542 4%, var(--surface)));
}
.lb-row.is-top.is-you {
  background: linear-gradient(90deg, color-mix(in srgb, #F5C542 18%, var(--surface)), color-mix(in srgb, var(--upnext-primary) 8%, var(--surface)));
  box-shadow: inset 3px 0 0 #E8A317;
}
.lb-row.is-podium:not(.is-you) .lb-rank {
  color: #C4841D;
}
.lb-row.is-you + .lb-row,
.lb-row + .lb-row.is-you {
  border-top: none;
}
.lb-rank {
  font-size: 0.84rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink, var(--ink)) 40%, transparent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb-rank--trophy {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF6D6, #FFE08A 70%, #F5C542);
  box-shadow: 0 1px 4px rgba(245, 197, 66, 0.35);
}
.lb-rank--trophy img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.lb-row:nth-child(-n+3) .lb-rank:not(.lb-rank--trophy) {
  color: var(--upnext-secondary);
  font-weight: 700;
}
.lb-name {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink, var(--ink));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-row.is-you .lb-name { font-weight: 600; }
.lb-score {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink, var(--ink));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lb-score-val { line-height: 1; }
.lb-score-coin {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.lb-coin-img,
.lb-score-coin img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
.lb-row.is-you .lb-score {
  color: var(--upnext-primary);
}
.lb-row.is-top .lb-score {
  color: #9A6B10;
}

@media (max-width: 520px) {
  .lb-head { gap: 10px; padding: 0 14px 12px; }
  .lb-head-trophy { width: 40px; height: 40px; border-radius: 12px; }
  .lb-trophy-img,
  .lb-head-trophy img { width: 30px; height: 30px; }
  .lb-cols,
  .lb-row {
    grid-template-columns: 40px minmax(0, 1fr) 78px;
    gap: 8px;
  }
  .lb-cols { padding: 10px 14px 6px; }
  .lb-rank--trophy { width: 32px; height: 32px; }
  .lb-rank--trophy img { width: 20px; height: 20px; }
}

.upnext-global-pts {
  position: relative;
  overflow: hidden;
}
.upnext-global-pts::before {
  content: '';
  position: absolute;
  inset: auto auto -6px -8px;
  width: 56px;
  height: 56px;
  background: url('../assets/images/points-trophy.png') center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
}
.upnext-global-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.upnext-global-val::after {
  content: '';
  width: 22px;
  height: 22px;
  background: url('../assets/images/points-coin.png') center / contain no-repeat;
  flex-shrink: 0;
}

/* Unit 1 lesson recap — full stage width */
.u1-learned {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.u1-learned-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand, #0F6B6B);
}
.u1-learned-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 700;
  color: var(--ink, var(--ink));
}
.u1-learned-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink, var(--ink)) 68%, transparent);
}
.u1-learned-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.u1-learned-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 8%, transparent);
  width: 100%;
  box-sizing: border-box;
}
.u1-learned-n {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
}
.u1-learned-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.u1-learned-topic {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink, var(--ink));
}
.u1-learned-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink, var(--ink)) 72%, transparent);
}
.u1-act-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.u1-act-tabs-rail {
  width: 100%;
  padding: 6px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand, #0F6B6B) 6%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink, var(--ink)) 8%, transparent);
  box-shadow: 0 8px 22px rgba(26, 35, 50, 0.04);
}
.u1-act-tabs-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.u1-act-tabs-nav::-webkit-scrollbar {
  height: 4px;
}
.u1-act-tabs-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  border-radius: 999px;
}
.u1-act-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: transparent;
  color: color-mix(in srgb, var(--ink, var(--ink)) 62%, transparent);
  border-radius: 12px;
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.u1-act-tab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink, var(--ink)) 6%, var(--surface));
  color: inherit;
  flex-shrink: 0;
}
.u1-act-tab-txt {
  line-height: 1.2;
}
.u1-act-tab:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.u1-act-tab.is-active {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  color: var(--brand, #0F6B6B);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
}
.u1-act-tab.is-active .u1-act-tab-ico {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 14%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.u1-act-tabs-panel {
  min-height: 180px;
  padding: 4px 0 4px;
  width: 100%;
}
.u1-act-tabs-panel .u1-sim,
.u1-act-tabs-panel .u1-sim-host,
.u1-act-tabs-panel .u4v-host {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Review page: hide mid-video turn chrome (already completed in video) */
.u1-act-tabs-panel .u1-turn,
.u1-act-tabs-panel .u1-act-kicker {
  display: none !important;
}
.u1-act-tabs-note {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink, var(--ink)) 58%, transparent);
}
.u1-sim-host--recap,
.u1-sim-host:has(.u1-learned),
.u1-sim-host:has(.u1-act-tabs) {
  width: 100%;
  max-width: none;
}

/* ---- Resources / আরও জানতে ---- */
.res-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 2px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: resIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes resIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.res-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface)) 0%, var(--surface) 58%),
    var(--surface-2, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 16%, transparent);
}
.res-intro-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
}
.res-intro-lead {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.5;
  color: var(--ink, var(--ink));
}
.res-intro-meta {
  margin: 4px 0 0;
  font-family: var(--font-ui, var(--font-body));
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink, var(--ink)) 52%, transparent);
}
.res-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.res-row {
  --res-accent: var(--brand, #0F6B6B);
  --res-delay: 0ms;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 14px 14px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line, var(--line));
  box-shadow: 0 1px 0 rgba(26, 35, 50, 0.02);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  animation: resRowIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--res-delay);
}
@keyframes resRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
a.res-row:hover {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--brand, #0F6B6B) 4%, var(--surface)) 0%, var(--surface) 70%);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
a.res-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand, #0F6B6B) 55%, transparent);
  outline-offset: 2px;
}
.res-row--static {
  cursor: default;
}
.res-row-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--res-accent);
  background: color-mix(in srgb, var(--res-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--res-accent) 16%, transparent);
}
.res-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.res-row-title {
  font-family: var(--font-ui, var(--font-body));
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--navy, #243B55);
}
a.res-row:hover .res-row-title {
  color: var(--brand, #0F6B6B);
}
.res-row-desc {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--read-muted);
}
.res-row-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  font-family: var(--font-ui, var(--font-body));
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.res-row:hover .res-row-cta {
  background: var(--brand, #0F6B6B);
  border-color: var(--brand, #0F6B6B);
  color: #fff;
}
.res-empty {
  margin: 0;
  padding: 20px 16px;
  text-align: center;
  color: var(--read-muted);
  font-size: 0.92rem;
}
@media (max-width: 640px) {
  .res-panel { padding: 2px 0 20px; gap: 14px; }
  .res-intro { padding: 12px 14px; }
  .res-row {
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    padding: 12px;
  }
  .res-row-cta {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .res-row-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .res-panel,
  .res-row { animation: none; }
  a.res-row:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-tok, .tl-embed-dot, .pn-chrome em, .pn-caret, .pn-row i::after,
  .pu-chat-pane--strong.is-pop, .ge-card, .gc-gen-art.is-pop {
    animation: none !important;
  }
  .gc-gen-art.is-pop {
    opacity: 1;
    transform: none;
  }
}

/* ---- Unit 4 restructure additions ---- */
.mtl-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 107, 107, 0.12);
  background: color-mix(in srgb, #0F6B6B 4%, var(--surface));
}
.mtl-ex-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mtl-ex-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.1);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink, var(--ink));
}
.mtl-ex-card p { margin: 0; }
.mtl-ex-k {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0F6B6B;
}
.mtl-ex-card--tool .mtl-ex-k { color: #2563A8; }
.mtl-ex-card--user .mtl-ex-k { color: #2F8F5B; }

.ts-placed {
  cursor: grab;
}

.gc-tour {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(15, 28, 40, 0.45);
  border-radius: 16px;
  padding: 16px;
}
.u4v-shell { position: relative; }
.gc-tour-card {
  max-width: 420px;
  background: var(--surface);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
}
.gc-tour-label {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0F6B6B;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gc-tour-steps {
  margin: 0 0 14px;
  padding-left: 1.2em;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink, var(--ink));
}

.lp-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lp-diagram.is-dim { opacity: 0.55; }
.lp-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 107, 107, 0.16);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  min-width: 72px;
  animation: beatIn 0.35s ease both;
  animation-delay: var(--d, 0ms);
}
.lp-node.is-seen {
  border-color: #0F6B6B;
  box-shadow: 0 0 0 2px color-mix(in srgb, #0F6B6B 25%, transparent);
}
.lp-node-label { font-size: 0.75rem; font-weight: 600; }
.lp-node-arrow { color: color-mix(in srgb, var(--ink) 35%, transparent); font-weight: 700; }
.lp-popup { margin-bottom: 10px; }
.lp-popup-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, #0F6B6B 6%, var(--surface));
  border: 1px solid rgba(15, 107, 107, 0.14);
}
.lp-popup-title { margin: 0 0 6px; font-weight: 700; color: #0F6B6B; }
.lp-popup-body { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.45; }
.lp-open-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lp-open-hint { font-size: 0.82rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* চিত্র ৪.২ — LLM pipeline (spacing + readability) */
.lp-mini { display: grid; gap: 22px; }

/* —— Run / summary simulation —— */
.lp-run {
  display: grid;
  gap: 18px;
}
.lp-run-head {
  display: grid;
  gap: 6px;
}
.lp-run-step {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 72%, transparent);
}
.lp-run-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--brand, #0F6B6B);
}
.lp-run-desc {
  margin: 0;
  max-width: 42rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
}

.lp-stage {
  display: grid;
  gap: 16px;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(26, 35, 50, 0.07);
  box-shadow: 0 8px 28px rgba(15, 40, 50, 0.04);
  min-height: 0;
}
.lp-stage-kicker {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 70%, transparent);
}
.lp-stage-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--brand, #0F6B6B);
}
.lp-stage-tip {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
}

.lp-story {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .lp-story {
    grid-template-columns: 1fr 1.15fr;
    gap: 14px;
    align-items: stretch;
  }
}
.lp-story-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-height: 108px;
}
.lp-story-card--draft {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.lp-story-card--draft.is-guessing {
  border-color: color-mix(in srgb, #C4A06A 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #C4A06A 12%, transparent);
}
.lp-story-card--draft.is-done {
  background: color-mix(in srgb, #2F8F5B 8%, var(--surface));
  border-color: color-mix(in srgb, #2F8F5B 28%, transparent);
  box-shadow: none;
}
.lp-story-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 84%, transparent);
}
.lp-story-text--draft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-height: 1.65em;
}
.lp-story-hint {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}
.lp-new-word {
  font-style: normal;
  font-weight: 650;
  color: #2F8F5B;
  padding: 0 2px;
  border-radius: 4px;
  background: color-mix(in srgb, #2F8F5B 12%, transparent);
  animation: lpChipNew 0.7s ease both;
}

/* Animated “…” while guessing next token */
.lp-guess {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 2px;
  padding: 4px 8px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, #C4A06A 14%, var(--surface));
  border: 1px solid color-mix(in srgb, #C4A06A 28%, transparent);
  vertical-align: middle;
}
.lp-guess[hidden] { display: none !important; }
.lp-guess i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, #C4A06A 75%, var(--ink));
  opacity: 0.35;
  animation: lpGuessDot 1.05s ease-in-out infinite;
}
.lp-guess i:nth-child(2) { animation-delay: 0.18s; }
.lp-guess i:nth-child(3) { animation-delay: 0.36s; }
@keyframes lpGuessDot {
  0%, 80%, 100% { opacity: 0.28; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.lp-live {
  display: grid;
  gap: 14px;
  min-height: 0;
}
.lp-live-tag {
  display: inline-block;
  margin-bottom: 0;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.lp-live-prompt p,
.lp-live-out p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.lp-live-prompt,
.lp-live-out {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid rgba(26, 35, 50, 0.05);
}
.lp-live-out {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 12%, transparent);
}
.lp-live-tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 2px;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  background: var(--surface);
  border: 1px solid rgba(26, 35, 50, 0.1);
  animation: lpChipIn 0.55s ease both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.lp-chip.is-new {
  border-color: #2F8F5B;
  color: #2F8F5B;
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
  animation: lpChipNew 0.7s ease both;
}
.lp-chip--ctx {
  border-color: rgba(15, 107, 107, 0.2);
}
.lp-chip--guess {
  border-style: dashed;
  border-color: color-mix(in srgb, #C4A06A 45%, transparent);
  color: color-mix(in srgb, #C4A06A 70%, var(--ink));
  background: color-mix(in srgb, #C4A06A 8%, var(--surface));
  letter-spacing: 0.12em;
  font-weight: 650;
  animation: lpPulse 1.2s ease infinite;
}
.lp-chip-plus {
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-size: 1rem;
}
.lp-ellipsis {
  opacity: 0.45;
  font-weight: 600;
}
@keyframes lpChipIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes lpChipNew {
  0% { opacity: 0; transform: scale(0.85); }
  60% { transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.lp-live-prob {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  max-width: 420px;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, #C4A06A 6%, var(--surface));
  border: 1px solid color-mix(in srgb, #C4A06A 22%, transparent);
}
.lp-prob-title {
  margin: 0 0 2px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.lp-prob-note {
  margin: 4px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.lp-prob-row.is-top span,
.lp-prob-row.is-top b { color: #2F8F5B; font-weight: 650; }
.lp-prob-row.is-top {
  background: color-mix(in srgb, #2F8F5B 12%, var(--surface));
  border-radius: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
}
.lp-prob-row.is-top i::after {
  background: #2F8F5B;
}

/* Step strip (numbered, readable) */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0;
}
.lp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.lp-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 650;
  background: var(--line);
  color: inherit;
  transition: background 0.18s ease, color 0.18s ease;
}
.lp-step-l {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}
.lp-step.is-done {
  color: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 55%, var(--ink));
  border-color: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 22%, transparent);
  background: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 6%, var(--surface));
}
.lp-step.is-done .lp-step-n {
  background: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 22%, var(--surface));
}
.lp-step.is-on {
  color: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 75%, var(--ink));
  border-color: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 42%, transparent);
  background: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 10%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 12%, transparent);
}
.lp-step.is-on .lp-step-n {
  background: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 78%, var(--ink));
  color: #fff;
}

.lp-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 10px 4px 4px;
  overflow-x: auto;
}
.lp-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  transition: color 0.18s ease;
}
.lp-dot-core {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(26, 35, 50, 0.12);
  border: 2px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-dot-name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.lp-dot.is-done { color: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 45%, transparent); }
.lp-dot.is-done .lp-dot-core {
  background: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 28%, var(--surface));
}
.lp-dot.is-on { color: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 80%, var(--ink)); }
.lp-dot.is-on .lp-dot-core {
  background: color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 75%, var(--ink));
  transform: scale(1.2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp, var(--brand, #0F6B6B)) 12%, transparent);
}
.lp-rail-line {
  flex: 1 1 16px;
  height: 1px;
  min-width: 12px;
  margin: 0 6px 20px;
  background: rgba(26, 35, 50, 0.1);
  transition: background 0.2s ease;
}
.lp-rail-line.is-on {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 45%, transparent);
}
.lp-rail-line--loop.is-loop {
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand, #0F6B6B) 55%, transparent) 0 4px,
    transparent 4px 8px
  );
}
.lp-loop-hint {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--brand, #0F6B6B);
  animation: lpPulse 1.1s ease infinite;
}
@keyframes lpPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.lp-controls--mini {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.lp-run-status {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
  min-height: 1.55em;
}
.lp-run-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.lp-run-actions-main,
.lp-run-actions-more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lp-stage--flash {
  animation: lpStageFlash 0.65s ease;
}
@keyframes lpStageFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand, #0F6B6B) 0%, transparent); }
  35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent); }
  100% { box-shadow: 0 8px 28px rgba(15, 40, 50, 0.04); }
}
.u4v-btn.is-ready {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
}
.lp-mini.is-looping .lp-stage {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
}

@media (max-width: 720px) {
  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .lp-dot-name { font-size: 0.62rem; }
  .lp-stage { padding: 14px; }
  .lp-run-title { font-size: 1.08rem; }
  .lp-step-l { font-size: 0.62rem; }
  .lp-run-actions { flex-direction: column; align-items: stretch; }
  .lp-run-actions-main,
  .lp-run-actions-more { width: 100%; }
  .lp-run-actions-main .u4v-btn,
  .lp-run-actions-more .u4v-btn { flex: 1 1 auto; justify-content: center; }
}

.tl-embed-def {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.tl-src-line {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.rtcft-combine {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, #0F6B6B 10%, var(--surface)), var(--surface));
  border: 1px solid rgba(15, 107, 107, 0.18);
}
.rtcft-combine-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F6B6B;
  letter-spacing: 0.06em;
}
.rtcft-combine-body { margin: 0; font-size: 0.92rem; line-height: 1.5; }

.wp-rtftc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.wp-part {
  display: inline-flex;
  gap: 6px;
  align-items: flex-start;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid rgba(37, 99, 168, 0.16);
  font-size: 0.8rem;
  line-height: 1.35;
}
.wp-part b {
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #2563A8;
  color: #fff;
  font-size: 0.7rem;
}
.wp-part-label {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #2563A8;
}
.wp-part em { font-style: normal; color: color-mix(in srgb, var(--ink) 80%, transparent); }

.vl-midquiz {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(10, 18, 28, 0.38), rgba(10, 18, 28, 0.58));
  padding: 16px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.vl-midquiz[hidden] {
  display: none !important;
}
.vl-frame.is-gate-open .vl-midquiz:not([hidden]),
.vl-frame.is-gate-open .vl-midact:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.vl-midact {
  position: absolute;
  inset: 0;
  z-index: 31;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(15, 26, 40, 0.28), rgba(15, 26, 40, 0.58));
  padding: 8px;
  border-radius: inherit;
  overflow: auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.vl-midact[hidden] {
  display: none !important;
}

/* Progress HUD removed */
.vl-hud {
  display: none !important;
}

.vl-replay-toast {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 9;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(12, 18, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  animation: beatIn 0.3s ease both;
  white-space: nowrap;
}
.vl-replay-toast[hidden] {
  display: none !important;
}

/* Mid-activity: calm paper story pause — brand for action, moss/coral for feedback only */
.vl-act-shell {
  position: relative;
  width: min(640px, 100%);
  max-height: min(94%, 820px);
  overflow: auto;
  padding: 0;
  border-radius: 22px;
  border: 1px solid var(--line, var(--line));
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--paper, var(--paper)) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 48px rgba(26, 35, 50, 0.22);
  animation: vlActIn 0.48s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent) transparent;
  color: var(--ink, var(--ink));
}
/* Keep mid-activity shells same footprint as quiz (slightly roomier base above) */
.vl-act-shell--roomy,
.vl-act-shell:has(.u1-act--drums),
.vl-act-shell:has(.u1-act--sort),
.vl-act-shell:has(.u1-opts--multi),
.vl-act-shell:has(.u1-feed),
.vl-act-shell:has(.u1-block-list) {
  width: min(640px, 100%);
  max-height: min(94%, 820px);
}
.vl-act-shell--roomy .vl-act-host,
.vl-act-shell:has(.u1-act--drums) .vl-act-host,
.vl-act-shell:has(.u1-act--sort) .vl-act-host {
  padding: 16px 22px 16px;
}
.vl-act-shell--roomy .vl-act-story,
.vl-act-shell:has(.u1-act--drums) .vl-act-story {
  margin: 20px 22px 0;
}
.vl-act-shell--roomy .vl-act-foot,
.vl-act-shell:has(.u1-act--drums) .vl-act-foot {
  padding-left: 22px;
  padding-right: 22px;
}
@keyframes vlActIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.vl-act-shell::-webkit-scrollbar { width: 6px; }
.vl-act-shell::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  border-radius: 99px;
}
.vl-act-shell::before {
  content: '';
  display: block;
  height: 3px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 72%, #3D5A73);
}
.vl-act-story {
  margin: 22px 24px 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line, var(--line));
}
.vl-act-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate, #3D5A73);
  opacity: 0.85;
}
.vl-act-turn {
  margin: 0;
  padding: 0;
  width: auto;
  max-width: 20ch;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--brand, #0F6B6B);
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: clamp(1.12rem, 2.4vw, 1.32rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  display: block;
  text-wrap: balance;
}
.vl-act-turn-ico {
  display: none;
}
.vl-act-whisper {
  margin: 8px 0 0;
  max-width: 36ch;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.92rem;
  font-weight: 450;
  line-height: 1.65;
  color: var(--read-muted);
}
.vl-act-host {
  min-height: 120px;
  padding: 18px 24px 14px;
}
.vl-act-shell--no-story .vl-act-host {
  padding-top: 22px;
}
.vl-act-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--line, var(--line));
  background: transparent;
  animation: beatIn 0.3s ease both;
}
.vl-act-foot[hidden] {
  display: none !important;
}
.vl-act-foot-note {
  margin: 0;
  flex: 1 1 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  display: grid;
  gap: 2px;
}
.vl-act-foot-note[hidden] {
  display: none !important;
}
.vl-gate-correct-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #2F8F5B;
}
.vl-gate-correct-text {
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.vl-act-foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}
.vl-act-foot-actions[hidden] {
  display: none !important;
}
.vl-act-foot-actions--split {
  justify-content: stretch;
}
.vl-act-foot-actions--split > * {
  flex: 1 1 140px;
}
/* Simple calm gate buttons — icon + text, vertically centered */
.vl-gate-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0 16px 0 12px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vl-gate-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.vl-gate-ico iconify-icon,
.vl-gate-ico svg {
  display: block;
  width: 16px;
  height: 16px;
}
.vl-gate-txt {
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
  padding-top: 1px; /* Bengali optical center */
}
.vl-gate-btn--check {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--surface);
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.vl-gate-btn--check:hover {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 35%, transparent);
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface));
}
.vl-gate-btn--go {
  border-color: transparent;
  background: var(--brand, #0F6B6B);
  color: #fff;
  padding-left: 14px;
}
.vl-gate-btn--go:hover {
  background: var(--brand);
}
.vl-gate-btn--go .vl-gate-ico {
  margin-left: 2px;
}
.vl-gate-btn:active {
  transform: scale(0.98);
}
.vl-gate-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand, #0F6B6B) 40%, var(--surface));
  outline-offset: 2px;
}
.vl-gate-btn--primary {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 9%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.vl-act-continue,
.vl-act-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 550;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vl-act-continue {
  border: 1px solid transparent;
  background: var(--brand, #0F6B6B);
  color: #fff;
  box-shadow: none;
}
.vl-act-continue:hover {
  background: var(--brand);
  transform: none;
}
.vl-act-continue:active {
  transform: scale(0.98);
}
.vl-act-continue:focus-visible,
.vl-act-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand, #0F6B6B) 40%, var(--surface));
  outline-offset: 2px;
}
.vl-act-btn--ghost {
  border: 1px solid rgba(26, 35, 50, 0.12);
  background: var(--surface);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.vl-act-btn--ghost:hover {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 35%, transparent);
  color: var(--brand, #0F6B6B);
}
.vl-act-btn--soft {
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 6%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.vl-act-btn--soft:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface));
  transform: none;
}
.vl-act-host .u1-check-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px 0 12px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(26, 35, 50, 0.12);
  background: var(--surface);
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vl-act-host .u1-check-btn:hover:not(:disabled),
.vl-act-host .u1-check-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 40%, transparent);
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  transform: none;
  box-shadow: none;
}
.vl-act-host .u1-check-btn:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}
.vl-act-host .u1-check-btn .vl-gate-ico,
.vl-act-host .u1-check-btn .vl-gate-txt {
  display: inline-flex;
  align-items: center;
}
.vl-act-host .u1-check-btn .vl-gate-ico {
  width: 18px;
  height: 18px;
  line-height: 0;
}
.vl-act-host .u1-check-btn .vl-gate-ico iconify-icon,
.vl-act-host .u1-check-btn .vl-gate-ico svg {
  display: block;
  width: 16px;
  height: 16px;
}
.vl-act-host .u1-check-btn .vl-gate-txt {
  line-height: 1.25;
  padding-top: 1px;
}
.vl-act-host .u1-turn {
  display: none; /* story turn already shown above */
}
.vl-act-host .u1-sim {
  gap: 14px;
}
.vl-act-host .u1-act-kicker {
  display: none !important; /* no chip titles like ট্যাপ টু টাচ */
}
.vl-act-host .u1-act-q {
  margin: 0;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: clamp(1.05rem, 2.4vw, 1.18rem);
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink, var(--ink));
}
.vl-act-host .u1-act-case {
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2, var(--surface-2));
  border: 1px solid var(--line, var(--line));
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--read-ink);
}
.vl-act-host .u1-tip {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  font-size: 0.84rem;
}
.vl-act-host .u1-tip-ico {
  display: none;
}
.vl-act-host .u1-opt,
.vl-act-host .u1-chip,
.vl-act-host .u1-match-btn,
.vl-act-host .u1-drum-chip,
.vl-act-host .u1-pledge-card {
  background: var(--surface, var(--surface));
  border-color: var(--line-mid, rgba(26, 35, 50, 0.12));
  box-shadow: none;
}
.vl-act-host .u1-opt:hover,
.vl-act-host .u1-chip:hover,
.vl-act-host .u1-match-btn:hover,
.vl-act-host .u1-drum-chip:hover,
.vl-act-host .u1-pledge-card:hover {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 40%, transparent);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.vl-act-host .u1-opt.is-on,
.vl-act-host .u1-chip.is-on,
.vl-act-host .u1-chip.is-selected,
.vl-act-host .u1-match-btn.is-pick,
.vl-act-host .u1-drum-chip.is-selected,
.vl-act-host .u1-pledge-card.is-on {
  border-color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 6%, var(--surface));
}
.vl-act-host .u1-opt-l,
.vl-act-host .u1-opt-ico {
  background: color-mix(in srgb, var(--navy, #243B55) 7%, var(--surface));
  color: var(--slate, #3D5A73);
}
.vl-act-host .u1-opt.is-on .u1-opt-l,
.vl-act-host .u1-opt.is-on .u1-opt-ico {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 14%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.vl-act-host .u1-opt.is-ok,
.vl-act-host .u1-chip.is-ok,
.vl-act-host .u1-match-btn.is-ok,
.vl-act-host .u1-block.is-ok {
  border-color: var(--output, #2F8F5B);
  background: color-mix(in srgb, var(--output, #2F8F5B) 8%, var(--surface));
}
.vl-act-host .u1-opt.is-ok .u1-opt-l {
  background: color-mix(in srgb, var(--output, #2F8F5B) 16%, var(--surface));
  color: var(--moss, #3F6F4E);
}
.vl-act-host .u1-opt.is-bad,
.vl-act-host .u1-chip.is-bad,
.vl-act-host .u1-match-btn.is-bad {
  border-color: var(--coral, #C45C4A);
  background: color-mix(in srgb, var(--coral, #C45C4A) 8%, var(--surface));
}
.vl-act-host .u1-bucket {
  background: var(--surface-2, var(--surface-2));
  border-color: var(--line-mid, rgba(26, 35, 50, 0.12));
}
.vl-act-host .u1-bucket:hover {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 35%, transparent);
  box-shadow: none;
}
.vl-act-host .u1-bucket-label {
  color: var(--slate, #3D5A73);
}
.vl-act-host .u1-fb.is-ok {
  background: color-mix(in srgb, var(--output, #2F8F5B) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--output, #2F8F5B) 22%, transparent);
  color: #1f5c3a;
}
.vl-act-host .u1-fb.is-bad {
  background: color-mix(in srgb, var(--coral, #C45C4A) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--coral, #C45C4A) 20%, transparent);
  color: #8a3a2e;
}
@media (max-width: 640px) {
  .vl-act-shell,
  .vl-act-shell--roomy {
    width: 100%;
    max-height: 96%;
    border-radius: 18px;
  }
  .vl-act-shell--roomy .vl-act-host,
  .vl-act-shell--roomy .vl-act-story,
  .vl-act-shell--roomy .vl-act-foot {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .vl-act-shell--roomy .vl-act-story { margin: 18px 16px 0; }
  .vl-act-shell--roomy .vl-act-host { padding: 14px 16px 10px; margin: 0; }
  .vl-act-shell--roomy .vl-act-foot { padding: 12px 16px 16px; margin: 0; }
  .vl-act-shell--roomy .u1-drum-pool.ts-pool {
    grid-template-columns: 1fr;
  }
  .vl-act-story { margin: 18px 16px 0; padding-bottom: 14px; }
  .vl-act-turn { font-size: clamp(1.08rem, 4.2vw, 1.22rem); max-width: none; }
  .vl-act-host { padding: 14px 16px 10px; }
  .vl-act-shell--no-story .vl-act-host,
  .vl-act-shell--roomy.vl-act-shell--no-story .vl-act-host { padding-top: 18px; }
  .vl-act-foot { padding: 12px 16px 16px; }
  .vl-act-continue,
  .vl-act-btn,
  .vl-gate-btn {
    width: auto;
    margin-left: auto;
  }
  .vl-act-foot-actions--split > * { flex: 1 1 100%; }
  .vl-replay-toast {
    bottom: 64px;
    font-size: 0.8rem;
    white-space: normal;
    max-width: calc(100% - 24px);
    text-align: center;
  }
}
.vl-shell { position: relative; }
.vl-frame { position: relative; overflow: hidden; }
/* Blur only the video surface — quiz card stays sharp above */
.vl-frame > .vl-player,
.vl-frame > .vl-placeholder,
.vl-frame > iframe,
.vl-frame > video {
  transition: filter 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
}
.vl-frame.is-quiz-blur > .vl-player,
.vl-frame.is-quiz-blur > .vl-placeholder,
.vl-frame.is-quiz-blur > iframe,
.vl-frame.is-quiz-blur > video {
  filter: blur(10px) saturate(0.85);
  transform: scale(1.03);
}
.vl-frame.is-gate-pending > .vl-player,
.vl-frame.is-gate-pending > .vl-placeholder,
.vl-frame.is-gate-pending > iframe,
.vl-frame.is-gate-pending > video {
  filter: blur(5px) saturate(0.92);
  transform: scale(1.012);
  opacity: 0.94;
}
.vl-frame.is-quiz-blur > .vl-player .vl-controls {
  opacity: 0 !important;
  pointer-events: none !important;
}
.vl-mq-opt.is-on {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 45%, transparent);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 10%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #0F6B6B) 16%, transparent);
}
.vl-act-host .vl-mq-q {
  margin: 0 0 14px;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink, var(--ink));
}
.vl-act-host .vl-mq-opts {
  display: grid;
  gap: 8px;
}
.vl-act-host .vl-mq-status {
  margin-top: 10px;
  min-height: 1.2em;
}
.vl-mq-card {
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  padding: 0 0 18px;
  background:
    radial-gradient(ellipse 70% 55% at 8% 0%, rgba(15, 107, 107, 0.09), transparent 58%),
    linear-gradient(168deg, var(--surface) 0%, var(--paper) 50%, var(--surface-2) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 22px 56px rgba(10, 18, 28, 0.32);
  animation: beatIn 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.vl-mq-card::before {
  content: '';
  display: block;
  height: 4px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #0F6B6B, #3D5A73);
}
.vl-mq-label {
  margin: 0 20px 8px;
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #0F6B6B 8%, var(--surface));
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  color: #0F6B6B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vl-mq-q {
  margin: 0 20px 14px;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink, var(--ink));
}
.vl-mq-opts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 20px;
}
.vl-mq-opt {
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(26, 35, 50, 0.1);
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  color: var(--ink, var(--ink));
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.vl-mq-opt:hover {
  border-color: color-mix(in srgb, #0F6B6B 45%, transparent);
  background: var(--surface);
  transform: translateY(-1px);
}
.vl-mq-opt.is-correct {
  background: color-mix(in srgb, #2F8F5B 12%, var(--surface));
  border-color: #2F8F5B;
}
.vl-mq-opt.is-wrong {
  background: color-mix(in srgb, #C45C4A 10%, var(--surface));
  border-color: #C45C4A;
}
.vl-mq-status {
  margin: 12px 20px 0;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  display: grid;
  gap: 8px;
}

/* ---- Unit 4 script-sync: media cards, pipeline diagram, RTFTC hub ---- */
.ld-card--media .ld-media {
  margin: 0 0 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 107, 107, 0.12);
  background: var(--surface-2);
}
.ld-media img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: var(--surface);
}
.ld-media figcaption,
.ld-media--ph figcaption {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-top: 1px solid rgba(15, 107, 107, 0.08);
}
.ld-media-ph {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 140px;
  padding: 24px;
  color: #0F6B6B;
  text-align: center;
}
.ld-media-ph span {
  font-size: 0.85rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.gc-tour-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 650;
  color: #0F6B6B;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gc-tour-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}
.gc-tour-body {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.gc-lab.gc-tour-focus {
  outline: 3px solid color-mix(in srgb, var(--gc, #0F6B6B) 55%, transparent);
  outline-offset: 2px;
  z-index: 2;
  position: relative;
}

.ts-placed {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
}
.ts-placed-ico {
  pointer-events: none;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
.ts-placed-ico iconify-icon,
.ts-app-ico iconify-icon {
  pointer-events: none;
}
.ts-placed-name,
.ts-placed-x {
  display: none !important;
}

/* Fig 4.2 — 2×3 explore diagram (soft multi-tone, one accent per step) */
.lp-explore { display: grid; gap: 18px; }
.lp-diagram {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  grid-template-rows: auto 22px auto 28px;
  grid-template-areas:
    "in a12 tok a23 ctx"
    ". . . . a34"
    "out a65 detok a54 next"
    ". . . . loop";
  gap: 12px 8px;
  align-items: stretch;
  margin-bottom: 4px;
}
.lp-box {
  --lp: var(--brand, #0F6B6B);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--lp) 18%, #e4e9ef);
  background: color-mix(in srgb, var(--lp) 3.5%, var(--surface));
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.lp-box b {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--lp);
  line-height: 1.3;
}
.lp-box span {
  font-size: 0.72rem;
  font-weight: 450;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  line-height: 1.35;
}
.lp-box:hover {
  border-color: color-mix(in srgb, var(--lp) 36%, #d5dde6);
  background: color-mix(in srgb, var(--lp) 5.5%, var(--surface));
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26, 35, 50, 0.05);
}
.lp-box.is-on,
.lp-box.is-opened {
  border-color: color-mix(in srgb, var(--lp) 42%, #cfd7e0);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lp) 14%, transparent);
  background: color-mix(in srgb, var(--lp) 6%, var(--surface));
}
.lp-box.is-on b,
.lp-box.is-opened b {
  color: var(--lp);
}
.lp-arrow {
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.lp-loop {
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 72%, transparent);
  text-align: center;
}
.lp-popup {
  --lp: var(--brand, #0F6B6B);
  position: relative;
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--lp) 2.5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lp) 10%, transparent);
}
.lp-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.lp-popup-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: color-mix(in srgb, var(--lp) 62%, var(--ink));
  padding-right: 24px;
}
.lp-popup-tip {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.lp-popup-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.lp-explore-count {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.lp-controls--mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.u4v-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .lp-diagram {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .lp-diagram .lp-box { grid-area: auto !important; }
  .lp-diagram .lp-arrow,
  .lp-diagram .lp-loop { display: none; }
}

/* RTFTC hub-and-spoke (চিত্র ৪.৭) */
.rtcft-hub--spoke .rtcft-spoke {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin: 8px auto 16px;
}
.rtcft-hub-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(160deg, #0F6B6B, #0c5555);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 8px 24px rgba(15, 107, 107, 0.28);
  z-index: 1;
}
.rtcft-sat {
  position: absolute;
  width: 118px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--kh, #0F6B6B) 35%, transparent);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: center;
  box-shadow: 0 4px 14px rgba(15, 40, 50, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rtcft-sat:hover { transform: scale(1.04); }
.rtcft-sat.is-on {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kh, #0F6B6B) 35%, transparent);
  background: color-mix(in srgb, var(--kh, #0F6B6B) 8%, var(--surface));
}
.rtcft-sat-letter {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--kh, #0F6B6B);
}
.rtcft-sat-label {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.rtcft-sat--top { left: 50%; top: 0; transform: translateX(-50%); }
.rtcft-sat--top:hover,
.rtcft-sat--top.is-on { transform: translateX(-50%) scale(1.04); }
.rtcft-sat--right { right: 0; top: 32%; }
.rtcft-sat--br { right: 8%; bottom: 4%; }
.rtcft-sat--bl { left: 8%; bottom: 4%; }
.rtcft-sat--left { left: 0; top: 32%; }
.rtcft-spoke-detail {
  margin-top: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 107, 107, 0.12);
  background: var(--surface);
  min-height: 120px;
}
@media (max-width: 520px) {
  .rtcft-hub--spoke .rtcft-spoke {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .rtcft-hub-core {
    position: static;
    transform: none;
    margin: 0 auto 8px;
    width: 100%;
    max-width: 140px;
  }
  .rtcft-sat {
    position: static;
    width: calc(50% - 8px);
  }
  .rtcft-sat--top:hover,
  .rtcft-sat--top.is-on { transform: scale(1.04); }
}

/* ---- Doc figure diagrams (no screenshots) ---- */
.u4-fig-ph {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 160px;
  padding: 28px 16px;
  text-align: center;
  color: #0F6B6B;
  background: linear-gradient(180deg, #f7faf9, #eef5f4);
  border-radius: 12px;
  border: 1px dashed rgba(15, 107, 107, 0.28);
}
.u4-fig-ph span { font-weight: 700; font-size: 0.95rem; }
.u4-fig-ph em {
  font-style: normal;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  max-width: 28ch;
}

.u4-diag-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 70%, transparent);
}
.u4-diag-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--brand, #0F6B6B);
  line-height: 1.35;
}

.tf-flow {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.12);
}
.tf-input {
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid rgba(26, 35, 50, 0.1);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.tf-arrow {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(15, 107, 107, 0.45);
}
.tf-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, #0F6B6B 10%, var(--surface));
  border: 1px solid rgba(15, 107, 107, 0.22);
  color: #0F6B6B;
  font-weight: 700;
  font-size: 0.9rem;
}
.tf-tokens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
}
.tf-tok {
  padding: 10px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(15, 107, 107, 0.28);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  font-weight: 650;
  color: #0F6B6B;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.tf-tok.is-in {
  opacity: 1;
  transform: none;
}

.pf-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.pf-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 118px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1.5px solid rgba(15, 107, 107, 0.18);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pf-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, #0F6B6B 8%, var(--surface));
  color: #0F6B6B;
}
.pf-node.is-on {
  border-color: #0F6B6B;
  box-shadow: 0 0 0 2px color-mix(in srgb, #0F6B6B 20%, transparent);
}
.pf-arrow {
  align-self: center;
  font-weight: 700;
  color: rgba(15, 107, 107, 0.4);
}

.pe-cycle {
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1;
  margin: 8px auto 14px;
}
.pe-cycle-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(160deg, #2563A8, #1e4f86);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(37, 99, 168, 0.28);
}
.pe-sat {
  position: absolute;
  width: 128px;
  padding: 8px 8px 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(37, 99, 168, 0.25);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 40, 50, 0.05);
}
.pe-sat.is-on {
  border-color: #2563A8;
  box-shadow: 0 0 0 2px color-mix(in srgb, #2563A8 22%, transparent);
}
.pe-sat-ico { color: #2563A8; display: inline-flex; }
.pe-sat-n {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #2563A8;
}
.pe-sat-l {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.pe-sat--0 { left: 50%; top: 0; transform: translateX(-50%); }
.pe-sat--1 { right: 0; top: 22%; }
.pe-sat--2 { right: 10%; bottom: 6%; }
.pe-sat--3 { left: 10%; bottom: 6%; }
.pe-sat--4 { left: 0; top: 22%; }
@media (max-width: 520px) {
  .pe-cycle {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .pe-cycle-core { position: static; transform: none; margin: 0 auto 8px; }
  .pe-sat { position: static; width: calc(50% - 8px); }
  .pe-sat--0 { transform: none; }
}

.vc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .vc-compare { grid-template-columns: 1fr; }
}
.vc-col {
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.vc-col h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}
.vc-col--trad h3 { color: #2563A8; }
.vc-col--vibe h3 { color: #2F8F5B; }
.vc-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(26, 35, 50, 0.1);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.vc-step b {
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 0.72rem;
  color: #fff;
}
.vc-col--trad .vc-step b { background: #2563A8; }
.vc-col--vibe .vc-step b { background: #2F8F5B; }
.vc-step.is-on {
  box-shadow: 0 0 0 2px color-mix(in srgb, #0F6B6B 20%, transparent);
}
.vc-col--trad .vc-step:nth-child(2) { border-color: color-mix(in srgb, #2563A8 35%, transparent); }
.vc-col--trad .vc-step:nth-child(4) { border-color: color-mix(in srgb, #C48A2A 40%, transparent); }
.vc-col--trad .vc-step:nth-child(6) { border-color: color-mix(in srgb, #C45C4A 40%, transparent); }
.vc-col--vibe .vc-step:nth-child(2) { border-color: color-mix(in srgb, #2F8F5B 40%, transparent); }
.vc-col--vibe .vc-step:nth-child(4) { border-color: color-mix(in srgb, #C48A2A 40%, transparent); }
.vc-col--vibe .vc-step:nth-child(6) { border-color: color-mix(in srgb, #C45C4A 40%, transparent); }
.vc-down {
  display: block;
  text-align: center;
  margin: 4px 0;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
  font-weight: 700;
}

/* Unit 4 — weak vs strong prompt table (doc §৪.২.১) */
.ws-block {
  margin: 12px 0 18px;
}
.ws-block-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.ws-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(26, 35, 50, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.ws-table-head,
.ws-table-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 0;
}
.ws-table-head {
  background: color-mix(in srgb, var(--teal, #0f6b6b) 12%, var(--surface));
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}
.ws-table-head > span,
.ws-cell {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.ws-table-head > span + span,
.ws-cell + .ws-cell {
  border-left: 1px solid var(--line);
}
.ws-table-row:last-child .ws-cell {
  border-bottom: none;
}
.ws-cell .vb {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.ws-cell--weak {
  background: color-mix(in srgb, #c45c4a 6%, var(--surface));
}
.ws-cell--strong {
  background: color-mix(in srgb, #2f8f5b 6%, var(--surface));
}
.ws-cell--why {
  background: color-mix(in srgb, #c48a2a 5%, var(--surface));
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.u4-assign-card {
  margin-top: 10px;
}
.ts-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--app, #0f6b6b);
}
.ts-brand-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--app, #0f6b6b);
  background: color-mix(in srgb, var(--app, #0f6b6b) 14%, var(--surface));
  border-radius: 7px;
  z-index: 0;
}
/* Hide letter fallback once the Iconify glyph is present (avoids Gh/Mj/ff overlays) */
.ts-brand-mark:has(iconify-icon) .ts-brand-letter {
  opacity: 0;
  pointer-events: none;
}
.ts-brand-mark iconify-icon {
  position: relative;
  z-index: 1;
  color: var(--app, #0f6b6b) !important;
  filter: none;
  pointer-events: none;
}
.ts-app-ico .ts-brand-letter {
  border-radius: 9px;
  background: transparent;
}
@media (max-width: 780px) {
  .ws-table-head,
  .ws-table-row {
    grid-template-columns: 1fr;
  }
  .ws-table-head > span + span,
  .ws-cell + .ws-cell {
    border-left: none;
  }
}
/* ============================================================
   Unit 5 sims -- white stages, smooth motion paths
   ============================================================ */
.u5-sim-host {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.u5-sim {
  --u5-ink: var(--ink);
  --u5-navy: var(--navy);
  --u5-teal: var(--brand);
  --u5-ict: var(--secondary);
  --u5-coral: var(--coral);
  --u5-amber: var(--amber);
  --u5-moss: var(--moss);
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  border-radius: 20px;
  padding: 18px 20px 20px;
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.05);
  transform: translateZ(0);
  isolation: isolate;
}
.u5-door,
.u5-plan,
.u5-walls,
.u5-fw-stage,
.u5-vpn-tunnel,
.u5-signs-face {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.u5-sim [hidden] { display: none !important; }
.u5-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.u5-photo--obj {
  object-fit: contain;
  object-position: center;
  padding: 4px;
  box-sizing: border-box;
}
.u5-scene-head { margin-bottom: 14px; }
.u5-scene-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u5-ict);
}
.u5-scene-caption {
  margin: 14px auto 0;
  padding: 9px 16px;
  width: fit-content;
  max-width: 100%;
  border-radius: 10px;
  background: color-mix(in srgb, var(--u5-navy) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--u5-navy) 12%, transparent);
  font-size: 0.94rem;
  font-weight: 650;
  text-align: center;
  color: var(--u5-ink);
  line-height: 1.5;
}
.u5-scene-explain {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--u5-navy) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--u5-navy) 10%, transparent);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  text-align: left;
}
.u5-sim .ld-points--num,
.ld-points.ld-points--num {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  counter-reset: ld-step;
}
.u5-sim .ld-points--num > li,
.ld-points.ld-points--num > li {
  counter-increment: ld-step;
  padding-left: 1.55rem;
}
.u5-sim .ld-points--num > li::before,
.ld-points.ld-points--num > li::before {
  content: counter(ld-step) '.';
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Instruction line + play controls (platform chrome) */
.u5-scene-note {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.u5-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Cards dropped into a bucket (Serial 4) — moveable like Module 4 sorter */
.u5-drum-placed.ts-placed {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  justify-content: flex-start;
  cursor: grab;
  animation: u5-pop-in 0.3s ease;
}
.u5-drum-placed.ts-placed:active {
  cursor: grabbing;
}
.u5-drum-placed .ts-placed-ico {
  width: auto;
  height: auto;
  flex: none;
}
.u5-drum-placed-name {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--u5-ink);
  white-space: nowrap;
}
.u5-drum-placed-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.u5-drum-placed.is-ok .u5-drum-placed-mark {
  color: #2f8f5b;
}
.u5-drum-placed.is-bad .u5-drum-placed-mark {
  color: #c45c4a;
}

/* Auth factor drums — Module 4 tools-sorter look */
.u5-auth-drums .u5-drum-pool.ts-pool {
  margin-bottom: 18px;
  min-height: 96px;
}
.u5-auth-drums .u5-drum-chip.ts-app {
  width: auto;
  min-width: 88px;
  max-width: 118px;
  padding: 6px 4px;
}
.u5-auth-drums .u5-drum-chip .ts-app-name {
  font-size: 0.66rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u5-auth-drums .u5-drum-chip.is-selected .ts-app-ico {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px color-mix(in srgb, var(--app, #0F6B6B) 55%, transparent);
}
.u5-auth-drums .u5-drums.ts-buckets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
  justify-items: center;
}
.u5-auth-drums .u5-drum.ts-bucket {
  max-width: 168px;
}
.u5-auth-drums .u5-drum-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u5-auth-drums .ts-bucket.is-target .ts-bucket-rim,
.u5-auth-drums .ts-bucket.is-over .ts-bucket-rim {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bk, #0F6B6B) 35%, transparent),
    0 10px 22px color-mix(in srgb, var(--bk, #0F6B6B) 16%, transparent);
}
.u5-auth-drums .ts-retry {
  margin-top: 10px;
}
@media (max-width: 720px) {
  .u5-auth-drums .u5-drums.ts-buckets {
    grid-template-columns: 1fr;
  }
  .u5-auth-drums .u5-drum.ts-bucket {
    max-width: 200px;
  }
}

/* Serial 2 — door scene */
.u5-door {
  position: relative;
  min-height: 306px;
  padding: 18px 16px 22px;
  border-radius: 18px;
  border: 1px solid rgba(36, 59, 85, 0.1);
  background:
    radial-gradient(115% 78% at 50% 0%, #fbfbfc 0%, #f0f2f5 58%, #e6eaef 100%);
  overflow: hidden;
  color: var(--u5-ink);
}
.u5-door::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  background: linear-gradient(180deg, rgba(36, 59, 85, 0.07), rgba(36, 59, 85, 0.02));
  border-top: 1px solid rgba(36, 59, 85, 0.14);
}
.u5-door-sign {
  position: absolute;
  top: 16px;
  right: 4%;
  z-index: 3;
  max-width: 66%;
  margin: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--u5-navy);
  color: #fff;
  font-weight: 650;
  font-size: 0.86rem;
  text-align: center;
  box-shadow: 0 6px 16px rgba(36, 59, 85, 0.18);
}
.u5-door-room {
  position: absolute;
  right: 6%;
  bottom: 58px;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 14px;
}
.u5-door-frame {
  position: relative;
  width: 152px;
  height: 198px;
  padding: 9px 9px 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, #43607b, #2a4157);
  box-shadow: 0 12px 26px rgba(36, 59, 85, 0.16);
}
.u5-door-frame::before {
  content: '';
  position: absolute;
  inset: 9px 9px 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #15303f, #0c1f2b);
}
.u5-door-leaf {
  position: absolute;
  inset: 9px 9px 0;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(155deg, #12756f 0%, #0b4a48 100%);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
}
.u5-door-leaf::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 8px;
  height: 22px;
  margin-top: -11px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
}
.u5-door-leaf.is-open { transform: perspective(680px) rotateY(-68deg); }
.u5-door-jamb {
  position: absolute;
  left: 9px;
  top: 9px;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.u5-door-plate {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 92%;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--u5-navy);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.u5-door-plate-ico { display: inline-flex; color: var(--u5-teal); }
.u5-door-reader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 34px;
  padding: 10px 6px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  box-shadow: 0 4px 10px rgba(36, 59, 85, 0.08);
  margin-bottom: 34px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.u5-door-reader-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(36, 59, 85, 0.2);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.u5-door-reader-slot {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: rgba(36, 59, 85, 0.18);
}
.u5-door-reader.is-ok { border-color: rgba(47, 143, 91, 0.5); }
.u5-door-reader.is-ok .u5-door-reader-led {
  background: #2f8f5b;
  box-shadow: 0 0 0 4px rgba(47, 143, 91, 0.16);
}
.u5-door-reader.is-no { border-color: rgba(196, 92, 74, 0.5); }
.u5-door-reader.is-no .u5-door-reader-led {
  background: #c45c4a;
  box-shadow: 0 0 0 4px rgba(196, 92, 74, 0.16);
}
.u5-door-queue {
  position: absolute;
  left: 4%;
  bottom: 52px;
  z-index: 1;
  width: 58%;
  height: 6px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(36, 59, 85, 0.16) 0 7px, transparent 7px 14px);
}
.u5-door-actor {
  position: absolute;
  left: 0;
  bottom: 58px;
  width: 100%;
  z-index: 3;
  transform: translate3d(19%, 0, 0);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  will-change: transform;
  pointer-events: none;
  backface-visibility: hidden;
}
.u5-door-actor-body {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  transition: transform 0.4s ease, opacity 0.4s ease;
  backface-visibility: hidden;
}
.u5-door-actor--ok { transform: translate3d(19%, 0, 0); }
.u5-door-actor--no { transform: translate3d(7%, 0, 0); }
.u5-door-actor.is-walk { transform: translate3d(62%, 0, 0); }
.u5-door-actor.is-enter {
  transform: translate3d(80%, 0, 0);
  opacity: 0;
}
.u5-door-actor.is-enter .u5-door-actor-body {
  transform: translateX(-50%) scale(0.9);
}
.u5-door-actor.is-blocked { transform: translate3d(58%, 0, 0); }
.u5-door-actor.is-blocked .u5-door-actor-body {
  animation: u5-door-bump 0.5s ease;
}
.u5-door-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #d7e0ea;
  border: 2px solid var(--surface);
  color: var(--u5-navy);
  box-shadow: 0 6px 14px rgba(36, 59, 85, 0.16);
}
.u5-door-badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  animation: u5-pop-in 0.3s ease;
}
.u5-door-badge.is-ok { background: #2f8f5b; }
.u5-door-badge.is-no { background: #c45c4a; }
.u5-door-card {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid rgba(37, 99, 168, 0.35);
  color: #1f4f80;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  animation: u5-pop-in 0.3s ease;
}

/* Serial 6 — authorization floor plan */
.u5-plan {
  position: relative;
  padding: 16px 14px 82px;
  border-radius: 18px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  overflow: hidden;
}
.u5-plan-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.u5-plan-room {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-height: 104px;
  padding: 16px 10px 22px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--line-mid);
  color: var(--u5-ink);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.u5-plan-room strong { font-size: 0.86rem; font-weight: 700; }
.u5-plan-room-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--u5-navy) 8%, var(--surface));
  color: var(--u5-navy);
}
.u5-plan-room.is-active {
  border-color: color-mix(in srgb, var(--u5-navy) 35%, transparent);
  box-shadow: 0 8px 20px rgba(36, 59, 85, 0.08);
}
.u5-plan-room.is-open { border-color: color-mix(in srgb, #2f8f5b 45%, transparent); }
.u5-plan-room.is-locked { border-color: color-mix(in srgb, #c45c4a 45%, transparent); }
.u5-plan-room.is-denied { animation: u5-shake 0.45s ease; }
.u5-plan-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #fff;
  animation: u5-pop-in 0.3s ease;
}
.u5-plan-mark.is-ok { background: #2f8f5b; }
.u5-plan-mark.is-no { background: #c45c4a; }
.u5-plan-lock {
  position: absolute;
  top: 12px;
  left: 10px;
  display: inline-flex;
  color: #c45c4a;
}
.u5-plan-lock.is-shake { animation: u5-shake 0.45s ease; }
.u5-plan-door {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 34px;
  height: 5px;
  margin-left: -17px;
  border-radius: 3px 3px 0 0;
  background: rgba(36, 59, 85, 0.22);
}
.u5-plan-room.is-open .u5-plan-door { background: #2f8f5b; }
.u5-plan-room.is-locked .u5-plan-door { background: #c45c4a; }
.u5-plan-corridor {
  position: relative;
  height: 34px;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.u5-plan-corridor-line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(36, 59, 85, 0.24) 0 8px, transparent 8px 16px);
}
.u5-plan-walkers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 0;
}
.u5-plan-walker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--u5-ink);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translate3d(4%, 0, 0);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  pointer-events: none;
  backface-visibility: hidden;
}
.u5-plan-walker-body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  box-shadow: 0 6px 14px rgba(36, 59, 85, 0.1);
  transform: translateX(-50%);
  transition: transform 0.35s ease;
  backface-visibility: hidden;
}
.u5-plan-walker-ico {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #d7e0ea;
  color: var(--u5-teal);
}
.u5-plan-walker--teacher .u5-plan-walker-body { border-color: rgba(47, 143, 91, 0.4); }
.u5-plan-walker--teacher .u5-plan-walker-ico { color: #2f8f5b; }
.u5-plan-walker.is-in .u5-plan-walker-body { transform: translateX(-50%) translateY(-12px); }
.u5-plan-walker.is-stop .u5-plan-walker-body { animation: u5-door-bump 0.5s ease; }

/* Layers */
.u5-layer-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.u5-layer-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 128px;
  padding: 16px 14px 14px;
  border: 1px solid rgba(15, 107, 107, 0.18);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.u5-layer-step:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 107, 107, 0.1); }
.u5-layer-step.is-active {
  border-color: color-mix(in srgb, var(--brand, #0f6b6b) 40%, transparent);
  background: color-mix(in srgb, var(--brand, #0f6b6b) 6%, var(--surface));
}
.u5-layer-num {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(15, 107, 107, 0.45);
}
.u5-layer-ico { color: var(--brand, #0f6b6b); }
.u5-layer-step strong { font-size: 0.92rem; font-weight: 700; }
.u5-layer-step em {
  font-style: normal;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u5-layer-arrow { align-self: center; color: color-mix(in srgb, var(--ink) 30%, transparent); font-weight: 700; }
.u5-layer-panel {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.12);
  padding: 14px 16px;
}
.u5-layer-def {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ink);
}
.u5-layer-def-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--u5-teal) 9%, var(--surface));
  color: var(--u5-teal);
  flex-shrink: 0;
}
.u5-layer-panel ul {
  margin: 0;
  padding-left: 1.1rem;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.u5-layer-ex {
  display: grid;
  gap: 6px;
  padding-left: 0 !important;
  list-style: none;
}
.u5-layer-ex li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
}
.u5-layer-ex li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--u5-teal) 55%, transparent);
}
.u5-layer-tick {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #2f8f5b;
  color: #fff;
}
.u5-layer-step.is-opened .u5-layer-tick { display: grid; animation: u5-pop-in 0.3s ease; }

/* Defense walls — light cards, soft path, icon-led */
.u5-walls {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 210px;
  padding: 24px 18px 24px 92px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fbfaf8 0%, var(--surface-2) 100%);
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line);
}
.u5-walls-lane {
  position: absolute;
  left: 4%;
  right: 12%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: repeating-linear-gradient(90deg, rgba(26, 35, 50, 0.22) 0 8px, transparent 8px 16px);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.u5-walls-lane::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: color-mix(in srgb, var(--ink) 28.000000000000004%, transparent);
}
.u5-walls-attacker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 58px;
  padding: 8px 6px;
  border-radius: 14px;
  background: var(--surface);
  color: #5c3a36;
  border: 1px solid rgba(196, 92, 74, 0.35);
  box-shadow: 0 6px 16px var(--line);
  transform: translate3d(10px, 42%, 0);
  transition:
    transform 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s ease,
    background 0.35s ease;
  will-change: transform;
}
.u5-walls-hood {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 28px;
  height: 14px;
  margin-left: -14px;
  border-radius: 14px 14px 4px 4px;
  background: #3a2a28;
  z-index: 1;
  pointer-events: none;
}
.u5-walls-hood::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -4px;
  height: 8px;
  border-radius: 0 0 8px 8px;
  background: #3a2a28;
  opacity: 0.85;
}
.u5-walls-ico {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #d7e0ea;
  color: #a84a3b;
}
.u5-walls-attacker small {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.15;
}
.u5-walls-attacker.is-stop {
  background: color-mix(in srgb, var(--coral) 12%, var(--surface));
  border-color: rgba(196, 92, 74, 0.5);
  box-shadow: 0 0 0 3px rgba(196, 92, 74, 0.12);
}
.u5-wall {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  border: 1px solid rgba(15, 107, 107, 0.16);
  box-shadow: 0 4px 14px rgba(26, 35, 50, 0.04);
  transition: transform 0.45s ease, opacity 0.45s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  min-height: 148px;
}
.u5-wall-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, #0f6b6b 8%, var(--surface));
  color: #0f6b6b;
  margin-bottom: 2px;
}
.u5-wall strong { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.u5-wall.is-hit { animation: u5-shake 0.32s ease; }
.u5-wall-crack {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 42%, var(--line) 43%, transparent 44%),
    linear-gradient(70deg, transparent 55%, rgba(26, 35, 50, 0.07) 56%, transparent 58%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.u5-wall.is-cracked {
  opacity: 0.55;
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--surface-2);
  transform: none;
  box-shadow: none;
}
.u5-wall.is-cracked .u5-wall-crack { opacity: 1; }
.u5-wall.is-cracked .u5-wall-ico {
  background: var(--line);
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}
.u5-wall.is-hold {
  border-color: color-mix(in srgb, #0f6b6b 40%, transparent);
  background: color-mix(in srgb, #0f6b6b 6%, var(--surface));
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.1);
}
.u5-wall.is-hold .u5-wall-ico {
  background: color-mix(in srgb, #0f6b6b 14%, var(--surface));
  color: var(--brand);
}
.u5-wall-block {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: #a84a3b;
  border: 1px solid rgba(196, 92, 74, 0.4);
  animation: u5-pop-in 0.35s ease;
}
.u5-walls-data {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 76px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.74rem;
}
.u5-walls-data-ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  color: #0f6b6b;
  border: 1px solid rgba(15, 107, 107, 0.18);
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.05);
}
.u5-walls-data-pulse {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(15, 107, 107, 0.08);
  animation: u5-pulse-dot 2.4s ease infinite;
}
.u5-fw-controls { margin-top: 14px; }

/* Firewall — soft stage, muted accents */
.u5-fw-counters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.u5-fw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(26, 35, 50, 0.1);
}
.u5-fw-chip.is-ok {
  background: color-mix(in srgb, #0f6b6b 7%, var(--surface));
  color: var(--brand);
  border-color: color-mix(in srgb, #0f6b6b 22%, transparent);
}
.u5-fw-chip.is-bad {
  background: color-mix(in srgb, #c45c4a 7%, var(--surface));
  color: #8f4338;
  border-color: color-mix(in srgb, #c45c4a 22%, transparent);
}
.u5-fw-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 250px;
  padding: 22px 14px 56px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fbfaf8 0%, var(--surface-2) 100%);
  overflow: hidden;
  border: 1px solid var(--line);
}
.u5-fw-wire {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 48%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(26, 35, 50, 0.2) 0 8px, transparent 8px 16px);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}
.u5-fw-wire::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: color-mix(in srgb, var(--ink) 28.000000000000004%, transparent);
}
.u5-fw-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 130px;
  position: relative;
  z-index: 1;
}
.u5-fw-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.u5-fw-cloud {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: #3d4f66;
  border: 1px solid rgba(26, 35, 50, 0.1);
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.04);
}
.u5-fw-wall {
  position: relative;
  z-index: 2;
  width: 112px;
  min-height: 176px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(168, 74, 59, 0.12) 21px 23px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(168, 74, 59, 0.12) 40px 42px),
    linear-gradient(180deg, var(--surface), #fdf6f3);
  border: 1px solid rgba(168, 74, 59, 0.22);
  box-shadow: 0 6px 18px rgba(26, 35, 50, 0.05);
  overflow: hidden;
}
.u5-fw-wall.is-scanning .u5-fw-scan {
  opacity: 1;
  animation: u5-scan-beam 1s ease;
}
.u5-fw-wall.is-block-flash {
  box-shadow: 0 0 0 3px rgba(196, 92, 74, 0.16);
  border-color: rgba(196, 92, 74, 0.35);
}
.u5-fw-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(15, 107, 107, 0.1), transparent);
  opacity: 0;
  pointer-events: none;
}
.u5-fw-rules {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 106px;
  padding: 12px 3px;
  border-radius: 12px;
  background: transparent;
  border: none;
  font-size: 0.65rem;
  font-weight: 650;
  text-align: center;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.u5-fw-rules-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, #0f6b6b 8%, var(--surface));
  color: #0f6b6b;
  margin-bottom: 2px;
}
.u5-fw-rules strong {
  display: block;
  font-size: 0.76rem;
  margin-bottom: 0;
  color: var(--ink);
}
.u5-fw-impact {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: #a84a3b;
  border: 1px solid rgba(196, 92, 74, 0.4);
  z-index: 3;
  animation: u5-pop-in 0.25s ease;
}
.u5-fw-laptop {
  width: 76px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.16);
  color: #0f6b6b;
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.u5-fw-laptop.is-receive {
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.12);
  border-color: color-mix(in srgb, #0f6b6b 35%, transparent);
  transform: scale(1.05);
}
.u5-fw-lane {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.u5-fw-trash {
  position: absolute;
  left: 42%;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 52px;
  padding: 8px 4px;
  border-radius: 12px;
  background: var(--surface);
  color: #8f4338;
  font-size: 0.62rem;
  font-weight: 700;
  border: 1px solid rgba(196, 92, 74, 0.22);
  z-index: 2;
}
.u5-fw-trash.is-shake { animation: u5-shake 0.4s ease; }
.u5-fw-pkt {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
  background: var(--surface);
  box-shadow: 0 6px 14px var(--line);
  transition:
    transform 1.05s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease;
  z-index: 6;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  will-change: transform;
}
.u5-fw-pkt-seal { display: inline-flex; opacity: 0.72; }
.u5-fw-pkt-rows { display: grid; gap: 1px; }
.u5-fw-pkt-rows span {
  display: flex;
  gap: 6px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.u5-fw-pkt-rows i {
  font-style: normal;
  font-weight: 600;
  min-width: 30px;
  opacity: 0.5;
}
.u5-fw-note {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--amber) 18%, var(--surface));
  border: 1px solid rgba(196, 138, 42, 0.35);
  color: #7a5c2e;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.u5-fw-node-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u5-fw-pkt.is-ok {
  background: var(--surface);
  color: var(--brand);
  border: 1px solid rgba(15, 107, 107, 0.22);
}
.u5-fw-pkt.is-bad {
  background: var(--surface);
  color: #8f4338;
  border: 1px solid rgba(196, 92, 74, 0.25);
}
.u5-fw-pkt.is-pass { box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.1); }
.u5-fw-pkt.is-block {
  /* do not set transform here — JS owns translate3d motion */
  box-shadow: 0 0 0 3px rgba(196, 92, 74, 0.14);
  filter: saturate(0.9);
}

/* VPN — quiet nodes, soft tunnel */
.u5-vpn-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.u5-vpn-steps li {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  background: var(--surface);
  border: 1px solid rgba(26, 35, 50, 0.1);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.u5-vpn-steps li.is-active {
  color: var(--brand);
  background: color-mix(in srgb, #0f6b6b 8%, var(--surface));
  border-color: color-mix(in srgb, #0f6b6b 28%, transparent);
}
.u5-vpn-steps li.is-done {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: var(--surface-2);
  border-color: var(--line);
}
.u5-vpn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 14px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fbfaf8 0%, var(--surface-2) 100%);
  color: var(--ink);
  border: 1px solid var(--line);
}
.u5-vpn-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 100px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(26, 35, 50, 0.1);
  color: #0f6b6b;
  font-weight: 650;
  font-size: 0.78rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(26, 35, 50, 0.04);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.u5-vpn-node-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  background: color-mix(in srgb, #0f6b6b 7%, var(--surface));
  color: #0f6b6b;
  margin-bottom: 2px;
}
.u5-vpn-node[data-node="laptop"] .u5-vpn-node-ico {
  width: 56px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface);
}
.u5-vpn-node strong { color: var(--ink); font-size: 0.82rem; font-weight: 700; }
.u5-vpn-node small {
  font-size: 0.68rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u5-vpn-node small.is-on { color: var(--brand); font-weight: 700; }
.u5-vpn-node em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  transition: opacity 0.4s ease, color 0.35s ease;
}
.u5-vpn-node em.is-fade { opacity: 0.3; text-decoration: line-through; }
.u5-vpn-node em.is-masked { color: var(--brand); font-weight: 700; }
.u5-vpn-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.2);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.75rem;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.u5-vpn-app.is-on {
  background: color-mix(in srgb, #0f6b6b 10%, var(--surface));
  color: var(--brand);
  border-color: color-mix(in srgb, #0f6b6b 35%, transparent);
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.08);
}
.u5-vpn-tunnel {
  position: relative;
  width: min(268px, 50vw);
  height: 84px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px dashed rgba(26, 35, 50, 0.16);
  overflow: hidden;
  container-type: inline-size;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.u5-vpn-tunnel.is-active {
  border-style: solid;
  border-color: color-mix(in srgb, #0f6b6b 40%, transparent);
  background: color-mix(in srgb, #0f6b6b 5%, var(--surface));
  box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.06);
}
.u5-vpn-tunnel-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(15, 107, 107, 0.08), transparent);
  animation: u5-tunnel-glow 2.2s linear infinite;
  opacity: 0.4;
}
.u5-vpn-tunnel.is-active .u5-vpn-tunnel-glow { opacity: 1; }
.u5-vpn-pkt {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(8px, -50%, 0);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(26, 35, 50, 0.14);
  font-size: 0.68rem;
  font-weight: 700;
  z-index: 2;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 2px 8px rgba(26, 35, 50, 0.05);
  will-change: transform;
}
.u5-vpn-pkt.is-encrypted {
  background: color-mix(in srgb, #0f6b6b 10%, var(--surface));
  color: var(--brand);
  border-color: color-mix(in srgb, #0f6b6b 30%, transparent);
  box-shadow: none;
}
.u5-vpn-pkt.is-run { animation: u5-tunnel 2.05s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.u5-vpn-hops {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  display: flex;
  justify-content: space-evenly;
  z-index: 1;
  pointer-events: none;
}
.u5-vpn-hop {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.u5-vpn-hop i {
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.u5-vpn-spies {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  display: flex;
  justify-content: space-evenly;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none;
  z-index: 1;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.u5-vpn-spies span {
  display: inline-flex;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 50, 0.12);
  background: #d7e0ea;
}
.u5-vpn-spies.is-blind {
  filter: blur(2.2px);
  opacity: 0.55;
}
.u5-vpn-card {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
  border: 1px dashed rgba(196, 138, 42, 0.5);
  color: #7a5c2e;
  transition: opacity 0.4s ease;
}
.u5-vpn-card.is-fade { opacity: 0.32; text-decoration: line-through; }
.u5-vpn-node[data-node="server"] .u5-vpn-card {
  background: color-mix(in srgb, var(--u5-teal) 8%, var(--surface));
  border-style: solid;
  border-color: color-mix(in srgb, var(--u5-teal) 30%, transparent);
  color: var(--brand);
}
.u5-vpn-ip {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  transition: color 0.35s ease;
}
.u5-vpn-ip.is-masked { color: var(--brand); }
.u5-vpn-pkt.is-sealed {
  background: color-mix(in srgb, var(--u5-teal) 10%, var(--surface));
  color: var(--brand);
  border-color: color-mix(in srgb, var(--u5-teal) 32%, transparent);
  letter-spacing: 0.04em;
}
.u5-vpn-steps { list-style: none; }

/* Deepfake */
.u5-df-ety {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.u5-df-word {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.18);
  color: #243b55;
  font-weight: 600;
  font-size: 0.92rem;
}
.u5-df-word--result {
  background: color-mix(in srgb, var(--brand, #0f6b6b) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--brand, #0f6b6b) 35%, transparent);
  color: var(--brand);
  font-weight: 700;
}
.u5-df-plus { font-weight: 700; color: color-mix(in srgb, var(--ink) 35%, transparent); }
.u5-df-word--left { animation: u5-slide-in-left 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.u5-df-word--right { animation: u5-slide-in-right 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.u5-df-word--result { animation: u5-pop-in 0.45s ease 0.55s both; }
.u5-df-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
.u5-df-arrow {
  align-self: center;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.u5-df-box {
  position: relative;
  flex: 0 1 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  color: var(--brand, #0f6b6b);
  text-align: center;
  font-size: 0.82rem;
  animation: u5-rise 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 0.12s + 0.55s);
}
.u5-df-stamp {
  position: absolute;
  top: -11px;
  right: -8px;
  padding: 3px 9px;
  border-radius: 7px;
  background: #c45c4a;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transform: rotate(-7deg);
  box-shadow: 0 4px 10px rgba(196, 92, 74, 0.28);
}
.u5-df-box-ico {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand, #0f6b6b) 10%, var(--surface));
}
.u5-df-box-ico--photo {
  position: relative;
  width: 64px;
  height: 64px;
  overflow: hidden;
  padding: 0;
  background: #d7e0ea;
}
.u5-df-box-ico--mix .u5-photo--overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  mix-blend-mode: overlay;
  filter: hue-rotate(18deg) saturate(1.25);
}
.u5-df-box p { margin: 0; color: var(--ink); font-weight: 650; }
.u5-df-box--ai {
  border-color: color-mix(in srgb, var(--brand, #0f6b6b) 28%, transparent);
}
.u5-df-box--out {
  border-color: color-mix(in srgb, #c45c4a 30%, transparent);
  color: #c45c4a;
}
.u5-df-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
}
.u5-df-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border: 1px solid rgba(15, 107, 107, 0.16);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  animation: u5-slide-in-left 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 0.11s);
}
.u5-df-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-tone, var(--u5-teal));
}
.u5-df-card--coral { --card-tone: #c45c4a; }
.u5-df-card--amber { --card-tone: #c48a2a; }
.u5-df-card--teal { --card-tone: #0f6b6b; }
.u5-df-card--navy { --card-tone: #243b55; }
.u5-df-card--moss { --card-tone: #2f8f5b; }
.u5-df-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px var(--line); }
.u5-df-card.is-open {
  border-color: color-mix(in srgb, var(--card-tone, #0f6b6b) 40%, transparent);
}
.u5-df-card.is-open .u5-df-hint { display: none; }
.u5-df-card strong { font-weight: 700; }
.u5-df-ico { color: var(--card-tone, var(--brand, #0f6b6b)); }
.u5-df-ex {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.u5-df-hint {
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(15, 107, 107, 0.55);
}

/* Serial 23 — signs split screen */
.u5-signs {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: center;
}
.u5-signs-face {
  position: relative;
  max-width: 290px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(36, 59, 85, 0.12);
  background: var(--surface-2);
}
.u5-face-art {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: var(--fx, 50%) var(--fy, 50%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
img.u5-face-art {
  object-fit: cover;
  object-position: center 12%;
  aspect-ratio: 3 / 4;
  max-height: 340px;
}
.u5-signs-face.is-zoomed .u5-face-art { transform: scale(1.24); }
.u5-signs-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), transparent 14%, rgba(18, 28, 38, 0.34) 62%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.u5-signs-face.is-zoomed::after { opacity: 1; }
.u5-signs-ring {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate3d(50%, 50%, 0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 3;
  pointer-events: none;
  backface-visibility: hidden;
}
.u5-signs-ring::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  margin: 0;
  border: 2.5px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 2px rgba(15, 107, 107, 0.85),
    0 8px 20px rgba(12, 24, 32, 0.28);
}
.u5-signs-ring.is-zoom::after { animation: u5-zoom-ring 0.45s ease; }
.u5-signs-list { display: grid; gap: 8px; align-content: center; }
.u5-signs-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(36, 59, 85, 0.12);
  background: var(--surface);
  font: inherit;
  color: var(--u5-ink);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.u5-signs-item.is-in { animation: u5-rise 0.45s ease both; }
.u5-signs-item:hover { transform: translateX(3px); }
.u5-signs-n {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--u5-ict) 10%, var(--surface));
  color: var(--u5-ict);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.u5-signs-copy strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
.u5-signs-copy small {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 450;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u5-signs-item.is-active {
  background: color-mix(in srgb, var(--u5-ict) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--u5-ict) 38%, transparent);
}
.u5-signs-item.is-active .u5-signs-n {
  background: var(--u5-ict);
  color: #fff;
}

/* Verify */
.u5-verify-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--u5-ict) 12%, var(--surface));
  margin-bottom: 14px;
  overflow: hidden;
}
.u5-verify-progress {
  display: block;
  height: 100%;
  width: var(--p, 25%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--u5-ict), var(--u5-moss));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.u5-verify-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.u5-verify-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 108px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 107, 107, 0.16);
  background: var(--surface);
  opacity: 0.45;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.u5-verify-step em {
  position: absolute;
  top: 6px;
  right: 8px;
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(15, 107, 107, 0.35);
}
.u5-verify-step.is-active,
.u5-verify-step.is-done { opacity: 1; }
.u5-verify-step.is-active {
  border-color: color-mix(in srgb, var(--u5-ict) 40%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(var(--secondary-rgb), 0.12);
}
.u5-verify-step.is-done {
  border-color: color-mix(in srgb, #2f8f5b 35%, transparent);
  background: color-mix(in srgb, #2f8f5b 6%, var(--surface));
}
.u5-verify-step strong {
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}
.u5-verify-ico { color: var(--u5-ict); }
.u5-verify-arrow { color: color-mix(in srgb, var(--ink) 30%, transparent); font-weight: 700; }
.u5-verify-tip {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--u5-ict) 16%, transparent);
  border-left: 3px solid var(--u5-ict);
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.u5-verify-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 18%, var(--surface));
  border: 1px solid rgba(196, 138, 42, 0.4);
  color: #7a5c2e;
  font-weight: 650;
}
.u5-verify-warn p { margin: 0; }
.u5-verify-warn-sub {
  margin-top: 4px !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8a6a34;
}

/* Hotspot */
.u5-hs-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 12px;
}
.u5-hs-bar .u5-scene-note {
  margin: 0;
  flex: 1 1 240px;
}
.u5-hs-count {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #0f6b6b) 8%, var(--surface));
}
.u5-hs-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: crosshair;
  outline: none;
  border: 1px solid rgba(26, 35, 50, 0.1);
  background: var(--surface-2);
  line-height: 0;
}
.u5-hs-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  user-select: none;
  pointer-events: none;
}
.u5-hs-spot {
  position: absolute;
  width: 72px;
  height: 72px;
  margin: 0;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.u5-hs-spot:hover,
.u5-hs-spot:focus-visible {
  background: color-mix(in srgb, var(--brand, #0f6b6b) 12%, transparent);
  outline: 1.5px dashed color-mix(in srgb, var(--brand, #0f6b6b) 45%, transparent);
  outline-offset: 2px;
}
.u5-hs-spot.is-found {
  pointer-events: none;
  background: transparent;
}
.u5-hs-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.u5-hs-ring {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(15, 107, 107, 0.85);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
  background: color-mix(in srgb, #0f6b6b 10%, transparent);
}
.u5-hs-ring.is-zoom { animation: u5-zoom-ring 0.45s ease; }
.u5-hs-ring span {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.94);
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(15, 107, 107, 0.22);
  box-shadow: 0 4px 10px var(--line);
}
.u5-hs-ring--top span {
  top: auto;
  bottom: calc(100% + 6px);
}
.u5-hs-ring--left span {
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.u5-hs-ring--right span {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.u5-hs-summary {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.16);
}
.u5-hs-sum-title { margin: 0 0 8px; font-weight: 700; color: var(--ink); }
.u5-hs-summary ul {
  margin: 0;
  padding-left: 1.1rem;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

@keyframes u5-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes u5-zoom-ring {
  from { transform: scale(0.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes u5-tunnel {
  from { transform: translate3d(8px, -50%, 0); }
  to { transform: translate3d(calc(100cqw - 56px), -50%, 0); }
}
@keyframes u5-tunnel-glow {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes u5-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes u5-pop-in {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes u5-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 107, 107, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(15, 107, 107, 0); }
}
@keyframes u5-scan-beam {
  from { transform: translateY(0); opacity: 0.9; }
  to { transform: translateY(220%); opacity: 0; }
}
@keyframes u5-slide-in-left {
  from { opacity: 0; translate: -16px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes u5-slide-in-right {
  from { opacity: 0; translate: 16px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes u5-door-bump {
  0% { translate: 0 0; }
  35% { translate: 9px 0; }
  70% { translate: -6px 0; }
  100% { translate: 0 0; }
}

@media (max-width: 780px) {
  .u5-sim { padding: 14px; border-radius: 16px; }
  .u5-signs { grid-template-columns: 1fr; }
  .u5-signs-face { max-width: 320px; margin: 0 auto; }
  .u5-door { min-height: 300px; }
  .u5-door-room { right: 6%; }
  .u5-door-frame { width: 118px; height: 158px; }
  .u5-door-actor--ok { transform: translate3d(22%, 0, 0); }
  .u5-door-actor--no { transform: translate3d(8%, 0, 0); }
  .u5-door-actor.is-walk { transform: translate3d(56%, 0, 0); }
  .u5-door-actor.is-blocked { transform: translate3d(52%, 0, 0); }
  .u5-door-actor.is-enter { transform: translate3d(76%, 0, 0); }
  .u5-plan-rooms { grid-template-columns: 1fr; gap: 10px; }
  .u5-plan-room { min-height: 0; padding: 12px 10px 18px; flex-direction: row; gap: 10px; }
  .u5-plan-corridor { display: none; }
  .u5-plan-walkers { position: static; height: auto; display: flex; gap: 8px; margin-top: 12px; }
  .u5-plan-walker {
    position: static;
    width: auto;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .u5-plan-walker-body { transform: none; }
  .u5-plan-walker.is-in .u5-plan-walker-body { transform: none; }
  .u5-plan { padding-bottom: 16px; }
  .u5-walls {
    grid-template-columns: 1fr;
    min-height: 420px;
    padding: 72px 18px 28px;
  }
  .u5-walls-lane {
    left: 50%;
    right: auto;
    top: 16%;
    bottom: 16%;
    width: 2px;
    height: auto;
    margin: 0 0 0 -1px;
    background: repeating-linear-gradient(180deg, rgba(26, 35, 50, 0.22) 0 8px, transparent 8px 16px);
  }
  .u5-walls-lane::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: color-mix(in srgb, var(--ink) 28.000000000000004%, transparent);
    border-left-color: transparent;
  }
  .u5-fw-stage { grid-template-columns: 1fr; min-height: 360px; padding-bottom: 64px; }
  .u5-fw-wall { width: 100%; min-height: 72px; }
  .u5-fw-trash { left: auto; right: 12px; bottom: 12px; }
  .u5-door-people { grid-template-columns: 1fr; }
  .u5-layer-orbit { display: none; }
  .u5-hs-stage { border-radius: 12px; }
  .u5-vpn {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 14px 10px;
  }
  .u5-vpn-node {
    min-width: 86px;
    flex: 0 0 auto;
    padding: 10px 8px;
  }
  .u5-vpn-app { flex: 0 0 auto; }
  .u5-vpn-tunnel {
    width: 150px;
    min-width: 150px;
    flex: 0 0 auto;
  }
}

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

/* ---- চিত্র ৪.৩ token probability sim (pn43) ---- */
.pn43-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px 6px;
  margin: 12px 0;
}
.pn43-card {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: var(--surface);
}
.pn43-k {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.pn43-ctx {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}
.pn43-dots { opacity: 0.45; }
.pn43-llm {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #0F6B6B;
}
.pn43-llm b { font-size: 1rem; }
.pn43-sub {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.pn43-arrow {
  align-self: center;
  font-size: 1.25rem;
  color: #0F6B6B;
  opacity: 0.7;
}
.pn43-picks { display: grid; gap: 6px; }
.pn43-pick {
  display: grid;
  grid-template-columns: 1fr minmax(48px, 1.2fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15, 107, 107, 0.12);
  background: var(--surface-2);
  font: inherit;
  text-align: left;
  cursor: default;
}
.pn43-pick.is-win {
  cursor: pointer;
  border-color: color-mix(in srgb, #2F8F5B 45%, transparent);
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
}
.pn43-pick.is-win:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, #2F8F5B 28%, transparent);
}
.pn43-pick.is-chosen {
  background: color-mix(in srgb, #2F8F5B 18%, var(--surface));
  border-color: #2F8F5B;
}
.pn43-pick.is-dim { opacity: 0.45; }
.pn43-pick-name { font-weight: 600; font-size: 0.88rem; }
.pn43-pick i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 107, 107, 0.12);
  position: relative;
  overflow: hidden;
}
.pn43-pick i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  background: #0F6B6B;
  border-radius: inherit;
}
.pn43-pick.is-win i::after,
.pn43-pick.is-chosen i::after { background: #2F8F5B; }
.pn43-pick b { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.pn43-sel {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #2F8F5B;
  text-align: center;
}
.pn43-card--out.is-on {
  border-color: #2F8F5B;
  background: color-mix(in srgb, #2F8F5B 8%, var(--surface));
}
.pn43-combine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(15, 107, 107, 0.25);
  background: color-mix(in srgb, #0F6B6B 4%, var(--surface));
}
.pn43-piece {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.12);
  font-weight: 600;
  font-size: 0.88rem;
}
.pn43-piece--tok,
.pn43-piece--full {
  color: #2F8F5B;
  border-color: color-mix(in srgb, #2F8F5B 40%, transparent);
}
.pn43-plus,
.pn43-eq { font-weight: 700; color: color-mix(in srgb, var(--ink) 45%, transparent); }
.pn43-ready {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}
@media (max-width: 720px) {
  .pn43-arrow { display: none; }
}

/* ========== Unit 1 sims ========== */
.u1-sim-host { width: 100%; }
.u1-sim { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 820px; margin: 0 auto; }
.u1-sim-host--recap,
.u1-sim-host--recap .u1-learned,
.u1-sim-host--recap .u1-act-tabs,
.u1-sim-host:has(.u1-learned) .u1-learned,
.u1-sim-host:has(.u1-act-tabs) .u1-act-tabs,
.u1-act-tabs-panel .u1-sim,
.u1-act-tabs-panel .u1-sim-host,
.u1-act-tabs-panel .u4v-host {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
.u1-act-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.u1-scene-kicker, .u1-act-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-weight: 600;
}
.u1-scene-hook, .u1-act-q {
  margin: 4px 0 0;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink, var(--ink));
  line-height: 1.5;
}
.u1-scene-caption, .u1-act-case {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  line-height: 1.55;
}
.u1-tip {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, #243B55 5%, var(--surface));
  border: 1px solid rgba(36, 59, 85, 0.1);
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-size: 0.82rem;
  line-height: 1.45;
}
.u1-tip-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: #3D5A73;
}
.u1-act-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.u1-fig-ph {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  border-radius: 16px;
  border: 1px dashed rgba(15, 107, 107, 0.28);
  background: color-mix(in srgb, #0F6B6B 5%, var(--surface));
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  text-align: center;
  padding: 20px;
}
.u1-fig-ph em { font-style: normal; font-size: 0.82rem; max-width: 36ch; }
.u1-turn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, #C48A2A 14%, var(--surface));
  color: #7A5C2E;
  font-weight: 600;
  font-size: 0.88rem;
}
.u1-fb {
  margin: 0;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.u1-fb[hidden] { display: none !important; }
.u1-fb-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.u1-fb-t { flex: 1; min-width: 0; }
.u1-fb.is-ok { background: color-mix(in srgb, #2F8F5B 12%, var(--surface)); color: #1f5c3a; }
.u1-fb.is-bad { background: color-mix(in srgb, #C45C4A 12%, var(--surface)); color: #8a3a2e; }
.vl-act-host .u1-fb {
  margin-top: 4px;
  font-weight: 600;
  animation: beatIn 0.28s ease both;
}
.vl-act-host .u1-fb.is-ok {
  border-color: color-mix(in srgb, #2F8F5B 28%, transparent);
}
.vl-act-host .u1-fb.is-bad {
  border-color: color-mix(in srgb, #C45C4A 24%, transparent);
}

.u1-opts { display: grid; gap: 9px; }
.u1-opts--multi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.u1-opt, .u1-chip, .u1-match-btn, .u1-pledge-card, .u1-check-btn {
  appearance: none;
  border: 1.5px solid var(--line-mid);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.u1-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 1px 2px rgba(26, 35, 50, 0.03);
}
.u1-opt-l,
.u1-opt-check,
.u1-opt-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #0F6B6B 10%, var(--surface));
  color: var(--brand, #0F6B6B);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}
.u1-opt-check {
  border: 1.5px solid rgba(15, 107, 107, 0.28);
  background: var(--surface);
  border-radius: 8px;
  position: relative;
}
.u1-opt.is-on .u1-opt-check {
  background: var(--brand, #0F6B6B);
  border-color: var(--brand, #0F6B6B);
}
.u1-opt.is-on .u1-opt-check::after {
  content: "";
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.u1-opt-t {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink, var(--ink));
}
.u1-opt:hover, .u1-chip:hover, .u1-match-btn:hover, .u1-pledge-card:hover {
  border-color: color-mix(in srgb, #0F6B6B 45%, transparent);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--line);
}
.u1-opt.is-on, .u1-chip.is-on, .u1-chip.is-selected, .u1-match-btn.is-pick, .u1-pledge-card.is-on {
  border-color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, #0F6B6B 8%, var(--surface));
}
.u1-opt.is-ok, .u1-chip.is-ok, .u1-match-btn.is-ok, .u1-block.is-ok {
  border-color: #2F8F5B;
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
}
.u1-opt.is-ok .u1-opt-l {
  background: color-mix(in srgb, #2F8F5B 18%, var(--surface));
  color: #1f5c3a;
}
.u1-opt.is-bad, .u1-chip.is-bad, .u1-match-btn.is-bad, .u1-block.is-bad {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 10%, var(--surface));
  animation: u1-shake 0.35s ease;
}
@keyframes u1-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}
.u1-check-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand, #0F6B6B);
  color: #fff;
  border-color: transparent;
  font-weight: 650;
  box-shadow: 0 6px 16px rgba(15, 107, 107, 0.22);
}
.u1-check-btn:hover:not(:disabled) {
  background: var(--brand);
  transform: translateY(-1px);
}
.u1-check-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

/* Popup gate: keep soft check/continue hover (wins over solid .u1-check-btn) */
.vl-act-shell .vl-gate-btn--check:hover:not(:disabled),
.vl-act-shell .vl-gate-btn--check:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 40%, transparent);
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
}
.vl-act-shell .vl-gate-btn--go:hover:not(:disabled),
.vl-act-shell .vl-gate-btn--go:focus-visible:not(:disabled) {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}
.vl-act-shell .u1-check-btn:hover:not(:disabled),
.vl-act-shell .u1-check-btn:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 40%, transparent);
  color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface));
  transform: none;
  box-shadow: none;
}
.vl-act-host .u1-opt:hover:not(:disabled),
.vl-act-host .u1-chip:hover:not(:disabled),
.vl-act-host .u1-drum-chip:hover:not(:disabled),
.vl-act-host .u1-pledge-card:hover:not(:disabled) {
  border-color: color-mix(in srgb, #0F6B6B 45%, transparent);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--line);
}

.u1-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.u1-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.u1-chip.is-selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, #0F6B6B 18%, transparent);
}

/* —— Sort board: Module 4 drum drop —— */
.u1-act--sort .u1-sort,
.u1-act--drums .u1-sort--drums {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.u1-drum-pool.ts-pool {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 0;
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--navy, #243B55) 3.5%, var(--surface));
  border: 1px solid var(--line, var(--line));
}
/* Override Module 4 .ts-app (76px icon column) — full-width readable cards */
.u1-drum-chip.ts-app {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  min-height: 44px;
  height: auto;
  padding: 12px 14px;
  border-radius: 14px;
  gap: 10px;
  cursor: grab;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line-mid, rgba(26, 35, 50, 0.12));
  box-shadow: 0 1px 2px rgba(26, 35, 50, 0.03);
}
.u1-drum-chip.ts-app:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app, #0F6B6B) 40%, transparent);
  box-shadow: 0 6px 16px var(--line);
}
.u1-drum-chip.ts-app.is-selected {
  border-color: var(--app, #0F6B6B);
  background: color-mix(in srgb, var(--app, #0F6B6B) 8%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app, #0F6B6B) 16%, transparent);
}
.u1-drum-chip.ts-app.is-placed,
.u1-drum-chip.ts-app:disabled {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.35);
  transform: none;
  box-shadow: none;
  border-style: dashed;
  background: color-mix(in srgb, #94a3b8 8%, var(--surface));
}
.u1-drum-chip.ts-app.is-placed:hover,
.u1-drum-chip.ts-app:disabled:hover {
  transform: none;
  border-color: var(--line-mid, rgba(26, 35, 50, 0.12));
  box-shadow: none;
}
.u1-drum-chip.ts-app .ts-app-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--app, #0F6B6B) 12%, var(--surface));
}
.u1-drum-chip.ts-app .ts-app-ico .u1-chip-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app, #0F6B6B);
  line-height: 1;
}
.u1-drum-chip.ts-app .ts-app-name {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: var(--ink, var(--ink));
}
.u1-drums.ts-buckets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 28px 32px;
  justify-content: center;
  justify-items: center;
  align-items: start;
  width: 100%;
  margin-inline: auto;
}
/* 4 drums → one compact row */
.u1-drums.ts-buckets:has(> .u1-drum:nth-child(4)),
.u1-drums--match.ts-buckets {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  max-width: 560px;
}
.vl-act-shell--roomy .u1-drum.ts-bucket,
.vl-act-shell:has(.u1-act--drums) .u1-drum.ts-bucket {
  min-height: 128px;
}
.vl-act-shell--roomy .u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum.ts-bucket,
.vl-act-shell:has(.u1-act--drums) .u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum.ts-bucket,
.vl-act-shell--roomy .u1-drums--match .u1-drum.ts-bucket,
.vl-act-shell:has(.u1-act--drums) .u1-drums--match .u1-drum.ts-bucket {
  min-height: 96px;
  max-width: 120px;
}
.vl-act-shell--roomy .u1-drum .ts-bucket-vessel,
.vl-act-shell:has(.u1-act--drums) .u1-drum .ts-bucket-vessel {
  min-height: 88px;
}
.vl-act-shell--roomy .u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-vessel,
.vl-act-shell:has(.u1-act--drums) .u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-vessel,
.vl-act-shell--roomy .u1-drums--match .u1-drum .ts-bucket-vessel,
.vl-act-shell:has(.u1-act--drums) .u1-drums--match .u1-drum .ts-bucket-vessel {
  min-height: 64px;
}
.vl-act-shell--roomy .u1-placed .u1-placed-name,
.vl-act-shell:has(.u1-act--drums) .u1-placed .u1-placed-name {
  display: none !important;
}
.vl-act-shell--roomy .u1-drum-pool.ts-pool {
  grid-template-columns: 1fr 1fr;
}
.u1-drum.ts-bucket {
  max-width: 200px;
  width: 100%;
  min-height: 128px;
  justify-self: center;
}
.u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum.ts-bucket,
.u1-drums--match .u1-drum.ts-bucket {
  max-width: 120px;
  min-height: 96px;
}
.u1-drum .ts-bucket-label {
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--ink, var(--ink));
}
.u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-label,
.u1-drums--match .u1-drum .ts-bucket-label {
  font-size: 0.72rem;
  line-height: 1.25;
}
.u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-head,
.u1-drums--match .u1-drum .ts-bucket-head {
  gap: 4px;
  padding: 0 2px;
  font-size: 0.72rem;
}
.u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-ico,
.u1-drums--match .u1-drum .ts-bucket-ico {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}
.u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-drop,
.u1-drums--match .u1-drum .ts-bucket-drop {
  min-height: 36px;
  gap: 4px;
}
.u1-drum .ts-bucket-head {
  color: var(--bk, #0F6B6B);
}
.u1-drum.ts-bucket.is-target .ts-bucket-rim,
.u1-drum.ts-bucket.is-over .ts-bucket-rim {
  border-color: var(--bk, #0F6B6B);
  transform: scaleX(1.02);
}
.u1-placed.ts-placed {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 36px;
  max-width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 11px;
  cursor: grab;
}
.u1-placed .u1-placed-ico,
.u1-placed .ts-placed-ico {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.u1-placed .u1-placed-name {
  display: none !important;
}
.u1-placed .ts-placed-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app, #0F6B6B);
  line-height: 1;
  pointer-events: none;
}
.u1-drum .ts-bucket-drop {
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
}
.u1-drum .ts-bucket-vessel {
  min-height: 88px;
}
.u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-vessel,
.u1-drums--match .u1-drum .ts-bucket-vessel {
  min-height: 64px;
}
.vl-act-host .u1-drum-chip.ts-app {
  background: var(--surface);
  width: 100%;
  flex-direction: row;
}
.vl-act-host .u1-drums.ts-buckets {
  gap: 28px 32px;
}
.vl-act-host .u1-drums.ts-buckets:has(> .u1-drum:nth-child(4)),
.vl-act-host .u1-drums--match.ts-buckets {
  gap: 10px 8px;
}
@media (max-width: 560px) {
  .u1-drums.ts-buckets {
    grid-template-columns: minmax(0, 200px);
  }
  /* Keep 4 drums in one row on small screens too */
  .u1-drums.ts-buckets:has(> .u1-drum:nth-child(4)),
  .u1-drums--match.ts-buckets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    max-width: 100%;
  }
  .u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum.ts-bucket,
  .u1-drums--match .u1-drum.ts-bucket {
    max-width: none;
    min-height: 88px;
  }
  .u1-drums:has(> .u1-drum:nth-child(4)) .u1-drum .ts-bucket-label,
  .u1-drums--match .u1-drum .ts-bucket-label {
    font-size: 0.64rem;
  }
}
@media (min-width: 720px) {
  .u1-drum-pool.ts-pool {
    grid-template-columns: 1fr 1fr;
  }
}

/* Legacy bucket styles kept for any leftover markup */
.u1-act--sort .u1-pool {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--navy, #243B55) 3.5%, var(--surface));
  border: 1px solid var(--line, var(--line));
}
.u1-act--sort .u1-pool.is-empty {
  display: none;
}
.u1-act--sort .u1-card {
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-mid, rgba(26, 35, 50, 0.12));
  box-shadow: 0 1px 2px rgba(26, 35, 50, 0.03);
  cursor: grab;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}
.u1-act--sort .u1-card:active {
  cursor: grabbing;
}
.u1-act--sort .u1-card-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--slate, #3D5A73);
  padding: 0;
  overflow: hidden;
}
.u1-act--sort .u1-card-ico .tint-ico,
.u1-act--sort .u1-card-ico .ts-brand-mark {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 9px;
}
.u1-act--sort .u1-card-t {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink, var(--ink));
}
.u1-act--sort .u1-card.is-selected {
  border-color: var(--brand, #0F6B6B);
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0F6B6B) 14%, transparent);
}
.u1-act--sort .u1-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
}
.u1-act--sort .u1-card.is-placed {
  box-shadow: none;
}
.u1-board.u1-bucket-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.u1-bucket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
  border-radius: 18px;
  border: 1.5px solid var(--line-mid, rgba(26, 35, 50, 0.12));
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2, var(--surface-2)) 100%);
  padding: 12px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.u1-bucket[data-tone="A"] {
  --bucket-accent: var(--brand, #0F6B6B);
}
.u1-bucket[data-tone="B"] {
  --bucket-accent: var(--slate, #3D5A73);
}
.u1-bucket[data-tone="C"] {
  --bucket-accent: var(--navy, #243B55);
}
.u1-bucket[data-tone="D"] {
  --bucket-accent: var(--indigo, #4A5D8A);
}
.u1-bucket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.u1-bucket-letter {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--bucket-accent, var(--brand, #0F6B6B));
  background: color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 18%, transparent);
}
.u1-bucket-label {
  margin: 0;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink, var(--ink));
  min-width: 0;
}
.u1-bucket-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 88px;
  padding: 8px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 28%, transparent);
  background: color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 4%, var(--surface));
  transition: border-color 0.18s ease, background 0.18s ease;
}
.u1-bucket-hint {
  margin: auto;
  padding: 8px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 55%, #8a939c);
  pointer-events: none;
}
.u1-bucket-hint[hidden] {
  display: none !important;
}
.u1-bucket:hover,
.u1-bucket.is-target {
  border-color: color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 42%, transparent);
  box-shadow: 0 8px 22px var(--line);
}
.u1-bucket.is-target .u1-bucket-slot,
.u1-bucket.is-dragover .u1-bucket-slot {
  border-style: solid;
  border-color: color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 45%, transparent);
  background: color-mix(in srgb, var(--bucket-accent, var(--brand, #0F6B6B)) 8%, var(--surface));
}
.u1-bucket.is-dragover {
  transform: translateY(-1px);
  border-color: var(--bucket-accent, var(--brand, #0F6B6B));
}
.u1-bucket.has-cards .u1-bucket-slot {
  border-style: solid;
  border-color: var(--line, var(--line));
  background: rgba(255, 255, 255, 0.72);
}
.vl-act-host .u1-act--sort .u1-card {
  background: var(--surface);
}
.vl-act-host .u1-bucket {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2, var(--surface-2)) 100%);
  border-color: var(--line-mid, rgba(26, 35, 50, 0.12));
}
.vl-act-host .u1-bucket-label {
  color: var(--ink, var(--ink));
}
@media (max-width: 560px) {
  .u1-board.u1-bucket-row {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 561px) {
  .u1-act--sort .u1-pool {
    grid-template-columns: 1fr 1fr;
  }
}

.u1-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.u1-block {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line-mid); background: var(--surface); cursor: grab;
  box-shadow: 0 1px 2px rgba(26, 35, 50, 0.03);
}
.u1-block:active { cursor: grabbing; }
.u1-block-n {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, #0F6B6B 12%, var(--surface));
  font-weight: 700; font-size: 0.8rem;
}

/* Blockchain sequence — compact drag list (not MCQ-wide) */
.u1-act--seq .u1-block-list {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 14px;
  gap: 10px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #f4f8f8 0%, #eef5f4 100%);
  border: 1px dashed color-mix(in srgb, #0F6B6B 22%, transparent);
}
.u1-act--seq .u1-block {
  width: 100%;
  max-width: none;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #0F6B6B 16%, #dce6e4);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 107, 107, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.u1-act--seq .u1-block:hover {
  border-color: color-mix(in srgb, #0F6B6B 34%, transparent);
  box-shadow: 0 4px 12px rgba(15, 107, 107, 0.1);
  transform: translateY(-1px);
}
.u1-act--seq .u1-block.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
  transform: scale(1.02);
  box-shadow: 0 8px 18px rgba(15, 107, 107, 0.16);
}
.u1-act--seq .u1-block.is-over {
  border-color: #0F6B6B;
  background: color-mix(in srgb, #0F6B6B 6%, var(--surface));
}
.u1-act--seq .u1-block-n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  font-size: 0.76rem;
  color: #0F6B6B;
  background: color-mix(in srgb, #0F6B6B 12%, var(--surface));
}
.u1-act--seq .u1-block-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.4;
  color: #1a2a2e;
}
.u1-act--seq .u1-block-grip {
  flex: none;
  display: grid;
  place-items: center;
  color: #8aa0a4;
  opacity: 0.85;
}
.u1-act--seq .u1-act-actions {
  justify-content: center;
  margin-top: 4px;
}

.u1-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.u1-match-col { display: grid; gap: 8px; }
@media (max-width: 520px) {
  .u1-match { grid-template-columns: 1fr; }
}

.u1-agri {
  border-radius: 16px; padding: 16px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(63, 111, 78, 0.12), transparent 55%),
    color-mix(in srgb, #3F6F4E 8%, var(--surface));
  border: 1px solid rgba(63, 111, 78, 0.18);
}
.u1-agri-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 650;
  color: #3F6F4E;
}
.u1-agri-ico { display: grid; place-items: center; }
.u1-agri-meter {
  height: 14px; border-radius: 999px; background: rgba(255,255,255,0.8); overflow: hidden;
  border: 1px solid rgba(63, 111, 78, 0.12);
}
.u1-agri-fill {
  display: block; height: 100%; width: 78%;
  background: linear-gradient(90deg, #3F6F4E, #2F8F5B);
  animation: u1-fill 1.2s ease;
}
@keyframes u1-fill { from { width: 0; } }
.u1-agri-label { margin: 10px 0 0; font-weight: 600; }

.u1-feed { position: relative; width: 100%; }
.u1-post {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line-mid);
  background:
    linear-gradient(180deg, var(--surface) 0%, #FBFCFD 100%);
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.u1-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.u1-post-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #C45C4A 14%, var(--surface));
  color: #C45C4A;
  flex-shrink: 0;
}
.u1-post-user { margin: 0; font-size: 0.86rem; font-weight: 650; color: var(--ink, var(--ink)); }
.u1-post-meta { margin: 2px 0 0; font-size: 0.74rem; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.u1-post-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u1-hs {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  position: relative;
  left: auto;
  top: auto;
  max-width: none;
  border: 1px solid rgba(196, 92, 74, 0.28);
  background: color-mix(in srgb, #C45C4A 7%, var(--surface));
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.u1-hs-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #C45C4A 14%, var(--surface));
  color: #C45C4A;
  margin-top: 1px;
}
.u1-hs-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.u1-hs-label {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink, var(--ink));
  font-weight: 500;
}
.u1-hs:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(196, 92, 74, 0.12);
}
.u1-hs--safe {
  border-color: rgba(26, 35, 50, 0.12);
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
}
.u1-hs--safe .u1-hs-ico {
  background: color-mix(in srgb, var(--ink) 8%, var(--surface));
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u1-hs--head {
  align-items: center;
}
.u1-hs.is-found {
  border-color: #2F8F5B;
  background: color-mix(in srgb, #2F8F5B 10%, var(--surface));
}
.u1-hs.is-found .u1-hs-ico {
  background: color-mix(in srgb, #2F8F5B 14%, var(--surface));
  color: #2F8F5B;
}
.u1-hs.is-wrong {
  border-color: rgba(26, 35, 50, 0.18);
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  opacity: 0.92;
}
.u1-hs.is-wrong .u1-hs-ico {
  background: color-mix(in srgb, var(--ink) 10%, var(--surface));
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.u1-hs-tag {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1f5c3a;
  line-height: 1.35;
}
.u1-hs-tag--bad {
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-weight: 600;
}
.u1-hs-progress {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-weight: 600;
}

.u1-field { display: grid; gap: 6px; font-size: 0.9rem; }
.u1-field textarea, .u1-field input, .u1-field select {
  width: 100%; border-radius: 12px; border: 1px solid var(--line-mid);
  padding: 10px 12px; font: inherit; background: var(--surface);
}
.u1-field textarea:focus, .u1-field input:focus, .u1-field select:focus {
  outline: none;
  border-color: color-mix(in srgb, #0F6B6B 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #0F6B6B 14%, transparent);
}
.u1-field select {
  cursor: pointer;
  appearance: auto;
}
.u1-subj { display: flex; flex-wrap: wrap; gap: 8px; }
.u1-pledge { display: grid; gap: 8px; }
@media (min-width: 640px) {
  .u1-pledge { grid-template-columns: repeat(3, 1fr); }
}
.u1-pledge-card span {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: color-mix(in srgb, #0F6B6B 12%, var(--surface));
  font-size: 0.75rem; font-weight: 700; margin-bottom: 8px;
}
.u1-pledge-card p { margin: 0; font-size: 0.9rem; line-height: 1.4; }

/* cinematic scenes */
.u1-scene--cinematic { gap: 14px; }
.u1-orbit {
  position: relative; width: min(100%, 280px); aspect-ratio: 1;
  margin: 8px auto; border-radius: 50%;
  border: 1px dashed rgba(15,107,107,0.25);
}
.u1-orbit-core {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, #0F6B6B 12%, var(--surface));
  color: var(--brand, #0F6B6B);
}
.u1-orbit-item {
  position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; margin: -20px;
  border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  animation: u1-orbit 8s linear infinite;
  animation-delay: calc(var(--i) * -2s);
}
@keyframes u1-orbit {
  from { transform: rotate(0deg) translateX(110px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}
.u1-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.u1-flow-card {
  min-width: 110px; padding: 12px; border-radius: 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
}
.u1-flow-card p { margin: 6px 0 0; font-size: 0.82rem; font-weight: 600; }
.u1-flow-card.is-ai { border-color: color-mix(in srgb, #2563A8 40%, transparent); }
.u1-flow-card.is-gen { border-color: color-mix(in srgb, #2F8F5B 40%, transparent); }
.u1-flow-arrow { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.u1-iot { display: grid; gap: 12px; justify-items: center; }
.u1-iot-phone, .u1-iot-devices span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line);
}
.u1-iot-links { display: flex; gap: 6px; }
.u1-iot-links i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand, #0F6B6B);
  animation: u1-pulse 1.2s ease infinite;
}
.u1-iot-links i:nth-child(2) { animation-delay: 0.2s; }
.u1-iot-links i:nth-child(3) { animation-delay: 0.4s; }
@keyframes u1-pulse { 50% { opacity: 0.35; transform: scale(0.85); } }
.u1-iot-devices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.u1-bars {
  display: flex; align-items: flex-end; gap: 10px; height: 120px;
  padding: 12px 16px; border-radius: 16px;
  background: color-mix(in srgb, #243B55 6%, var(--surface));
}
.u1-bars span {
  flex: 1; height: var(--h); border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #0F6B6B, #243B55);
  animation: u1-bar 0.9s ease both;
  animation-delay: calc(var(--h) * 0.01s);
}
@keyframes u1-bar { from { transform: scaleY(0.2); transform-origin: bottom; } }
.u1-cloud-flow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; color: var(--brand, #0F6B6B);
}
.u1-cloud-dots { display: inline-flex; gap: 4px; }
.u1-cloud-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: u1-pulse 1s ease infinite;
}
.u1-factory {
  position: relative; height: 110px; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, #243B55 8%, var(--surface));
  border: 1px solid var(--line);
}
.u1-belt {
  position: absolute; left: 0; right: 0; bottom: 28px; height: 10px;
  background: repeating-linear-gradient(90deg, #3D5A73 0 12px, #243B55 12px 24px);
  animation: u1-belt 1.2s linear infinite;
}
@keyframes u1-belt { to { background-position: 24px 0; } }
.u1-arm {
  position: absolute; left: 20%; top: 18px; color: var(--brand, #0F6B6B);
  animation: u1-arm 1.6s ease-in-out infinite;
}
@keyframes u1-arm { 50% { transform: translateY(8px); } }
.u1-box {
  position: absolute; bottom: 38px; width: 22px; height: 18px; border-radius: 4px;
  background: #C48A2A; left: calc(30% + var(--i) * 18%);
  animation: u1-box 2.4s linear infinite; animation-delay: calc(var(--i) * 0.4s);
}
@keyframes u1-box { from { transform: translateX(-40px); opacity: 0; } 20% { opacity: 1; } to { transform: translateX(120px); opacity: 0; } }
.u1-icons-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.u1-icons-row span {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--brand, #0F6B6B);
  animation: u1-pop 0.5s ease both; animation-delay: calc(var(--i) * 0.08s);
}
@keyframes u1-pop { from { opacity: 0; transform: scale(0.8); } }
.u1-future-tag {
  text-align: center; margin: 0; font-weight: 700; color: var(--brand, #0F6B6B);
  font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .u1-match { grid-template-columns: 1fr; }
}

/* ========== Unit 2 interactive sims (u2v) ========== */
/* Shared shell, builders and per-sim scenes for modules/unit-2/sims.js. */

/* ---- tokens ---- */
.u2v-host {
  --u2-brand: var(--brand);
  --u2-brand-deep: color-mix(in srgb, var(--brand) 82%, var(--ink));
  --u2-ink: var(--ink);
  --u2-blue: var(--secondary);
  --u2-gold: var(--amber);
  --u2-clay: var(--coral);
  --u2-green: var(--output);
  --u2-slate: var(--indigo);
  --u2-violet: var(--indigo);
  --u2-paper-2: var(--surface-2);
  --u2-paper-3: var(--paper);
  --u2-line: var(--line-strong);
  --u2-line-soft: var(--line);
  --u2-txt-2: var(--read-muted);
  --u2-txt-3: color-mix(in srgb, var(--ink) 50%, transparent);
  --u2-shadow-s: var(--shadow-soft);
  --u2-shadow: var(--shadow-card);
  --u2-shadow-l: var(--shadow-card);
  --u2-r-lg: 16px;
  --u2-r-md: 12px;
  --u2-r-sm: 9px;
  --acc: var(--brand);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  color: var(--u2-ink);
}
.u2v-host *,
.u2v-host *::before,
.u2v-host *::after { box-sizing: border-box; }
/* Sims toggle visibility with the hidden attribute; explicit display rules
   below would otherwise win over the UA default. */
.u2v-host [hidden] { display: none !important; }
/* Keep family only — `font: inherit` was stomping .u2v-btn / chip sizes
   with the large lesson body type (Module 4 buttons stay at 0.85rem). */
.u2v-host button { font-family: inherit; }
.u2v-host :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--u2-brand) 60%, transparent);
  outline-offset: 2px;
}
.u2v-shell { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 0 12px; }

/* ---- head ---- */
.u2v-head { display: flex; flex-direction: column; gap: 4px; }
.u2v-pill {
  display: none !important;
}
.u2v-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 650;
  line-height: 1.35;
  color: color-mix(in srgb, var(--u2-brand) 26%, var(--u2-ink));
}
.u2v-lead { margin: 0; font-size: 0.9rem; font-weight: 500; line-height: 1.55; color: var(--u2-txt-2); }

/* ---- buttons (match Module 4 .u4v-btn) ---- */
.u2v-host .u2v-btn,
.u2v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--u2-brand) 55%, #0a4545);
  background: var(--u2-brand);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}
.u2v-host .u2v-btn:hover:not(:disabled),
.u2v-btn:hover:not(:disabled) {
  background: var(--u2-brand-deep);
  border-color: var(--u2-brand-deep);
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.u2v-host .u2v-btn:active:not(:disabled),
.u2v-btn:active:not(:disabled) {
  background: #0a4545;
  transform: none;
  filter: none;
}
.u2v-host .u2v-btn.u2v-btn--ghost,
.u2v-btn.u2v-btn--ghost {
  background: var(--surface);
  color: var(--u2-brand);
  border: 1.5px solid color-mix(in srgb, var(--u2-brand) 42%, transparent);
  box-shadow: none;
}
.u2v-host .u2v-btn.u2v-btn--ghost:hover:not(:disabled),
.u2v-btn.u2v-btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--u2-brand) 9%, var(--surface));
  color: var(--u2-brand-deep);
  border-color: var(--u2-brand);
  filter: none;
  transform: translateY(-1px);
}
.u2v-host .u2v-btn.u2v-btn--ghost:active:not(:disabled),
.u2v-btn.u2v-btn--ghost:active:not(:disabled) {
  background: color-mix(in srgb, var(--u2-brand) 14%, var(--surface));
  transform: none;
}
.u2v-host .u2v-btn.u2v-btn--cancel,
.u2v-btn.u2v-btn--cancel {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  box-shadow: none;
}
.u2v-host .u2v-btn.u2v-btn--cancel:hover:not(:disabled),
.u2v-btn.u2v-btn--cancel:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-mid);
  filter: none;
  transform: none;
}
.u2v-host .u2v-btn.u2v-btn--cancel:active:not(:disabled),
.u2v-btn.u2v-btn--cancel:active:not(:disabled) {
  background: var(--surface-2);
  transform: none;
  filter: none;
}
.u2v-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.4);
  box-shadow: none;
  transform: none;
}
.u2v-btn.is-ready { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.u2v-btn iconify-icon,
.u2v-btn svg { flex: none; }

/* ---- chips ---- */
.u2v-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--u2-line);
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--u2-txt-2);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.u2v-chip:hover { transform: translateY(-1px); color: var(--u2-ink); }
.u2v-chip.is-on {
  background: color-mix(in srgb, var(--u2-brand) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--u2-brand) 35%, transparent);
  color: var(--u2-brand-deep);
  font-weight: 650;
}

/* ---- status ---- */
.u2v-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--u2-txt-2);
}
.u2v-status.is-ok { color: var(--u2-green); font-weight: 600; }
.u2v-status.is-bad { color: var(--u2-clay); font-weight: 600; }
.u2v-status.is-warn { color: #B07A1E; font-weight: 600; }

/* ---- inputs ---- */
.u2v-host input,
.u2v-host select,
.u2v-host textarea { font: inherit; font-weight: 500; color: color-mix(in srgb, var(--ink) 88%, transparent); }
.u2v-host input::placeholder,
.u2v-host textarea::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); font-weight: 400; }

/* ---- final callout ---- */
.u2-final {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid color-mix(in srgb, var(--u2-green) 26%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-green) 8%, var(--surface)), var(--surface));
  box-shadow: var(--u2-shadow-s);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.u2-final.is-in { opacity: 1; transform: none; }
.u2-final-ico { flex: none; display: inline-flex; margin-top: 1px; color: var(--u2-green); }
.u2-final-text {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.55;
  color: color-mix(in srgb, var(--u2-green) 34%, var(--u2-ink));
}

/* ---- shared prose bits ---- */
.u2-note {
  margin: 8px 0 0;
  padding: 0;
  border-left: none;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--u2-txt-2);
}
.u2-quote {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--u2-r-md);
  background: color-mix(in srgb, var(--u2-brand) 6%, var(--surface));
  border: 1px solid var(--u2-line);
  font-size: 0.82rem;
  font-weight: 550;
  line-height: 1.6;
  color: var(--u2-ink);
}
.u2-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.u2-checklist li {
  position: relative;
  padding-left: 22px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--u2-txt-2);
}
.u2-checklist li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--u2-green) 70%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--u2-green) 14%, transparent);
}
.u2-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--u2-line);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
}
.u2-bubble p { margin: 0; font-size: 0.85rem; font-weight: 550; line-height: 1.6; color: var(--u2-ink); }
.u2-bubble-tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--u2-brand);
  background: color-mix(in srgb, var(--u2-brand) 12%, var(--surface));
}
.u2-bubble--user { border-color: color-mix(in srgb, var(--u2-blue) 26%, transparent); }
.u2-bubble--user .u2-bubble-tag { color: var(--u2-blue); background: color-mix(in srgb, var(--u2-blue) 12%, var(--surface)); }
.u2-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid color-mix(in srgb, var(--u2-clay) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-clay) 8%, var(--surface)), var(--surface));
}
.u2-alert-ico { flex: none; display: inline-flex; margin-top: 1px; color: var(--u2-clay); }
.u2-alert-title { margin: 0 0 2px; font-size: 0.85rem; font-weight: 700; color: var(--u2-ink); }
.u2-alert-body { margin: 0; font-size: 0.82rem; font-weight: 500; line-height: 1.55; color: var(--u2-txt-2); }
.u2-scenario { display: flex; flex-direction: column; gap: 10px; }
.u2-notice { display: flex; }
.u2-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid color-mix(in srgb, var(--u2-blue) 24%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-blue) 7%, var(--surface)), var(--surface));
  box-shadow: var(--u2-shadow-s);
}
.u2-notice-ico { flex: none; display: inline-flex; margin-top: 1px; color: var(--u2-blue); }
.u2-notice-title { margin: 0 0 2px; font-size: 0.82rem; font-weight: 700; color: var(--u2-blue); }
.u2-notice-body { margin: 0; font-size: 0.82rem; font-weight: 550; line-height: 1.55; color: var(--u2-ink); }

/* ---- spreadsheet mocks ---- */
.u2-sheet {
  max-width: 100%;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
  overflow-x: auto;
}
.u2-sheet-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  border-bottom: 1px solid var(--u2-line-soft);
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--u2-txt-2);
}
.u2-sheet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--u2-green) 70%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--u2-green) 14%, transparent);
}
.u2-sheet-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.u2-sheet-table th {
  padding: 7px 10px;
  text-align: left;
  font-weight: 650;
  color: color-mix(in srgb, var(--u2-brand) 30%, var(--u2-ink));
  background: color-mix(in srgb, var(--u2-brand) 7%, var(--surface));
  border-bottom: 1px solid var(--u2-line);
  white-space: nowrap;
}
.u2-sheet-table td {
  padding: 6px 10px;
  font-weight: 500;
  color: var(--u2-txt-2);
  border-bottom: 1px solid var(--line);
}
.u2-sheet-table tbody tr:last-child td { border-bottom: none; }
.u2-sheet-table tbody tr:hover td { background: color-mix(in srgb, var(--u2-brand) 4%, var(--surface)); }
.u2-sheet-table td.is-rowhead { font-weight: 650; color: var(--u2-ink); }
.u2-sheet-table td.is-hl,
.u2-sheet-table th.is-hl {
  font-weight: 700;
  color: var(--u2-brand-deep);
  background: color-mix(in srgb, var(--u2-brand) 9%, var(--surface));
}
.u2-sheet--pivot { border-color: color-mix(in srgb, var(--u2-brand) 26%, transparent); }
.u2-sheet--pivot.is-ready {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u2-brand) 26%, transparent), var(--u2-shadow);
}
.u2-sheet--result { border-color: color-mix(in srgb, var(--u2-green) 26%, transparent); }

/* ---- pivot field config ---- */
.u2-pivot-config {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.u2-pivot-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--acc, #188038) 22%, var(--line));
  background: var(--surface);
  box-shadow: none;
}
.u2-pivot-slot-name {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acc, #188038);
}
.u2-pivot-slot-val {
  font-size: 0.86rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.35;
  word-break: break-word;
}
.u2-mini-chart { width: 60px; height: 40px; flex: none; fill: var(--acc, #0F6B6B); stroke: var(--acc, #0F6B6B); }
.u2-mini-chart polyline { stroke: var(--acc, #0F6B6B); }

/* ---- step flow (stepper + panel) ---- */
.u2-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
}
.u2v-host .u2-flow-step,
.u2-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  color: var(--u2-txt-2);
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.u2-flow-step:hover {
  transform: translateY(-1px);
  color: var(--u2-ink);
  border-color: color-mix(in srgb, var(--acc) 32%, transparent);
}
.u2-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 0;
  color: color-mix(in srgb, var(--acc) 74%, var(--u2-ink));
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
}
.u2-flow-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  line-height: 0;
  color: color-mix(in srgb, var(--acc) 78%, var(--u2-ink));
}
.u2-flow-label {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding-top: 0.5px;
}
.u2-flow-tick {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  line-height: 0;
  color: #fff;
  background: var(--u2-green);
}
.u2-flow-ico iconify-icon,
.u2-flow-tick iconify-icon,
.u2-panel-ico iconify-icon {
  display: block;
  line-height: 0;
}
.u2-flow-step.is-seen .u2-flow-tick { display: inline-flex; animation: u2Pop 0.3s ease both; }
.u2-flow-step.is-seen { border-color: color-mix(in srgb, var(--u2-green) 26%, transparent); }
.u2-flow-step.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 88%, var(--surface)), var(--acc));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--acc) 30%, transparent);
}
.u2-flow-step.is-on .u2-flow-num { background: rgba(255, 255, 255, 0.24); color: #fff; }
.u2-flow-step.is-on .u2-flow-ico { color: #fff; }
.u2-flow-arrow { display: inline-flex; color: color-mix(in srgb, var(--ink) 28.000000000000004%, transparent); flex: none; }
.u2-flow--compact .u2-flow-step { padding: 6px 10px; font-size: 0.75rem; }
.u2-flow--compact .u2-flow-num { width: 18px; height: 18px; font-size: 0.62rem; }
.u2-flow-nav { display: none !important; }
.u2-flow-hint {
  margin: 0 0 4px;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--u2-txt-3);
}

.u2-panel {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 14px 16px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.u2-panel.is-in { opacity: 1; transform: none; }
.u2-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: none; }
.u2-panel-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--u2-r-md);
  line-height: 0;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) 20%, transparent);
}
.u2-panel-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.u2-panel-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 72%, var(--u2-ink));
}
.u2-panel-title { margin: 2px 0 0; font-size: 0.96rem; font-weight: 650; line-height: 1.4; color: var(--u2-ink); }
.u2-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 248px;
  gap: 10px;
}
.u2-panel-body > p { margin: 0; font-size: 0.85rem; font-weight: 500; line-height: 1.65; color: var(--u2-txt-2); }
.u2-panel-body > .u2-note { margin: 0; }
.u2-panel-body > .u2-mini-site,
.u2-panel-body > .u2-rs-paper,
.u2-panel-body > .u2-li-card,
.u2-panel-body > .u2-gemini,
.u2-panel-body > .u2-app,
.u2-panel-body > .u2-gs {
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
}

/* ---- hotspot scene ---- */
.u2-hs { display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 14px; align-items: start; }
.u2-hs--wide { grid-template-columns: minmax(0, 1.45fr) 250px; }
.u2-issuedetails .u2-hs,
.u2-issuedetails .u2-hs--wide {
  grid-template-columns: minmax(0, 1fr);
}
.u2-issuedetails .u2-hs-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 220px);
  gap: 12px 16px;
  align-items: start;
}
.u2-issuedetails .u2-hs-side-title { grid-column: 1 / -1; }
.u2-issuedetails .u2-hs-detail { min-height: 96px; }
.u2-issuedetails .u2-hs-body p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--u2-ink);
}
.u2-hs-stage {
  display: flex;
  justify-content: center;
  padding: 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--u2-brand) 7%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
}
.u2-hs-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
}
.u2-hs-side-title {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-hs-detail {
  min-height: 92px;
  padding: 11px 12px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.u2-hs-hint { margin: 0; font-size: 0.79rem; font-weight: 500; line-height: 1.6; color: var(--u2-txt-3); }
.u2-hs-detail.is-in { animation: u2Rise 0.3s ease both; }
.u2-hs-kicker {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 74%, var(--u2-ink));
}
.u2-hs-title { margin: 3px 0 5px; font-size: 0.88rem; font-weight: 650; line-height: 1.4; color: var(--u2-ink); }
.u2-hs-body p { margin: 0; font-size: 0.79rem; font-weight: 500; line-height: 1.65; color: var(--u2-txt-2); }
.u2-hs-fix {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding: 7px 9px;
  border-radius: var(--u2-r-sm);
  background: color-mix(in srgb, var(--u2-gold) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--u2-gold) 26%, transparent);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
  color: #7A5410;
}
.u2-hs-fix span { display: inline-flex; margin-top: 2px; color: var(--u2-gold); }
.u2-hs-list {
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--u2-line-soft);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.u2-hs-li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--u2-r-sm);
  border: 1px solid transparent;
  font-size: 0.79rem;
  font-weight: 550;
  color: var(--u2-txt-2);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.u2-hs-li:hover { background: var(--u2-paper-2); color: var(--u2-ink); }
.u2-hs-li-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(26, 35, 50, 0.2);
  background: var(--surface);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.u2-hs-li.is-found { color: var(--u2-ink); }
.u2-hs-li.is-found .u2-hs-li-dot { background: var(--u2-green); border-color: var(--u2-green); }
.u2-hs-li.is-on {
  border-color: color-mix(in srgb, var(--u2-brand) 30%, transparent);
  background: color-mix(in srgb, var(--u2-brand) 8%, var(--surface));
  font-weight: 650;
}

/* generic clickable hotspot */
.u2v-host [data-spot] {
  position: relative;
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.u2v-host [data-spot]:hover { box-shadow: 0 6px 18px rgba(15, 40, 50, 0.09); }
.u2v-host [data-spot].is-found { border-color: color-mix(in srgb, var(--u2-green) 34%, transparent); }
.u2v-host [data-spot].is-on {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u2-brand) 42%, transparent), 0 8px 22px rgba(15, 40, 50, 0.09);
  z-index: 2;
}

/* ---- draggable cards + chips ---- */
.u2v-host .u2-card,
.u2-card {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--acc) 5%, var(--surface)));
  color: var(--u2-ink);
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.25;
  cursor: grab;
  box-shadow: var(--u2-shadow-s);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.u2-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 40, 50, 0.1); }
.u2-card-ico { display: inline-flex; color: var(--acc); flex: none; }
.u2-card-label { line-height: 1.3; text-align: left; }
.u2-card.is-picked {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 34%, transparent), var(--u2-shadow);
  transform: translateY(-2px);
}
.u2-card.is-dragging { opacity: 0.45; cursor: grabbing; }
.u2-card.is-shake { animation: u2Shake 0.42s ease; }
.u2-card--seq { border-radius: var(--u2-r-md); }
.u2-card--mono {
  border-radius: var(--u2-r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 600;
}

.u2-chip-placed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  background: color-mix(in srgb, var(--acc) 10%, var(--surface));
  color: color-mix(in srgb, var(--acc) 46%, var(--u2-ink));
  font-size: 0.74rem;
  font-weight: 650;
  cursor: grab;
  animation: u2Pop 0.26s ease both;
  transition: background 0.16s ease, border-color 0.16s ease;
  touch-action: none;
}
.u2-chip-placed:active { cursor: grabbing; }
.u2-chip-placed.is-picked,
.u2-chip-placed.is-dragging {
  outline: 2px solid color-mix(in srgb, var(--acc) 55%, transparent);
  outline-offset: 1px;
}
.u2-chip-placed:hover { background: color-mix(in srgb, var(--acc) 17%, var(--surface)); }
.u2-chip-ico { display: inline-flex; flex: none; pointer-events: none; }
.u2-chip-name { line-height: 1.3; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.u2-chip-x { font-size: 0.9rem; line-height: 1; opacity: 0.5; cursor: pointer; pointer-events: auto; }
.u2-chip-placed:hover .u2-chip-x { opacity: 1; }
.u2-ds-pool.is-over,
.ts-pool.is-over {
  outline: 2px dashed color-mix(in srgb, var(--u2-brand, #0F6B6B) 45%, transparent);
  outline-offset: 2px;
  border-radius: 12px;
}
.ts-placed.is-picked {
  outline: 2px solid color-mix(in srgb, var(--app, #0F6B6B) 55%, transparent);
  outline-offset: 1px;
}
.u2-chip-placed.is-ok {
  border-color: color-mix(in srgb, var(--u2-green) 34%, transparent);
  background: color-mix(in srgb, var(--u2-green) 10%, var(--surface));
  color: color-mix(in srgb, var(--u2-green) 42%, var(--u2-ink));
}
.u2-chip-placed.is-bad {
  color: color-mix(in srgb, var(--u2-clay) 46%, var(--u2-ink));
}
.u2-chip-check {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  color: #137333;
  flex: none;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(19, 115, 51, 0.22);
}
.u2-chip-placed.is-correct .u2-chip-check {
  animation: u2Pop 0.28s ease both;
}

.u2-sim-toast {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 40;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(540px, calc(100% - 20px));
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--u2-line);
  color: var(--u2-ink);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
  box-shadow: 0 12px 28px rgba(15, 40, 50, 0.16);
  pointer-events: none;
}
.u2-sim-toast-ico { display: inline-flex; flex: none; }
.u2-sim-toast.is-in { animation: u2ToastIn 0.28s ease both; }
.u2-sim-toast.is-out { animation: u2ToastOut 0.22s ease both; }
.u2-sim-toast.is-bad {
  background: color-mix(in srgb, var(--coral) 16%, var(--surface));
  border-color: #d93025;
  color: #c5221f;
}
.u2-sim-toast.is-ok {
  background: color-mix(in srgb, var(--output) 16%, var(--surface));
  border-color: #188038;
  color: #137333;
}

/* ---- drop sorter ---- */
.u2-ds { display: flex; flex-direction: column; gap: 12px; }
.u2-ds-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
  padding: 12px;
  border-radius: var(--u2-r-lg);
  border: 1px dashed color-mix(in srgb, var(--u2-brand) 26%, transparent);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
}
.u2-ds-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.u2-ds-zones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u2-ds-zones--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Module 2 category drums — compact like Module 4 / tools-sorter (not full-bleed) */
.u2-ds--drums .u2-drum-pool.ts-pool {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  width: 100%;
  margin-bottom: 6px;
  min-height: 72px;
  padding: 2px 0 6px;
  border: none;
  background: transparent;
}
.u2-ds--drums .u2-drum-chip.ts-app {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 4px 2px;
}
.u2-ds--drums .u2-drum-chip .ts-app-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.u2-ds--drums .u2-drum-chip .ts-app-name {
  font-size: 0.64rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u2-ds--drums .u2-drum-chip.is-selected .ts-app-ico,
.u2-ds--drums .u2-drum-chip.is-picked .ts-app-ico {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px color-mix(in srgb, var(--app, #0F6B6B) 55%, transparent);
}
.u2-ds--drums .u2-drums.ts-buckets {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-content: stretch;
  justify-items: stretch;
  align-items: start;
  gap: 18px 16px;
}
.u2-ds--drums .u2-drums--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  gap: 16px 18px;
}
.u2-ds--drums .u2-drums--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: none;
  gap: 12px 10px;
}
.u2-ds--drums .u2-drum.ts-bucket {
  width: 100%;
  max-width: none;
  min-height: 112px;
  justify-self: stretch;
}
.u2-ds--drums .u2-drums--5 .u2-drum.ts-bucket {
  max-width: none;
  min-height: 96px;
}
.u2-ds--drums .u2-drum .ts-bucket-head {
  gap: 5px;
  margin-bottom: 10px;
  padding: 0 2px;
  font-size: 0.76rem;
  align-items: flex-start;
}
.u2-ds--drums .u2-drums--3 .u2-drum .ts-bucket-head {
  min-height: 3.25rem;
}
.u2-ds--drums .u2-drums--5 .u2-drum .ts-bucket-head {
  font-size: 0.7rem;
  margin-bottom: 8px;
}
.u2-ds--drums .u2-drum .ts-bucket-ico {
  width: 20px;
  height: 20px;
  border-radius: 7px;
}
.u2-ds--drums .u2-drum .ts-bucket-vessel {
  min-height: 64px;
  margin: 0 2px 8px;
  padding: 12px 8px 14px;
  border-radius: 0 0 16px 16px / 0 0 12px 12px;
}
.u2-ds--drums .u2-drums--5 .u2-drum .ts-bucket-vessel {
  min-height: 56px;
  padding: 10px 6px 12px;
}
.u2-ds--drums .u2-drum .ts-bucket-drop {
  min-height: 36px;
  gap: 4px;
}
.u2-ds--drums .u2-drum-sub {
  display: block;
  margin-top: 1px;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.3;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u2-ds--drums .ts-bucket.is-target .ts-bucket-rim,
.u2-ds--drums .ts-bucket.is-over .ts-bucket-rim {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--bk, #0F6B6B) 35%, transparent),
    0 8px 16px color-mix(in srgb, var(--bk, #0F6B6B) 14%, transparent);
}
@media (max-width: 900px) {
  .u2-ds--drums .u2-drums--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: none;
  }
  .u2-ds--drums .u2-drums--5 .u2-drum.ts-bucket {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .u2-ds--drums .u2-drums--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
  .u2-ds--drums .u2-drums--5 {
    grid-template-columns: repeat(2, minmax(0, 140px));
    max-width: 320px;
  }
  .u2-ds--drums .u2-drums--5 .u2-drum.ts-bucket {
    max-width: 140px;
  }
}

/* Drop boxes (matching page) — rectangular wells instead of drums */
.u2-ds--boxes .u2-ds-zones--3 {
  align-items: stretch;
  gap: 10px;
}
.u2-ds--boxes .u2-zone {
  min-height: 148px;
  padding: 12px;
  gap: 8px;
}
.u2-ds--boxes .u2-zone-drop {
  flex: 1;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.u2-ds--boxes .u2-zone-drop:empty::before {
  content: "এখানে রাখুন";
  font-size: 0.72rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--acc) 42%, var(--u2-txt-3));
  pointer-events: none;
}

.u2-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px;
  border-radius: var(--u2-r-lg);
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--acc) 4%, var(--surface)));
  box-shadow: var(--u2-shadow-s);
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.u2-zone-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--acc) 52%, var(--u2-ink));
}
.u2-zone-head span:first-child { display: inline-flex; color: var(--acc); flex: none; }
.u2-zone-name { line-height: 1.3; }
.u2-zone-note { margin: 0; font-size: 0.71rem; font-weight: 500; line-height: 1.45; color: var(--u2-txt-3); }
.u2-zone-drop {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  min-height: 54px;
  padding: 7px;
  border-radius: var(--u2-r-md);
  border: 1px dashed color-mix(in srgb, var(--acc) 24%, transparent);
  background: color-mix(in srgb, var(--acc) 4%, var(--surface));
}
.u2-zone.is-target {
  border-color: color-mix(in srgb, var(--acc) 46%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 16%, transparent);
}
.u2-zone.is-over,
.u2-zone.is-hit {
  transform: translateY(-2px);
  border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 30%, transparent), var(--u2-shadow);
}
.u2-zone.is-wrong { animation: u2Shake 0.5s ease; border-color: var(--u2-clay); }
.u2-fielddrop .u2-card {
  background: var(--acc);
  color: #fff;
  border-color: color-mix(in srgb, #000 14%, var(--acc));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--acc) 40%, transparent);
}
.u2-fielddrop .u2-card .u2-card-ico,
.u2-fielddrop .u2-card .u2-card-label { color: #fff; }
.u2-fielddrop .u2-card.is-picked {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acc), var(--u2-shadow);
}
.u2-fielddrop .u2-chip-placed,
.u2-fielddrop .u2-chip-placed.is-correct {
  background: var(--acc);
  color: #fff;
  border-color: color-mix(in srgb, #000 16%, var(--acc));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--acc) 42%, transparent);
}
.u2-fielddrop .u2-chip-placed .u2-chip-ico,
.u2-fielddrop .u2-chip-placed .u2-chip-name,
.u2-fielddrop .u2-chip-placed .u2-chip-x { color: #fff; }
.u2-fielddrop .u2-chip-placed .u2-chip-x { opacity: 0.72; }
.u2-fielddrop .u2-chip-placed:hover .u2-chip-x { opacity: 1; }
.u2-fielddrop .u2-zone {
  background: var(--surface);
}
.u2-fielddrop .u2-zone-drop {
  background: color-mix(in srgb, var(--acc) 7%, var(--surface-2));
  border-color: color-mix(in srgb, var(--acc) 26%, #c5c8ce);
}
.u2-ds-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
}
.u2-ds-preview:empty { display: none; }
.u2-ds-reset { align-self: flex-start; }
.u2-preview-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-preview-title span { display: inline-flex; color: var(--u2-brand); }
.u2-preview-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--u2-slate);
}
.u2-ref-list,
.u2-report-list,
.u2-form-summary { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.u2-ref-list li,
.u2-report-list li,
.u2-form-summary li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--u2-r-sm);
  background: color-mix(in srgb, var(--u2-brand) 4%, var(--surface));
  border: 1px solid var(--u2-line-soft);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--u2-txt-2);
}
.u2-ref-list b,
.u2-report-list b,
.u2-form-summary b { font-weight: 700; color: var(--u2-ink); text-align: right; }

/* ---- sequence ordering ---- */
.u2-seq { display: flex; flex-direction: column; gap: 12px; }
.u2-seq-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 12px;
  border-radius: var(--u2-r-lg);
  border: 1px dashed color-mix(in srgb, var(--u2-brand) 26%, transparent);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
}
.u2-seq-track { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.u2-seq-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 168px;
  min-height: 60px;
  padding: 9px 11px;
  border-radius: var(--u2-r-lg);
  border: 1px dashed var(--line-mid);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.u2-seq-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-mid);
}
.u2-seq-drop { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.u2-seq-arrow { display: inline-flex; align-self: center; color: color-mix(in srgb, var(--ink) 48%, transparent); flex: none; }
.u2-seq-slot.is-over,
.u2-seq-slot.is-hit {
  transform: translateY(-2px);
  border-style: solid;
  border-color: color-mix(in srgb, var(--u2-brand) 40%, transparent);
  background: color-mix(in srgb, var(--u2-brand) 6%, var(--surface));
}
.u2-seq-slot.is-ok {
  border-style: solid;
  border-color: color-mix(in srgb, var(--u2-green) 38%, transparent);
  background: color-mix(in srgb, var(--u2-green) 7%, var(--surface));
}
.u2-seq-slot.is-ok .u2-seq-num { color: var(--u2-green); border-color: color-mix(in srgb, var(--u2-green) 34%, transparent); }
.u2-seq-slot.is-bad {
  border-style: solid;
  border-color: color-mix(in srgb, var(--u2-clay) 42%, transparent);
  background: color-mix(in srgb, var(--u2-clay) 6%, var(--surface));
}
.u2-seq.is-locked .u2-seq-slot { border-color: color-mix(in srgb, var(--u2-green) 40%, transparent); }
.u2-seq.is-locked .u2-seq-pool { display: none; }
.u2-seq.is-locked .u2-chip-placed { cursor: default; }

/* ---- scenario choices ---- */
.u2-sc { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 12px; align-items: stretch; }
.u2-sc--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u2-sc--1col { grid-template-columns: minmax(0, 1fr); }
.u2-sc-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.u2-sc-card.is-solved {
  border-color: color-mix(in srgb, var(--u2-green) 32%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--u2-green) 18%, transparent), var(--u2-shadow);
}
.u2-sc-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.u2-sc-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--acc) 70%, var(--u2-ink));
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
}
.u2-sc-copy { flex: 1 1 160px; min-width: 0; }
.u2-sc-prompt { margin: 0; font-size: 0.88rem; font-weight: 650; line-height: 1.45; color: var(--u2-ink); }
.u2-sc-sub { margin: 3px 0 0; font-size: 0.77rem; font-weight: 500; line-height: 1.5; color: var(--u2-txt-3); }
.u2-sc-mock {
  flex: none;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: var(--u2-r-md);
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, var(--surface));
}
.u2-sc--1col .u2-sc-mock { width: 100%; padding: 10px; background: none; }
.u2-sc-choose-h {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--u2-ink);
}
.u2-sc-choose {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-sc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.u2-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  color: var(--u2-txt-2);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.u2v-host .u2-opt {
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
}
.u2-opt span { display: inline-flex; align-items: center; }
.u2-opt:hover:not(:disabled) {
  transform: translateY(-1px);
  color: var(--u2-ink);
  border-color: color-mix(in srgb, var(--u2-brand) 32%, transparent);
}
.u2-opt:disabled { cursor: not-allowed; opacity: 0.45; }
.u2-opt.is-ok {
  border-color: color-mix(in srgb, var(--u2-green) 42%, transparent);
  background: color-mix(in srgb, var(--u2-green) 11%, var(--surface));
  color: color-mix(in srgb, var(--u2-green) 42%, var(--u2-ink));
  opacity: 1;
}
.u2-opt.is-bad {
  border-color: color-mix(in srgb, var(--u2-clay) 44%, transparent);
  background: color-mix(in srgb, var(--u2-clay) 10%, var(--surface));
  color: color-mix(in srgb, var(--u2-clay) 46%, var(--u2-ink));
  animation: u2Shake 0.42s ease;
}
.u2-sc-reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--u2-r-sm);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.55;
  animation: u2Rise 0.28s ease both;
}
.u2-sc-reason span { display: inline-flex; margin-top: 2px; flex: none; }
.u2-sc-reason.is-ok {
  background: color-mix(in srgb, var(--u2-green) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--u2-green) 22%, transparent);
  color: color-mix(in srgb, var(--u2-green) 42%, var(--u2-ink));
}
.u2-sc-reason.is-bad {
  background: color-mix(in srgb, var(--u2-clay) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--u2-clay) 24%, transparent);
  color: color-mix(in srgb, var(--u2-clay) 46%, var(--u2-ink));
}

/* ---- multi pick ---- */
.u2-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 10px; align-items: stretch; }
.u2-pick--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u2-pick--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u2-pick-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  height: 100%;
  gap: 9px;
  padding: 12px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
  text-align: left;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--u2-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.u2v-host .u2-pick-card {
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.35;
}
.u2-pick-card:hover { transform: translateY(-2px); box-shadow: var(--u2-shadow); }
.u2-pick-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) 20%, transparent);
}
.u2-pick-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.u2-pick-label { font-size: 0.83rem; font-weight: 650; line-height: 1.4; color: var(--u2-ink); }
.u2-pick-desc { font-size: 0.73rem; font-weight: 500; line-height: 1.45; color: var(--u2-txt-3); }
.u2-pick-mark {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  background: rgba(26, 35, 50, 0.14);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.u2-pick-mark-check,
.u2-pick-mark-x { display: grid; place-items: center; }
.u2-pick-mark-x { display: none; }
.u2-pick-card.is-on {
  border-color: color-mix(in srgb, var(--u2-brand) 42%, transparent);
  background: color-mix(in srgb, var(--u2-brand) 7%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--u2-brand) 18%, transparent), var(--u2-shadow);
}
.u2-pick-card.is-on .u2-pick-mark {
  opacity: 1;
  transform: scale(1);
  background: var(--u2-brand);
}
.u2-pick-card.is-ok {
  border-color: color-mix(in srgb, var(--u2-green) 46%, transparent);
  background: color-mix(in srgb, var(--u2-green) 8%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--u2-green) 18%, transparent), var(--u2-shadow);
}
.u2-pick-card.is-ok .u2-pick-mark {
  opacity: 1;
  transform: scale(1);
  background: var(--u2-green);
}
.u2-pick-card.is-bad {
  border-color: color-mix(in srgb, var(--u2-clay) 46%, transparent);
  background: color-mix(in srgb, var(--u2-clay) 7%, var(--surface));
  animation: u2Shake 0.42s ease;
}
.u2-pick-card.is-bad .u2-pick-mark {
  opacity: 1;
  transform: scale(1);
  background: var(--u2-clay);
}
.u2-pick-card.is-bad .u2-pick-mark-check { display: none; }
.u2-pick-card.is-bad .u2-pick-mark-x { display: grid; }
.u2-pick-card:disabled { cursor: default; }

/* ---- prompt builder ---- */
.u2-prompt-built {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border-radius: var(--u2-r-lg);
  border: 1px solid color-mix(in srgb, var(--u2-brand) 24%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-brand) 6%, var(--surface)), var(--surface));
  box-shadow: var(--u2-shadow-s);
}
.u2-prompt-text {
  margin: 0;
  min-height: 2.6em;
  font-size: 0.85rem;
  font-weight: 550;
  line-height: 1.6;
  color: var(--u2-txt-2);
  transition: color 0.2s ease;
}
.u2-prompt-text.is-full { color: var(--u2-brand-deep); font-weight: 650; }
.u2-prompt-meter { height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--u2-brand) 10%, var(--surface)); overflow: hidden; }
.u2-prompt-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--u2-brand);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- AI processing bars (quiet, static progress) ---- */
.u2-ai-proc { display: flex; align-items: flex-end; gap: 6px; height: 36px; padding: 0 2px; }
.u2-ai-bar {
  flex: 1;
  height: calc(40% + (var(--d, 0s) * 40));
  min-height: 10px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--u2-brand) 28%, #e8eef0);
  transform-origin: bottom;
  animation: none;
}

/* ---- VLOOKUP formula builder ---- */
.u2-vl { display: flex; flex-direction: column; gap: 12px; }
.u2-vl-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.u2-formula {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
  overflow-x: auto;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.u2-formula.is-complete {
  border-color: color-mix(in srgb, var(--u2-green) 38%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u2-green) 16%, transparent), var(--u2-shadow);
}
.u2-formula-fx {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--u2-brand);
  background: color-mix(in srgb, var(--u2-brand) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--u2-brand) 20%, transparent);
}
.u2-formula-code {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--u2-ink);
}
.u2-formula-txt { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.u2-formula-slot {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: var(--u2-r-sm);
  border: 1px dashed color-mix(in srgb, var(--u2-brand) 34%, transparent);
  background: color-mix(in srgb, var(--u2-brand) 5%, var(--surface));
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.u2-formula-ph { font-size: 0.73rem; font-weight: 600; color: color-mix(in srgb, var(--ink) 42%, transparent); }
.u2-formula-slot:hover,
.u2-formula-slot.is-target,
.u2-formula-slot.is-over {
  border-color: var(--u2-brand);
  background: color-mix(in srgb, var(--u2-brand) 11%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u2-brand) 16%, transparent);
}
.u2-formula-slot.is-filled { border-style: solid; border-color: transparent; background: none; padding: 2px; cursor: default; box-shadow: none; }
.u2-formula-slot.is-wrong { animation: u2Shake 0.5s ease; border-color: var(--u2-clay); background: color-mix(in srgb, var(--u2-clay) 9%, var(--surface)); }
.u2-vlookup .u2-card.u2-pulse,
.u2-vlookup .u2-formula-slot.u2-pulse {
  position: relative;
  z-index: 2;
  animation: u2NavPulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(var(--secondary-rgb, 47, 111, 173), 0.45);
}
.u2-vlookup .u2-formula-slot.u2-pulse {
  border-color: var(--u2-brand);
  background: color-mix(in srgb, var(--u2-brand) 14%, var(--surface));
}
.u2-coach-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: u2CoachCaret 0.85s steps(1) infinite;
}
@keyframes u2CoachCaret {
  50% { opacity: 0; }
}
.u2-formula-val {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--u2-r-sm);
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  background: color-mix(in srgb, var(--acc) 11%, var(--surface));
  color: color-mix(in srgb, var(--acc) 44%, var(--u2-ink));
  font-weight: 700;
  animation: u2Pop 0.26s ease both;
}
.u2-vl-why {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.6;
  color: var(--u2-txt-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.u2-vl-why.is-in { opacity: 1; transform: none; }
.u2-vl-result { display: flex; flex-direction: column; gap: 8px; animation: u2Rise 0.32s ease both; }
.u2-vl-num.is-pop { animation: u2Pop 0.4s ease both; }
.u2-fx-link { display: flex; flex-direction: column; gap: 6px; }
.u2-gs--vlookup .u2-formula.u2-gs-fx-bar.is-linked {
  border: 2px solid #1a73e8;
  background: var(--sheet-sel);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
  border-radius: 6px;
}
.u2-gs--vlookup .u2-gs-fx-name.is-linked {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
  font-weight: 700;
}
.u2-fx-link-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 550;
  line-height: 1.4;
  color: #1a73e8;
}
.u2-fx-link-hint b { font-weight: 700; }
.u2-vl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(196px, 0.85fr);
  gap: 10px;
  align-items: start;
}
.u2-vl-analysis {
  border: 2px solid #1a73e8;
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, #1a73e8 10%, var(--surface));
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}
.u2-vl-analysis-h {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1a73e8;
}
.u2-vl-result-cell.is-fx-cell {
  position: relative;
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
  background: var(--sheet-sel) !important;
  font-weight: 700;
  color: #174ea6;
}
.u2-fx-cell-tag {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  padding: 0 5px;
  border-radius: 3px;
  background: #1a73e8;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
}
.u2-vl-analysis .u2-sheet-table--grid th.is-col-on,
.u2-vl-analysis .u2-sheet-table--grid th.is-row-on {
  background: color-mix(in srgb, #1a73e8 28%, var(--surface)) !important;
  color: #174ea6 !important;
}
.u2-sheet-table--grid td.is-ref-on {
  outline: 2px dashed #137333;
  outline-offset: -2px;
  background: color-mix(in srgb, var(--output) 16%, var(--surface));
}

/* ---- design gallery carousel ---- */
.u2-gal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.u2-gal-stage {
  display: grid;
  place-items: center;
  height: 380px;
  min-height: 380px;
  padding: 18px 16px;
  border-radius: 0;
  border: none;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--acc, #8b3dff) 12%, transparent), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(0, 196, 204, 0.08), transparent 40%),
    var(--surface-2);
  box-shadow: none;
  overflow: hidden;
}
.u2-gal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0;
  animation: u2Rise 0.4s ease both;
}
.u2-gal-card--live { max-width: min(420px, 100%); }
.u2-gal-card--live .u2-gal-art {
  width: 100%;
  height: 240px;
  max-height: 240px;
  aspect-ratio: auto;
}
.u2-gal-card--live .u2-gal-art--banner {
  height: 240px;
  max-height: 240px;
  max-width: 100%;
}
.u2-gal-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.u2-gal-kind {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acc);
}
.u2-gal-size {
  font-size: 0.68rem;
  font-weight: 600;
  color: #6b6b6b;
}
.u2-gal-art {
  position: relative;
  display: grid;
  place-items: stretch;
  height: 240px;
  aspect-ratio: auto;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
  border: none;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.u2-gal-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Copyright-safe original CSS art (no stock photos) */
.u2-design-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #0b3d4a 0%, #145a6a 42%, #1d7a6c 100%);
}
.u2-design-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.u2-design-art-glow {
  position: absolute;
  width: 70%;
  height: 70%;
  top: -18%;
  right: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 68%);
  pointer-events: none;
  z-index: 1;
}
.u2-design-art-shape {
  position: absolute;
  border-radius: 28% 72% 55% 45% / 40% 35% 65% 60%;
  opacity: 0.2;
  background: rgba(255, 255, 255, 0.18);
  z-index: 1;
}
.u2-design-art-shape--1 { width: 55%; height: 48%; left: -12%; bottom: -18%; }
.u2-design-art-shape--2 { width: 38%; height: 36%; right: 6%; top: 18%; border-radius: 40% 60% 55% 45%; opacity: 0.14; }
.u2-design-art-shape--3 { width: 22%; height: 22%; left: 28%; top: 12%; border-radius: 50%; opacity: 0.12; }
.u2-design-art-grid {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}
.u2-design-art--open {
  background: linear-gradient(135deg, #1a3a6b 0%, #2563a8 45%, #4a8fd4 100%);
}
.u2-design-art--social {
  background: linear-gradient(160deg, #6b2c24 0%, #c45c4a 48%, #e8a090 100%);
}
.u2-design-art--profile {
  background: linear-gradient(150deg, #5a3d12 0%, #c48a2a 50%, #e6c07b 100%);
}
.u2-design-art--seminar {
  background: linear-gradient(145deg, #12353a 0%, #0f6b6b 40%, #2a9d8f 100%);
}
.u2-design-art--poor {
  background: linear-gradient(45deg, #444 0%, #777 40%, #333 70%, #999 100%);
  filter: saturate(0.35) contrast(1.15);
}
.u2-design-art--poor .u2-design-art-grid { opacity: 0.28; background-size: 10px 10px; }
.u2-gal-thumb-art,
.u2-bn-mock,
.u2-poster-img--art,
.u2-tpl-design,
.u2-gp-art,
.u2-err-img--art,
.u2-li-cover--art,
.u2-li-feat-art--art,
.u2-li-feature-art--art,
.u2-entry-tpl-photo--art {
  position: relative;
  overflow: hidden;
}
.u2-poster-img--art,
.u2-err-img--art { display: block; min-height: 72px; }
.u2-li-cover--art { min-height: 88px; }
.u2-li-feat-art--art,
.u2-li-feature-art--art { display: block; min-height: 72px; min-width: 96px; }
.u2-entry-tpl-photo--art { display: block; min-height: 80px; }
.u2-gal-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(10, 16, 24, 0.15) 0%, rgba(10, 16, 24, 0.35) 42%, rgba(10, 16, 24, 0.82) 100%);
  pointer-events: none;
}
.u2-gal-art--banner .u2-gal-veil {
  background:
    linear-gradient(90deg, rgba(10, 22, 40, 0.88) 0%, rgba(10, 22, 40, 0.45) 48%, rgba(10, 22, 40, 0.2) 100%);
}
.u2-gal-art-blob {
  display: none;
}
.u2-gal-art-blob--2 { display: none; }
.u2-gal-art-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  text-align: left;
  color: #fff;
  align-self: end;
  background: transparent;
}
.u2-gal-art--banner .u2-gal-art-copy {
  align-self: center;
  max-width: 58%;
  padding: 16px 18px;
}
.u2-gal-art--square .u2-gal-art-copy {
  padding: 22px 18px;
}
.u2-gal-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 750;
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  color: #fff;
}
.u2-gal-sub {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 550;
  opacity: 0.92;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.u2-gal-cta {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: var(--acc);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.u2-gal-cap { display: flex; flex-direction: column; gap: 3px; }
.u2-gal-area { font-size: 0.82rem; font-weight: 700; color: color-mix(in srgb, var(--acc) 50%, var(--u2-ink)); }
.u2-gal-note { font-size: 0.77rem; font-weight: 500; line-height: 1.55; color: var(--u2-txt-2); }
.u2-gal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.u2-gal-dots { display: inline-flex; gap: 6px; margin-left: auto; }
.u2-gal-zoom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #7a7a7a;
}
.u2-gal-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(26, 35, 50, 0.22);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.u2-gal-dot:hover { transform: scale(1.15); }
.u2-gal-dot.is-on { background: var(--u2-brand); border-color: var(--u2-brand); transform: scale(1.2); }

/* Gallery Canva pro shell + template panel */
.u2-canva--pro {
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}
.u2-canva--pro .u2-canva-top {
  gap: 12px;
  padding: 10px 14px;
}
.u2-canva--pro .u2-canva-doc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.u2-canva--pro .u2-canva-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.u2-canva--pro .u2-canva-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--read-muted);
}
.u2-canva--pro .u2-canva-sub i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #8b3dff;
}
.u2-canva--pro .u2-canva-sub i:nth-child(2) { background: #00c4cc; }
.u2-canva--pro .u2-canva-sub i:nth-child(3) { background: #ff6a3d; }
.u2-canva--pro .u2-canva-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 150px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
}
.u2-canva--pro .u2-canva-actions { display: inline-flex; gap: 6px; }
.u2-canva--pro .u2-canva-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #8b3dff;
  color: #fff;
}
.u2-canva--pro .u2-canva-btn--ghost {
  background: var(--surface-2);
  color: var(--ink);
}
.u2-canva-body--gal {
  grid-template-columns: 72px 188px minmax(0, 1fr);
  min-height: 380px;
  background: var(--surface);
}
.u2-canva-rail--icons {
  align-items: stretch;
  padding: 8px 6px;
  background: var(--surface);
}
.u2-canva-rail--icons span {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--read-muted);
}
.u2-canva-rail--icons span small {
  font-size: 0.6rem;
  line-height: 1.1;
}
.u2-canva-rail--icons span.is-on {
  background: color-mix(in srgb, var(--u2-canva-purple) 18%, var(--surface));
  color: #7d2ae8;
}
.u2-gal-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  min-height: 0;
  overflow: auto;
}
.u2-gal-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px 6px;
}
.u2-gal-panel-head strong {
  font-size: 0.78rem;
  font-weight: 750;
  color: #1a1a1a;
}
.u2-gal-panel-head span {
  font-size: 0.64rem;
  font-weight: 600;
  color: #8a8a8a;
}
.u2-gal-thumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.u2-gal-thumb {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.u2-gal-thumb:hover {
  border-color: color-mix(in srgb, #8b3dff 35%, #ddd);
}
.u2-gal-thumb.is-on {
  border-color: #8b3dff;
  box-shadow: 0 0 0 1px rgba(139, 61, 255, 0.2);
}
.u2-gal-thumb-art {
  position: relative;
  display: block;
  width: 100%;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--acc) 18%, var(--line));
  aspect-ratio: auto;
}
.u2-gal-thumb-art .u2-design-art {
  position: absolute;
  inset: 0;
}
.u2-gal-thumb-art .u2-design-art-glow,
.u2-gal-thumb-art .u2-design-art-shape,
.u2-gal-thumb-art .u2-design-art-grid {
  display: none;
}
.u2-gal-thumb-art img,
.u2-gal-thumb-art .u2-design-art-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 0;
}
.u2-gal-thumb-label {
  position: absolute;
  left: 5px;
  bottom: 5px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--acc) 82%, #000 18%);
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u2-gal-thumb-meta { display: none; }
.u2-gal--pro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-2);
}

/* ---- poster reveal ---- */
.u2-poster { align-items: flex-start; }
.u2-poster-sheet {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 330px;
  padding: 15px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(170deg, var(--surface), color-mix(in srgb, var(--u2-brand) 6%, var(--surface)));
  box-shadow: var(--u2-shadow);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.u2-poster-sheet.is-full {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u2-green) 30%, transparent), var(--u2-shadow-l);
  transform: translateY(-2px);
}
.u2-poster-zone {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--u2-r-md);
  border: 1px dashed transparent;
  background: var(--surface-2);
}
.u2-poster-zone:hover { border-color: color-mix(in srgb, var(--u2-brand) 34%, transparent); }
.u2-poster-zone--title { text-align: center; align-items: center; gap: 4px; }
.u2-poster-h1 {
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.25;
  color: var(--u2-brand-deep);
}
.u2-poster-h2 { font-size: 0.74rem; font-weight: 600; color: var(--u2-txt-3); }
.u2-poster-zone--img { padding: 6px; }
.u2-poster-img {
  position: relative;
  display: block;
  height: 108px;
  border-radius: var(--u2-r-md);
  overflow: hidden;
  background: linear-gradient(180deg, #cfe7ea, #eaf4f4);
}
.u2-poster-img-sun {
  position: absolute;
  top: 16px;
  right: 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F2C15B;
  box-shadow: 0 0 20px rgba(242, 193, 91, 0.6);
}
.u2-poster-img-hill {
  position: absolute;
  bottom: -34px;
  left: -12%;
  width: 84%;
  height: 74px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--u2-brand) 72%, var(--surface));
}
.u2-poster-img-hill--2 { left: auto; right: -14%; width: 72%; height: 62px; background: color-mix(in srgb, var(--u2-brand) 44%, var(--surface)); }
.u2-poster-zone--info { gap: 2px; }
.u2-poster-zone--info span { font-size: 0.76rem; font-weight: 550; color: var(--u2-txt-2); }
.u2-poster-zone--msg { align-items: center; }
.u2-poster-cta {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-clay) 88%, var(--surface)), var(--u2-clay));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--u2-clay) 26%, transparent);
}

/* ---- design error find ---- */
.u2-poster--bad .u2-poster-sheet--bad {
  gap: 4px;
  padding: 9px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--amber) 14%, var(--surface)), color-mix(in srgb, var(--coral) 12%, var(--surface)));
  border-color: color-mix(in srgb, var(--u2-clay) 22%, transparent);
}
.u2-err-zone {
  display: block;
  padding: 7px 9px;
  border-radius: var(--u2-r-sm);
  border: 1px dashed rgba(196, 92, 74, 0.34);
  background: var(--surface-2);
}
.u2-err-zone > span { display: block; }
.u2-err-zone--font span {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  word-spacing: 0.6em;
  text-transform: uppercase;
  color: #8b2f6d;
  font-family: Georgia, "Times New Roman", serif;
}
.u2-err-zone--img { padding: 4px; }
.u2-err-img {
  display: block;
  height: 66px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, #b9c6cc 0 6px, #d6e0e4 6px 12px);
  filter: blur(1.4px) saturate(0.7);
  transform: scaleX(1.04);
}
.u2-err-zone--text span { font-size: 0.63rem; font-weight: 500; line-height: 1.25; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.u2-err-swatches { display: flex; gap: 3px; }
.u2-err-swatches i { flex: 1; height: 20px; border-radius: 4px; }
.u2-err-swatches i:nth-child(1) { background: #ff2e63; }
.u2-err-swatches i:nth-child(2) { background: #00e0a4; }
.u2-err-swatches i:nth-child(3) { background: #ffd400; }
.u2-err-swatches i:nth-child(4) { background: #8b2fe0; }
.u2-err-zone--space span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

.u2-errorfind .u2-hs { align-items: stretch; }
.u2-errorfind .u2-hs-stage.u2-poster {
  align-items: stretch;
  min-height: 460px;
  padding: 18px 20px;
}
.u2-errorfind .u2-poster-sheet {
  max-width: none;
  width: 100%;
  min-height: 100%;
}
.u2-errorfind .u2-poster-sheet--bad {
  gap: 8px;
  padding: 16px 18px;
}
.u2-errorfind .u2-err-zone { padding: 12px 14px; }
.u2-errorfind .u2-err-zone--font span { font-size: 1.42rem; }
.u2-errorfind .u2-err-img,
.u2-errorfind .u2-err-img--photo,
.u2-errorfind .u2-err-img--photo img { height: 180px; }
.u2-errorfind .u2-err-zone--text span {
  font-size: 0.82rem;
  line-height: 1.5;
}
.u2-errorfind .u2-err-swatches i { height: 36px; }
.u2-errorfind .u2-err-zone--space span {
  font-size: 0.86rem;
  line-height: 1.35;
  letter-spacing: 0;
}

/* ---- banner compare mocks ---- */
.u2-bn-mock {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 6px 0;
  border-radius: var(--u2-r-sm);
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 86%, #000), color-mix(in srgb, var(--acc) 52%, var(--surface)));
  box-shadow: var(--u2-shadow-s);
  overflow: hidden;
}
.u2-bn-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u2-bn-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 72%, transparent), rgba(10, 16, 28, 0.55));
  pointer-events: none;
}
.u2-bn-mock-txt {
  position: relative;
  z-index: 1;
  display: block;
  padding: 4px 8px;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.u2-bn-mock--web {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;
}
.u2-bn-mock--stage {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}
.u2-bn-mock--campus {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
}
.u2-bn-mock--rollup {
  width: min(38%, 64px);
  height: auto;
  aspect-ratio: 1 / 3;
  max-width: 64px;
  margin-inline: auto;
  place-items: start center;
  padding: 10% 4px 0;
}
.u2-bn-mock--rollup .u2-bn-mock-txt {
  font-size: 0.58rem;
  padding: 2px 4px;
}
.u2-bn-mock--campus .u2-bn-mock-txt,
.u2-bn-mock--stage .u2-bn-mock-txt {
  font-size: 0.6rem;
  padding: 2px 6px;
  white-space: nowrap;
}

/* ---- template animation / social feed chrome ---- */
.u2-tpl { display: flex; flex-direction: column; gap: 12px; }
.u2-tpl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.u2-tpl-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  color: var(--u2-txt-2);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.u2v-host .u2-tpl-tab {
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
}
.u2-tpl-tab span { display: inline-flex; color: var(--acc); }
.u2-tpl-tab:hover { transform: translateY(-1px); color: var(--u2-ink); }
.u2-tpl-tab.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 88%, var(--surface)), var(--acc));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--acc) 28%, transparent);
}
.u2-tpl-tab.is-on span { color: #fff; }
.u2-tpl-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface-2), #eef1f5);
  box-shadow: var(--u2-shadow-s);
}
.u2-tpl-feed {
  min-width: 0;
  min-height: 400px;
}
.u2-soc {
  background: var(--surface);
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  max-width: 460px;
  margin: 0 auto;
  min-height: 360px;
}
.u2-soc.is-morph { animation: u2Morph 0.55s cubic-bezier(0.4, 0, 0.2, 1) both; }
.u2-soc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.u2-soc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--acc) 16%, var(--surface));
  color: var(--acc);
  flex-shrink: 0;
}
.u2-soc-avatar--ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e1306c; }
.u2-soc-avatar--sq { border-radius: 6px; }
.u2-soc-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.u2-soc-who b { font-size: 0.82rem; font-weight: 700; color: #050505; line-height: 1.2; }
.u2-soc-who small { font-size: 0.68rem; color: #65676b; }
.u2-soc-more { color: #65676b; font-weight: 700; letter-spacing: 0.08em; }
.u2-tpl-design {
  position: relative;
  height: 220px;
  aspect-ratio: auto;
  overflow: hidden;
  background: #111;
}
.u2-tpl-design img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u2-tpl-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 28, 0.12) 0%, rgba(10, 16, 28, 0.72) 100%);
  pointer-events: none;
}
.u2-tpl-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 14px;
  height: 100%;
  justify-content: flex-end;
}
.u2-tpl-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.u2-tpl-sub {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.92);
}
.u2-tpl-cta {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--acc, #1877f2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.u2-soc-actions {
  display: flex;
  justify-content: space-around;
  gap: 4px;
  padding: 8px 6px;
  border-top: 1px solid #e4e6eb;
  color: #65676b;
  font-size: 0.74rem;
  font-weight: 650;
}
.u2-soc-actions span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 6px;
}
.u2-soc-actions--li { justify-content: space-between; padding-inline: 10px; }
.u2-soc-igbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 4px;
  color: #262626;
}
.u2-soc-ig-end { margin-left: auto; }
.u2-soc-likes {
  margin: 0;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #262626;
}
.u2-soc-caption {
  margin: 4px 0 12px;
  padding: 0 12px;
  font-size: 0.76rem;
  color: #262626;
  line-height: 1.4;
}
.u2-soc-caption b { margin-right: 4px; }
.u2-soc-li-lead {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.9);
  line-height: 1.45;
}
.u2-tpl-keeps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.u2-tpl-keeps li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--u2-txt-2);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.u2-tpl-keeps li span { display: inline-flex; color: var(--u2-brand); }
.u2-tpl-keeps li.is-flash {
  border-color: color-mix(in srgb, var(--u2-brand) 34%, transparent);
  background: color-mix(in srgb, var(--u2-brand) 7%, var(--surface));
  color: var(--u2-brand-deep);
  animation: u2Flash 0.7s ease both;
}

/* ---- good vs poor design ---- */
.u2-gp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.u2-gp-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.u2-gp-side:hover { transform: translateY(-2px); box-shadow: var(--u2-shadow); }
.u2-gp-side.is-ok {
  border-color: color-mix(in srgb, var(--u2-green) 40%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--u2-green) 18%, transparent), var(--u2-shadow);
}
.u2-gp-side.is-bad { border-color: color-mix(in srgb, var(--u2-clay) 44%, transparent); animation: u2Shake 0.44s ease; }
.u2-gp-tag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--u2-txt-2);
  background: color-mix(in srgb, var(--u2-brand) 8%, var(--surface));
  border: 1px solid var(--u2-line-soft);
}
.u2-gp-art {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  border-radius: var(--u2-r-md);
  min-height: 214px;
}
.u2-gp-art--good { background: linear-gradient(170deg, var(--surface), color-mix(in srgb, var(--u2-brand) 7%, var(--surface))); align-items: center; }
.u2-gp-art--poor { gap: 2px; padding: 7px; background: linear-gradient(170deg, color-mix(in srgb, var(--amber) 16%, var(--surface)), color-mix(in srgb, var(--coral) 14%, var(--surface))); }
.u2-gp-t { font-size: 0.98rem; font-weight: 750; line-height: 1.25; color: var(--u2-brand-deep); text-align: center; }
.u2-gp-t--poor {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  word-spacing: 0.5em;
  text-transform: uppercase;
  text-align: left;
  color: #8b2f6d;
}
.u2-gp-img {
  display: block;
  width: 100%;
  height: 76px;
  border-radius: 8px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--u2-brand) 62%, var(--surface)), color-mix(in srgb, var(--u2-blue) 42%, var(--surface)));
}
.u2-gp-noise {
  display: block;
  width: 100%;
  height: 58px;
  border-radius: 5px;
  background: repeating-linear-gradient(45deg, #b9c6cc 0 5px, #dbe4e8 5px 10px);
  filter: blur(1.3px);
}
.u2-gp-line { display: block; width: 100%; height: 8px; border-radius: 999px; background: rgba(26, 35, 50, 0.12); }
.u2-gp-line--sm { width: 62%; }
.u2-gp-line--dense { height: 5px; margin-bottom: 1px; background: rgba(26, 35, 50, 0.24); }
.u2-gp-cta {
  align-self: center;
  margin-top: auto;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--u2-brand);
}
.u2-gp-cta--poor {
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink);
  background: #ffd400;
}
.u2-gp-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; animation: u2Rise 0.34s ease both; }
.u2-gp-col,
.u2-rs-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
}
.u2-gp-col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.u2-gp-col li { font-size: 0.79rem; font-weight: 500; line-height: 1.5; color: var(--u2-txt-2); }
.u2-gp-col-head,
.u2-rs-col-head { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 700; }
.u2-gp-col--good,
.u2-rs-col--good {
  border-color: color-mix(in srgb, var(--u2-green) 26%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-green) 6%, var(--surface)), var(--surface));
}
.u2-gp-col--good .u2-gp-col-head,
.u2-rs-col--good .u2-rs-col-head { color: color-mix(in srgb, var(--u2-green) 40%, var(--u2-ink)); }
.u2-gp-col--poor,
.u2-rs-col--bad {
  border-color: color-mix(in srgb, var(--u2-clay) 26%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-clay) 6%, var(--surface)), var(--surface));
}
.u2-gp-col--poor .u2-gp-col-head,
.u2-rs-col--bad .u2-rs-col-head { color: color-mix(in srgb, var(--u2-clay) 44%, var(--u2-ink)); }

/* ---- reveal grid ---- */
.u2-rg { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 11px; align-items: stretch; }
.u2-rg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u2-rg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u2-rg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  height: 100%;
  gap: 6px;
  padding: 13px 13px 34px;
  box-sizing: border-box;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.u2-rg-card:hover { transform: translateY(-2px); box-shadow: var(--u2-shadow); }
.u2-rg-card.is-open {
  border-color: color-mix(in srgb, var(--acc) 38%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 20%, transparent), var(--u2-shadow);
}
.u2-rg-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.u2-rg-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--u2-r-md);
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--acc) 20%, transparent);
}
.u2-rg-mark { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.u2-rg-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--acc);
}
.u2-rg-label { font-size: 0.86rem; font-weight: 650; line-height: 1.35; color: var(--u2-ink); }
.u2-rg-sub { font-size: 0.73rem; font-weight: 500; line-height: 1.4; color: var(--u2-txt-3); }
.u2-rg-body {
  display: block;
  flex: 1 1 auto;
  padding-top: 7px;
  margin-top: 2px;
  border-top: 1px dashed var(--u2-line-soft);
  animation: u2Rise 0.28s ease both;
}
.u2-rg-body p { margin: 0 0 6px; font-size: 0.78rem; font-weight: 500; line-height: 1.6; color: var(--u2-txt-2); }
.u2-rg-body p:last-child { margin-bottom: 0; }
.u2-rg-cue {
  position: absolute;
  right: 11px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
  transition: transform 0.25s ease;
}
.u2-rg-card.is-open .u2-rg-cue { transform: rotate(45deg); }

/* ---- opening scene ---- */
.u2-open { display: flex; flex-direction: column; gap: 12px; }
.u2-open-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
}
.u2-open-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
}
.u2-open-side-title {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u2-txt-2);
}
.u2-open-side--messy { border-style: dashed; border-color: color-mix(in srgb, var(--u2-clay) 26%, transparent); }
.u2-open-side--tidy {
  border-color: color-mix(in srgb, var(--u2-brand) 26%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--u2-brand) 5%, var(--surface)));
  opacity: 0.42;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.u2-open-stage.is-tidy .u2-open-side--tidy { opacity: 1; transform: none; }
.u2-open-scatter { position: relative; min-height: 124px; }
.u2-open-tidy { display: flex; flex-direction: column; gap: 8px; }
.u2-open-arrow { display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color 0.5s ease; }
.u2-open-stage.is-tidy .u2-open-arrow { color: var(--u2-brand); }
.u2-open-q {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 0 0 0 11px;
  border: none;
  border-left: 3px solid var(--u2-brand);
  border-radius: 0;
  background: none;
}
.u2-open-q-ico { flex: none; display: inline-flex; margin-top: 2px; color: var(--u2-brand); }
.u2-open-q-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.u2-open-q-text { margin: 0; font-size: 0.86rem; font-weight: 650; line-height: 1.5; color: var(--u2-ink); }
.u2-open-q-hint {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--u2-txt-3);
}
.u2-open-q--slogan {
  align-items: center;
  gap: 0;
  margin: 6px 0 0;
  padding: 0;
  border: none;
}
.u2-open-q--slogan .u2-open-q-text {
  font-family: var(--font-display, inherit);
  font-weight: 650;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--brand, #0F6B6B);
}
.u2-open-choices { margin-top: 2px; }
.u2-open .u2v-btn { align-self: flex-start; }

/* ---- scattered assets / stickies ---- */
.u2-asset,
.u2-sticky {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--u2-r-sm);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--u2-txt-2);
  box-shadow: var(--u2-shadow-s);
  transition: transform 0.4s ease, box-shadow 0.2s ease;
}
.u2-asset span { display: inline-flex; color: var(--u2-brand); }
.u2-asset:hover,
.u2-sticky:hover { box-shadow: var(--u2-shadow); z-index: 2; }
.u2-asset--a { top: 0; left: 0; transform: rotate(-6deg); }
.u2-asset--b { top: 32px; left: 40px; transform: rotate(4deg); }
.u2-asset--c { top: 64px; left: 2px; transform: rotate(-3deg); }
.u2-asset--d { top: 20px; right: 4px; transform: rotate(7deg); }
.u2-asset--e { top: 88px; right: 16px; transform: rotate(-5deg); }
.u2-asset--f { top: 52px; right: 52px; transform: rotate(3deg); }
.u2-sticky {
  padding: 10px 11px;
  border-radius: 4px;
  border: none;
  font-weight: 650;
  color: #1A2332;
}
.u2-sticky--a { top: 0; left: 2px; transform: rotate(-5deg); background: #FFF3C4; }
.u2-sticky--b { top: 34px; left: 58px; transform: rotate(6deg); background: #D8EEF3; }
.u2-sticky--c { top: 68px; left: 8px; transform: rotate(-3deg); background: #FBDCD6; }
.u2-sticky--d { top: 26px; right: 2px; transform: rotate(4deg); background: #DCEBDD; }
.u2-sticky--e { top: 90px; right: 38px; transform: rotate(-7deg); background: #E3E4F3; }

/* ---- mini mocks (site, board, doc) ---- */
.u2-mini-site {
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
  overflow: hidden;
}
.u2-mini-site-bar { display: flex; gap: 4px; padding: 7px 9px; background: var(--u2-paper-3); }
.u2-mini-site-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(26, 35, 50, 0.2); }
.u2-mini-site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--u2-line-soft);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--u2-brand);
}
.u2-mini-site-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 9px; }
.u2-mini-site-grid i {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--u2-brand) 26%, var(--surface)), color-mix(in srgb, var(--u2-blue) 18%, var(--surface)));
}
.u2-mini-site-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.u2-mini-site-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  background: color-mix(in srgb, var(--u2-brand) 12%, var(--surface));
  box-shadow: var(--u2-shadow-s);
}
.u2-mini-site-card figcaption {
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--u2-txt-3);
  text-align: center;
  line-height: 1.2;
}
.u2-mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.u2-mini-col { display: flex; flex-direction: column; gap: 5px; padding: 8px 7px; border-radius: var(--u2-r-sm); background: var(--surface-2); border: 1px solid var(--line); }
.u2-mini-col-h { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ink); }
.u2-mini-col i { display: block; height: 16px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--u2-shadow-s); }
.u2-mini-doc { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.u2-mini-doc i { display: block; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--u2-brand) 16%, var(--surface)); }
.u2-mini-doc i:nth-child(2) { width: 82%; }
.u2-mini-doc i:nth-child(3) { width: 66%; }
.u2-mini-doc i:nth-child(4) { width: 74%; }
.u2-urlbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--u2-line);
  background: var(--u2-paper-2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--u2-txt-2);
}
.u2-urlbar > span:first-child { display: inline-flex; color: var(--u2-green); }
.u2-urlbar-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
}
.u2-urlbar-copy { display: inline-flex; color: var(--u2-brand); }

/* ---- portfolio site frame ---- */
.u2-site { align-items: stretch; }
.u2-site-frame {
  width: 100%;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow);
  overflow: hidden;
}
.u2-site-bar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: var(--u2-paper-3); }
.u2-site-bar > span:not(.u2-site-url) { width: 8px; height: 8px; border-radius: 50%; background: rgba(26, 35, 50, 0.2); }
.u2-site-url {
  flex: 1;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--u2-txt-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u2-site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
}
.u2-site-nav button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
  color: var(--u2-txt-2);
}
.u2v-host .u2-site-nav button {
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
}
.u2-site-nav button:hover { background: color-mix(in srgb, var(--u2-brand) 8%, var(--surface)); color: var(--u2-ink); }
.u2-site-nav button.is-found { color: var(--u2-brand-deep); }
.u2-site-nav button.is-on {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-brand) 90%, var(--surface)), var(--u2-brand));
  border-color: transparent;
}
.u2-site-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.u2-site-hero {
  height: 84px;
  border-radius: var(--u2-r-md);
  background: linear-gradient(140deg, color-mix(in srgb, var(--u2-brand) 82%, #000), color-mix(in srgb, var(--u2-blue) 52%, var(--surface)));
}
.u2-site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.u2-site-cards i {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--u2-r-sm);
  background: var(--u2-paper-3);
  border: 1px solid var(--u2-line-soft);
}

/* ---- case study thumbs ---- */
.u2-cs-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.u2-cs-thumb { display: flex; flex-direction: column; gap: 3px; }
.u2-cs-thumb-art { display: block; border-radius: 6px; box-shadow: var(--u2-shadow-s); }
.u2-cs-thumb--poster .u2-cs-thumb-art { aspect-ratio: 3 / 4; background: linear-gradient(150deg, #0F6B6B, #4fb3a8); }
.u2-cs-thumb--banner .u2-cs-thumb-art { aspect-ratio: 16 / 9; background: linear-gradient(150deg, #2563A8, #7fb0dd); }
.u2-cs-thumb--social .u2-cs-thumb-art { aspect-ratio: 1; background: linear-gradient(150deg, #C45C4A, #e8a394); }
.u2-cs-thumb-cap { font-size: 0.66rem; font-weight: 650; color: var(--u2-txt-3); text-align: center; }

/* ---- portfolio entries ---- */
.u2-entry-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; align-items: stretch; }
.u2-entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
  min-height: 100%;
}
.u2-entry--weak { border-style: dashed; }
.u2-entry-kicker {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u2-txt-2);
  background: color-mix(in srgb, var(--u2-brand) 8%, var(--surface));
  border: 1px solid var(--u2-line-soft);
}
.u2-sc-card.is-solved .u2-entry--weak {
  border-color: color-mix(in srgb, var(--u2-clay) 30%, transparent);
}
.u2-sc-card.is-solved .u2-entry--strong {
  border-color: color-mix(in srgb, var(--u2-green) 30%, transparent);
}
.u2-sc-card.is-solved .u2-entry--strong .u2-entry-kicker {
  color: color-mix(in srgb, var(--u2-green) 42%, var(--u2-ink));
  background: color-mix(in srgb, var(--u2-green) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--u2-green) 22%, transparent);
}
.u2-entry-title { margin: 0; font-size: 0.83rem; font-weight: 700; line-height: 1.35; color: var(--u2-ink); }
.u2-entry-line { margin: 0; font-size: 0.75rem; font-weight: 500; color: var(--u2-txt-3); }
.u2-entry-fields { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.u2-entry-fields li { font-size: 0.72rem; font-weight: 500; line-height: 1.45; color: var(--u2-txt-2); }
.u2-entry-fields b { font-weight: 700; color: var(--u2-brand-deep); }
.u2-entry-img {
  display: block;
  height: 42px;
  margin-top: auto;
  border-radius: 6px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--u2-brand) 24%, var(--surface)), color-mix(in srgb, var(--u2-blue) 16%, var(--surface)));
}
.u2-entry--weak .u2-entry-img { filter: blur(0.8px) saturate(0.65); }
.u2-entry-tpl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 #fff, var(--u2-shadow-s);
  min-height: 176px;
}
.u2-entry-tpl-band {
  display: block;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, #0F6B6B, #4fb3a8);
}
.u2-entry-tpl-name,
.u2-entry-tpl-role,
.u2-entry-tpl-line {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--u2-ink) 16%, var(--surface));
}
.u2-entry-tpl-name { width: 58%; height: 8px; }
.u2-entry-tpl-role {
  width: 38%;
  height: 6px;
  background: color-mix(in srgb, var(--u2-brand) 22%, var(--surface));
}
.u2-entry-tpl-rule {
  display: block;
  height: 1px;
  margin: 1px 0 2px;
  background: var(--u2-line-soft);
}
.u2-entry-tpl-line { width: 92%; height: 5px; background: color-mix(in srgb, var(--u2-ink) 10%, var(--surface)); }
.u2-entry-tpl-line--short { width: 64%; }
.u2-entry-tpl-line--mid { width: 78%; }
.u2-entry-tpl-photo {
  display: block;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
  background: #d7ece9;
}
.u2-entry-tpl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u2-goodweak .u2-sc-choose {
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--u2-txt-2);
}

/* ---- resume builder ---- */
.u2-rs { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.u2-rs-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--u2-r-lg);
  border: 1px dashed color-mix(in srgb, var(--u2-brand) 26%, transparent);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
}
.u2v-host .u2-rs-picker .u2-card,
.u2-rs-picker .u2-card {
  width: 100%;
  flex: 1 1 0;
  min-height: 52px;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  box-sizing: border-box;
}
.u2-rs-picker .u2-card-label {
  flex: 1;
  min-width: 0;
}
.u2-rs-picker .u2-card-ico { width: 22px; height: 22px; }
.u2-rs-paper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 420px;
  padding: 28px 32px 32px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow);
  position: relative;
}
.u2-rs-paper--letter { min-height: 460px; }
.u2-rs-pdf {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  color: var(--u2-txt-2);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  pointer-events: none;
}
.u2-rs-empty { margin: auto; font-size: 0.92rem; font-weight: 550; color: var(--u2-txt-3); text-align: center; }
.u2-rs-block {
  padding-left: 0;
  border-left: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.34s ease, transform 0.34s ease;
}
.u2-rs-block.is-in { opacity: 1; transform: none; }
.u2-rs-head { padding-right: 108px; }
.u2-rs-name { margin: 0; font-size: 1.18rem; font-weight: 750; line-height: 1.25; color: var(--u2-ink); }
.u2-rs-role { margin: 2px 0 0; font-size: 0.84rem; font-weight: 600; color: var(--acc); }
.u2-rs-h {
  margin: 0 0 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--acc) 72%, var(--u2-ink));
}
.u2-rs-line { margin: 0; font-size: 0.84rem; font-weight: 500; line-height: 1.55; color: var(--u2-txt-2); }
.u2-rs-contact { font-size: 0.8rem; }
.u2-rs-hr {
  width: 100%;
  margin: 4px 0 2px;
  border: 0;
  border-top: 1px solid var(--u2-line-soft);
}
.u2-rs-bullets {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--u2-txt-2);
}
.u2-rs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.u2-rs-chips i {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
  color: color-mix(in srgb, var(--acc) 55%, var(--u2-ink));
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
}
.u2-rs-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; animation: u2Rise 0.34s ease both; }
.u2-rs-col p:not(.u2-rs-col-head) { margin: 0; font-size: 0.78rem; font-weight: 500; line-height: 1.6; color: var(--u2-txt-2); }

/* ---- LinkedIn mock ---- */
.u2-li { align-items: stretch; }
.u2-li-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0 12px 12px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow);
  overflow: hidden;
}
.u2-li-cover {
  height: 100px;
  margin: 0 -12px;
  background: linear-gradient(120deg, #0A66C2, #4c9fe0 62%, color-mix(in srgb, var(--u2-brand) 62%, var(--surface)));
}
.u2-li-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border-radius: var(--u2-r-md);
  border: 1px solid transparent;
  background: var(--u2-paper-2);
}
.u2-li-zone:hover { border-color: rgba(10, 102, 194, 0.34); }
.u2-li-card .u2-li-avatar {
  position: absolute;
  top: 64px;
  left: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(150deg, #d7e7f5, #eff5fa);
  color: #0A66C2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.u2-li-top { margin-top: 12px; padding-left: 100px; min-height: 44px; }
.u2-li-headline { background: none; padding: 6px 8px; }
.u2-li-name { font-size: 0.98rem; font-weight: 750; line-height: 1.25; color: var(--u2-ink); }
.u2-li-role { font-size: 0.76rem; font-weight: 550; line-height: 1.45; color: var(--u2-txt-2); }
.u2-li-h { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--u2-txt-3); }
.u2-li-p { font-size: 0.78rem; font-weight: 500; line-height: 1.55; color: var(--u2-txt-2); }
.u2-li-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.u2-li-chips i {
  padding: 3px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  color: #0A66C2;
  background: rgba(10, 102, 194, 0.1);
}
.u2-li-feat { display: flex; flex-direction: column; gap: 5px; }
.u2-li-feat-art {
  display: block;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--u2-brand) 78%, #000), color-mix(in srgb, var(--u2-blue) 48%, var(--surface)));
}
.u2-li-feat-cap { font-style: normal; font-size: 0.73rem; font-weight: 650; color: var(--u2-ink); }
.u2-li-feature { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.u2-li-feature-art {
  display: block;
  height: 62px;
  border-radius: 8px;
  background: linear-gradient(140deg, #0A66C2, color-mix(in srgb, var(--u2-brand) 62%, var(--surface)));
}
.u2-li-feature-cap { font-size: 0.76rem; font-weight: 700; color: var(--u2-ink); }
.u2-li-feature-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  color: #0A66C2;
  word-break: break-all;
}

/* ---- concept map ---- */
.u2-cmap { align-items: center; }
.u2-cmap-wrap { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 0.86; min-height: 300px; }
.u2-cmap-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 122px;
  height: 122px;
  border-radius: 50%;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.3;
  color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--u2-brand) 72%, var(--surface)), var(--u2-brand) 72%);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--u2-brand) 32%, transparent);
}
.u2-cmap-core strong { font-weight: 700; }
.u2-cmap-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  background: var(--surface);
  font-size: 0.79rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--acc) 48%, var(--u2-ink));
  box-shadow: var(--u2-shadow-s);
  white-space: nowrap;
}
.u2v-host .u2-cmap-wrap .u2-cmap-node {
  position: absolute;
}
.u2-cmap-node span { display: inline-flex; color: var(--acc); }
.u2-cmap-node--1 { top: 4%; left: 50%; transform: translateX(-50%); }
.u2-cmap-node--2 { top: 28%; right: 0; }
.u2-cmap-node--3 { bottom: 6%; right: 2%; }
.u2-cmap-node--4 { bottom: 6%; left: 2%; }
.u2-cmap-node--5 { top: 28%; left: 0; }

/* ---- workflow animation ---- */
.u2-wf { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; }
.u2-wf-node {
  flex: 1 1 148px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--u2-paper-2);
  opacity: 0.55;
  filter: saturate(0.5);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.u2-wf-node.is-on {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--acc) 34%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--acc) 6%, var(--surface)));
  box-shadow: var(--u2-shadow);
}
.u2-wf-ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
}
.u2-wf-label { font-size: 0.81rem; font-weight: 700; line-height: 1.3; color: var(--u2-ink); }
.u2-wf-note { font-size: 0.71rem; font-weight: 500; line-height: 1.45; color: var(--u2-txt-3); }
.u2-wf-link {
  align-self: center;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: rgba(26, 35, 50, 0.14);
  transition: background 0.35s ease;
}
.u2-wf-link.is-on { background: color-mix(in srgb, var(--u2-brand) 60%, var(--surface)); }
.u2-wf-bar { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- app (Jira) mock ---- */
.u2-app {
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
  overflow: hidden;
}
.u2-app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-3));
  border-bottom: 1px solid var(--u2-line-soft);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--u2-txt-2);
}
.u2-app-dot { width: 9px; height: 9px; border-radius: 3px; background: #0052CC; flex: none; }
.u2-app-spacer { flex: 1; }
.u2-app-btn {
  padding: 4px 11px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--u2-txt-2);
  background: var(--surface);
  border: 1px solid var(--u2-line-soft);
}
.u2-app-btn.is-primary { color: #fff; background: #0052CC; border-color: transparent; }
.u2-app-body { padding: 12px; }
.u2-app-h { margin: 0 0 3px; font-size: 0.86rem; font-weight: 700; color: var(--u2-ink); }
.u2-app-p { margin: 0; font-size: 0.79rem; font-weight: 500; line-height: 1.55; color: var(--u2-txt-2); }
.u2-app-tpls { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 12px; }
.u2-app-tpl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  border-radius: var(--u2-r-sm);
  border: 1px solid var(--u2-line-soft);
  background: var(--u2-paper-2);
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--u2-txt-2);
}
.u2-app-tpl i { font-style: normal; font-size: 0.68rem; font-weight: 500; color: var(--u2-txt-3); }
.u2-app-tpl.is-on {
  border-color: #0052CC;
  background: rgba(0, 82, 204, 0.07);
  color: #0052CC;
  box-shadow: 0 0 0 1px rgba(0, 82, 204, 0.16);
}
.u2-app-form { display: flex; flex-direction: column; gap: 9px; padding: 12px; }
.u2-app-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-app-form input {
  padding: 8px 11px;
  border-radius: var(--u2-r-sm);
  border: 1px solid var(--u2-line-soft);
  background: var(--u2-paper-2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--u2-ink);
}
.u2-app-form .u2-app-btn { align-self: flex-start; padding: 7px 15px; }

/* ---- kanban board ---- */
.u2-kb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.u2-kb-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.u2-kb-col.is-active {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc, #0052CC) 35%, transparent);
}
.u2-kb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.u2-kb-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.u2-kb-drop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 132px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.u2-kb-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 3px;
  border: none;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
}
.u2-kb-card.is-ghost { opacity: 1; }
.u2-kb-card.is-live {
  outline: 2px solid #4c9aff;
  outline-offset: 0;
  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  animation: u2KbIn 0.28s ease both;
}
@keyframes u2KbIn {
  from { opacity: 0.35; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.u2-kb-card-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--read-muted);
}
.u2-kb-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.u2-kb-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.u2-kb-card-meta i { font-style: normal; }
.u2-kb-prio {
  padding: 0;
  border-radius: 0;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 650;
  color: #ff8b00;
  background: none;
}
.u2-kb-assignee {
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
  background: #6554c0;
}
.u2-kb-mover { display: none !important; }
.u2-kb-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---- issue detail card ---- */
.u2-issue { align-items: stretch; }
.u2-issue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  grid-template-areas:
    "top top"
    "title title"
    "desc desc"
    "activity side"
    "comment side";
  gap: 9px;
  width: 100%;
  padding: 13px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow);
}
.u2-issue-top { grid-area: top; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.u2-issue-type { display: inline-flex; color: #0052CC; flex: none; line-height: 0; }
.u2-issue-spacer { flex: 1; min-width: 8px; }
.u2-issue-lozenge {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--slate) 22%, var(--surface));
}
.u2-issue-ghost-btn {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
}
.u2-issue-key {
  padding: 2px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0052CC;
  background: rgba(0, 82, 204, 0.1);
}
.u2-issue-crumb { font-size: 0.7rem; font-weight: 550; color: var(--u2-txt-2); }
.u2-issue-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  border-radius: var(--u2-r-md);
  border: 1px solid transparent;
  background: var(--u2-paper-2);
}
.u2-issue-zone:hover { border-color: rgba(0, 82, 204, 0.3); }
.u2-issue-title { grid-area: title; }
.u2-issue-h { font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: var(--u2-ink); }
.u2-issue-desc { grid-area: desc; }
.u2-issue-desc .u2-issue-lbl { margin-bottom: 2px; }
.u2-issue-desc .u2-issue-p {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--u2-ink);
}
.u2-issue-side { grid-area: side; display: flex; flex-direction: column; gap: 7px; align-content: start; align-self: start; }
.u2-issue-field { flex: none; }
.u2-issue-comment { grid-area: comment; }
.u2-issue-activity {
  grid-area: activity;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.u2-issue-tab {
  padding: 5px 10px;
  border-radius: 6px 6px 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--u2-txt-3);
  border-bottom: 2px solid transparent;
}
.u2-issue-tab.is-on {
  color: #0052CC;
  border-bottom-color: #0052CC;
}
.u2-issue-lbl {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-issue-p { font-size: 0.78rem; font-weight: 500; line-height: 1.6; color: var(--u2-txt-2); }
.u2-issue-val { display: inline-flex; align-items: center; gap: 6px; font-size: 0.79rem; font-weight: 650; color: var(--u2-ink); }
.u2-issue-av {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--u2-slate);
}
.u2-issue-prio { color: var(--u2-clay); }
.u2-issue-tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--u2-slate);
  background: color-mix(in srgb, var(--u2-slate) 11%, var(--surface));
}

/* ---- issue form ---- */
.u2-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
}
.u2-form-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.u2-form-title { font-size: 0.94rem; font-weight: 700; color: var(--u2-ink); }
.u2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.u2-form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.u2-form-row.is-filled {
  border-color: color-mix(in srgb, var(--u2-green) 32%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--u2-green) 14%, transparent);
}
.u2-form-lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-form-lbl span { display: inline-flex; color: var(--u2-brand); }
.u2-form-sel {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--u2-r-sm);
  border: 1px solid var(--u2-line-soft);
  background: var(--u2-paper-2);
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--u2-ink);
  cursor: pointer;
}
.u2-form-sel:focus { outline: none; border-color: var(--u2-brand); box-shadow: 0 0 0 3px rgba(15, 107, 107, 0.12); }
.u2-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.u2-form-count { font-size: 0.76rem; font-weight: 650; color: var(--u2-txt-3); }
.u2-form-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--u2-r-md);
  border: 1px solid color-mix(in srgb, var(--u2-green) 26%, transparent);
  background: color-mix(in srgb, var(--u2-green) 5%, var(--surface));
  animation: u2Rise 0.32s ease both;
}
.u2-form-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.83rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--u2-green) 42%, var(--u2-ink));
}
.u2-form-ok span { display: inline-flex; color: var(--u2-green); }

/* ---- search / tracking ---- */
.u2-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 13px;
  border-radius: var(--u2-r-lg);
  border: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
  box-shadow: var(--u2-shadow-s);
}
.u2-track-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.u2-track-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--u2-txt-2);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.u2-track-tab span { display: inline-flex; }
.u2-track-tab:hover { transform: translateY(-1px); color: var(--u2-ink); }
.u2-track-tab.is-on {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--u2-brand) 90%, var(--surface)), var(--u2-brand));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--u2-brand) 26%, transparent);
}
.u2-track-body { display: flex; flex-direction: column; gap: 10px; animation: u2Rise 0.26s ease both; }
.u2-track-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--u2-line);
  background: var(--surface);
}
.u2-track-search > span { display: inline-flex; color: var(--u2-brand); flex: none; }
.u2-track-search input,
.u2-track-search select {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 0.83rem;
  font-weight: 550;
  font: inherit;
}
.u2-track-search input { cursor: text; }
.u2-track-search select { cursor: pointer; }
.u2-track-search input::placeholder { color: var(--u2-txt-3); font-weight: 500; }
.u2-track-search input:focus,
.u2-track-search select:focus { outline: none; }
.u2-track-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.u2-track-chip {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--u2-txt-2);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.u2-track-chip:hover { transform: translateY(-1px); color: var(--u2-ink); }
.u2-track-chip.is-on {
  background: color-mix(in srgb, var(--u2-brand) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--u2-brand) 34%, transparent);
  color: var(--u2-brand-deep);
  font-weight: 700;
}
.u2-track-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  border-radius: var(--u2-r-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
}
.u2-track-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
  background: color-mix(in srgb, var(--u2-brand) 6%, var(--surface));
  border-bottom: 1px solid var(--u2-line);
  white-space: nowrap;
}
.u2-track-table td {
  padding: 8px 10px;
  font-weight: 500;
  color: var(--u2-txt-2);
  border-bottom: 1px solid var(--line);
}
.u2-track-table tbody tr:last-child td { border-bottom: none; }
.u2-track-table tbody tr:hover td { background: color-mix(in srgb, var(--u2-brand) 4%, var(--surface)); }
.u2-track-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700 !important;
  color: #0052CC !important;
}
.u2-track-empty { text-align: center; color: var(--u2-txt-3) !important; font-weight: 550; padding: 16px 10px !important; }
.u2-prio,
.u2-st {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.u2-prio--high { color: var(--u2-clay); background: color-mix(in srgb, var(--u2-clay) 11%, var(--surface)); }
.u2-prio--medium { color: #8A5F14; background: color-mix(in srgb, var(--u2-gold) 13%, var(--surface)); }
.u2-prio--low { color: var(--u2-slate); background: color-mix(in srgb, var(--u2-slate) 12%, var(--surface)); }
.u2-st--todo { color: var(--u2-slate); background: color-mix(in srgb, var(--u2-slate) 12%, var(--surface)); }
.u2-st--inprogress { color: #8A5F14; background: color-mix(in srgb, var(--u2-gold) 13%, var(--surface)); }
.u2-st--done { color: var(--u2-green); background: color-mix(in srgb, var(--u2-green) 12%, var(--surface)); }

/* ---- dashboard + report ---- */
.u2-dash {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
}
.u2-dash-item { display: grid; grid-template-columns: 108px minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.u2-dash-label { font-size: 0.77rem; font-weight: 650; color: var(--u2-txt-2); }
.u2-dash-bar { display: block; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--u2-brand) 8%, var(--surface)); overflow: hidden; }
.u2-dash-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--u2-brand);
  animation: u2Bar 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.u2-dash-num { font-size: 0.82rem; font-weight: 700; color: var(--u2-ink); text-align: right; }
.u2-report {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  border-radius: var(--u2-r-md);
  border: 1px solid var(--u2-line-soft);
  background: var(--surface);
  box-shadow: var(--u2-shadow-s);
}
.u2-report-h {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}

/* ---- keyframes ---- */
@keyframes u2Shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes u2Pop {
  from { opacity: 0; transform: scale(0.78); }
  60% { transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes u2Rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@keyframes u2ToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes u2ToastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}
@keyframes u2Pulse {
  0%, 100% { box-shadow: 0 6px 16px color-mix(in srgb, var(--u2-brand) 26%, transparent); }
  50% { box-shadow: 0 6px 16px color-mix(in srgb, var(--u2-brand) 26%, transparent), 0 0 0 6px color-mix(in srgb, var(--u2-brand) 12%, transparent); }
}
@keyframes u2Flash {
  0% { transform: translateX(-3px); }
  40% { transform: translateX(2px); }
  100% { transform: none; }
}
@keyframes u2AiBar {
  from { transform: scaleY(0.28); opacity: 0.55; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes u2Bar { from { width: 0 !important; } }
@keyframes u2Morph {
  from { opacity: 0.4; transform: scale(0.965); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .u2-ds-zones--5 { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
  .u2-rg--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u2-pick--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u2-hs,
  .u2-hs--wide { grid-template-columns: minmax(0, 1fr) 232px; }
  .u2-rs { grid-template-columns: 248px minmax(0, 1fr); }
  .u2-issue-card { grid-template-columns: minmax(0, 1fr) 196px; }
}
@media (max-width: 720px) {
  .u2v-shell { gap: 12px; }
  .u2v-title { font-size: 1rem; }
  .u2v-lead { font-size: 0.86rem; }
  .u2v-btn { padding: 9px 12px; font-size: 0.82rem; }
  .u2-flow { padding: 8px; gap: 5px; }
  .u2-flow-step { padding: 7px 10px; font-size: 0.75rem; }
  .u2-flow-arrow { display: none; }
  .u2-panel { padding: 12px 13px; min-height: 260px; }
  .u2-panel-body { min-height: 180px; }
  .u2-hs,
  .u2-hs--wide { grid-template-columns: minmax(0, 1fr); }
  .u2-issuedetails .u2-hs-side { grid-template-columns: minmax(0, 1fr); }
  .u2-hs-stage { padding: 11px; }
  .u2-ds-zones,
  .u2-ds-zones--3,
  .u2-ds-zones--5 { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
  .u2-seq-slot { flex: 1 1 100%; }
  .u2-seq-arrow { display: none; }
  .u2-sc,
  .u2-sc--2col { grid-template-columns: minmax(0, 1fr); }
  .u2-vl-grid { grid-template-columns: minmax(0, 1fr); }
  .u2-pick,
  .u2-pick--3,
  .u2-pick--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .u2-rg,
  .u2-rg--3,
  .u2-rg--4 { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
  .u2-open-stage { grid-template-columns: minmax(0, 1fr); }
  .u2-open-arrow { transform: rotate(90deg); }
  .u2-gal-stage { height: 300px; min-height: 300px; padding: 12px; }
  .u2-gal-art,
  .u2-gal-card--live .u2-gal-art,
  .u2-gal-card--live .u2-gal-art--banner { height: 200px; max-height: 200px; }
  .u2-tpl-feed { min-height: 360px; }
  .u2-soc { min-height: 320px; }
  .u2-tpl-design { height: 180px; }
  .u2-tpl-stage { grid-template-columns: minmax(0, 1fr); }
  .u2-tpl-keeps { flex-direction: row; flex-wrap: wrap; }
  .u2-tpl-keeps li { flex: 1 1 140px; font-size: 0.72rem; }
  .u2-gp { grid-template-columns: minmax(0, 1fr); }
  .u2-gp-table,
  .u2-rs-compare { grid-template-columns: minmax(0, 1fr); }
  .u2-entry-pair { grid-template-columns: minmax(0, 1fr); }
  .u2-rs { grid-template-columns: minmax(0, 1fr); }
  .u2-rs-picker { flex-direction: row; flex-wrap: wrap; }
  .u2v-host .u2-rs-picker .u2-card,
  .u2-rs-picker .u2-card {
    width: auto;
    flex: 1 1 160px;
    min-height: 42px;
  }
  .u2-rs-paper { padding: 18px 20px; min-height: 280px; }
  .u2-rs-paper--letter { min-height: 300px; }
  .u2-rs-head { padding-right: 0; }
  .u2-cmap-wrap {
    aspect-ratio: auto;
    min-height: 0;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
  }
  .u2-cmap-core { position: static; transform: none; width: 100%; height: 78px; border-radius: var(--u2-r-lg); }
  .u2-cmap-node,
  .u2-cmap-node--1,
  .u2-cmap-node--2,
  .u2-cmap-node--3,
  .u2-cmap-node--4,
  .u2-cmap-node--5 { position: static; inset: auto; transform: none; }
  .u2-wf-node { flex: 1 1 100%; }
  .u2-wf-link { width: 3px; height: 14px; }
  .u2-kb {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .u2-kb-col {
    flex: 0 0 min(220px, 78vw);
    min-width: min(220px, 78vw);
  }
  .u2-kb-drop { min-height: 120px; }
  .u2-kb-mover { display: none !important; }
  .u2-issue-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "title" "desc" "side" "activity" "comment";
  }
  .u2-form-grid { grid-template-columns: minmax(0, 1fr); }
  .u2-track { padding: 11px; }
  .u2-track-table { font-size: 0.72rem; }
  .u2-track-table th,
  .u2-track-table td { padding: 6px 7px; }
  .u2-dash-item { grid-template-columns: 84px minmax(0, 1fr) 30px; gap: 7px; }
  .u2-mini-site-grid { grid-template-columns: repeat(2, 1fr); }
  .u2-li-top { padding-left: 92px; margin-top: 10px; }
}
@media (max-width: 480px) {
  .u2-ds-zones,
  .u2-ds-zones--3,
  .u2-ds-zones--5 { grid-template-columns: minmax(0, 1fr); }
  .u2-pick,
  .u2-pick--3,
  .u2-pick--4,
  .u2-rg,
  .u2-rg--3,
  .u2-rg--4 { grid-template-columns: minmax(0, 1fr); }
  .u2-gal-title { font-size: 0.94rem; }
  .u2-poster-sheet { max-width: none; }
  .u2-track-table th:nth-child(3),
  .u2-track-table td:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .u2v-host *,
  .u2v-host *::before,
  .u2v-host *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Keep teaching click-pulse visible */
  .u2v-host .u2-pulse,
  .u2v-host .u2-gs-menus i.u2-pulse,
  .u2v-host .u2-tool-btn.u2-pulse,
  .u2v-host .u2-gs-menudrop-item.u2-pulse {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
}
/* ========== Unit 2 product chrome realism ========== */
/* Visual product shells layered on existing u2v sims (Sheets / Jira / Canva / LinkedIn / Sites). */

.u2v-host {
  --u2-gs-green: #188038;
  --u2-gs-green-deep: #137333;
  --u2-gs-menu: var(--ink);
  --u2-gs-grid: color-mix(in srgb, var(--ink) 16%, var(--surface));
  --u2-gs-header: var(--surface-2);
  --u2-gs-accent: #1a73e8;
  --u2-gs-sel: var(--sheet-sel);
  --u2-jira-blue: #0052CC;
  --u2-jira-blue-deep: #0747A6;
  --u2-jira-nav: #172B4D;
  --u2-canva-purple: #8B3DFF;
  --u2-canva-pink: #7D2AE8;
  --u2-li-blue: #0A66C2;
  --u2-li-blue-deep: #004182;
  --u2-sites-blue: #1a73e8;
}

/* ---- Google Sheets chrome ---- */
.u2-gs-app {
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60,64,67,.15), 0 2px 6px rgba(60,64,67,.1);
}
.u2-gs-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.u2-gs-doc-ico {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(145deg, var(--u2-gs-green) 0%, var(--u2-gs-green-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  flex-shrink: 0;
  position: relative;
}
.u2-gs-doc-ico::after {
  content: "";
  position: absolute;
  inset: 7px 8px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 1px;
}
.u2-gs-doc-meta { min-width: 0; flex: 1; }
.u2-gs-doc-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--u2-gs-menu);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-gs-doc-sub {
  font-size: 0.68rem;
  color: var(--read-muted);
  margin-top: 1px;
}
.u2-gs-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  padding: 2px 12px 6px;
  font-size: 0.72rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.u2-gs-menu span { cursor: default; }
.u2-gs-menu span:hover { color: var(--u2-gs-accent); }
.u2-gs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.u2-gs-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
}
.u2-gs-tool.is-on,
.u2-gs-tool:hover {
  background: var(--sheet-sel);
  color: var(--u2-gs-accent);
}
.u2-gs-tool-sep {
  width: 1px;
  height: 18px;
  background: var(--line-mid);
  margin: 0 4px;
}
.u2-gs-fxbar {
  display: grid;
  grid-template-columns: 52px 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.75rem;
}
.u2-gs-fx-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  padding: 3px 4px;
  background: var(--surface);
}
.u2-gs-fx-label {
  font-style: italic;
  font-weight: 700;
  color: var(--read-muted);
  text-align: center;
}
.u2-gs-fx-input {
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  padding: 4px 8px;
  min-height: 26px;
  color: #202124;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-gs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  min-height: 220px;
  background: var(--surface);
}
.u2-gs-body--solo { grid-template-columns: minmax(0, 1fr); }
.u2-gs-sheet-wrap {
  overflow: auto;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    repeating-linear-gradient(0deg, transparent, transparent 23px, var(--u2-gs-grid) 23px, var(--u2-gs-grid) 24px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, var(--u2-gs-grid) 79px, var(--u2-gs-grid) 80px);
}
.u2-gs-side {
  background: var(--surface-2);
  border-left: 1px solid var(--line);
  padding: 10px;
  overflow: auto;
}
.u2-gs-side-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--read-muted);
  margin-bottom: 8px;
}
.u2-gs-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 0 8px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  min-height: 32px;
}
.u2-gs-tab {
  padding: 6px 14px;
  font-size: 0.72rem;
  color: var(--ink);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: transparent;
}
.u2-gs-tab.is-on {
  background: var(--surface);
  border-color: var(--line-mid);
  color: var(--u2-gs-green);
  font-weight: 600;
  box-shadow: 0 -1px 0 var(--surface);
}
.u2-sheet-table--grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.74rem;
  background: var(--surface);
}
.u2-sheet-table--grid th,
.u2-sheet-table--grid td {
  border: 1px solid var(--u2-gs-grid);
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
}
.u2-sheet-table--grid thead th {
  background: var(--u2-gs-header);
  font-weight: 600;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}
.u2-sheet-table--grid .u2-col-letter {
  background: var(--surface-2);
  color: var(--read-muted);
  font-weight: 600;
  text-align: center;
  width: 28px;
  min-width: 28px;
}
.u2-sheet-table--grid .u2-row-num {
  background: var(--surface-2);
  color: var(--read-muted);
  font-weight: 600;
  text-align: center;
  width: 32px;
}
.u2-sheet-table--grid tr.is-hl td:not(.u2-row-num) {
  background: var(--sheet-sel);
}
.u2-sheet-table--grid td.is-key {
  background: color-mix(in srgb, var(--amber) 22%, var(--surface));
  outline: 2px solid #f9ab00;
  outline-offset: -2px;
}
.u2-vlook-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.u2-vlook-slot {
  min-width: 72px;
  min-height: 34px;
  border: 1.5px dashed var(--line-mid);
  border-radius: 6px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 0.72rem;
  color: var(--read-muted);
}
.u2-vlook-slot.is-filled {
  border-style: solid;
  border-color: var(--u2-gs-green);
  background: color-mix(in srgb, var(--output) 16%, var(--surface));
  color: var(--u2-gs-green-deep);
  font-weight: 600;
}
.u2-vlook-slot.is-target {
  border-color: var(--u2-gs-accent);
  box-shadow: 0 0 0 2px rgba(26,115,232,.2);
}
.u2-vlook-punc {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--read-muted);
}
.u2-pivot-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u2-pivot-zone {
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px;
  min-height: 64px;
}
.u2-pivot-zone-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--read-muted);
  margin-bottom: 6px;
}
.u2-pivot-zone.is-ok { border-color: var(--u2-gs-green); background: color-mix(in srgb, var(--output) 16%, var(--surface)); }
.u2-pivot-zone.is-bad { border-color: #d93025; background: color-mix(in srgb, var(--coral) 16%, var(--surface)); }

/* ---- Jira chrome ---- */
.u2-jira-app {
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
}
.u2-jira-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--u2-jira-nav);
  color: #fff;
}
.u2-jira-logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, #2684FF, #0052CC);
  flex-shrink: 0;
  position: relative;
}
.u2-jira-logo::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 5px;
  bottom: 5px;
  border: 2px solid #fff;
  border-radius: 2px;
  transform: skewX(-12deg);
}
.u2-jira-proj {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.u2-jira-proj span {
  opacity: 0.7;
  font-weight: 500;
  margin-left: 8px;
  font-size: 0.72rem;
}
.u2-jira-search {
  margin-left: auto;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.7rem;
  color: rgba(255,255,255,.75);
  min-width: 140px;
}
.u2-jira-body { padding: 12px; }
.u2-jira-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.u2-jira-board-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.u2-jira-board-meta {
  font-size: 0.7rem;
  color: var(--read-muted);
}
.u2-kb--jira {
  background: var(--surface-2);
  border: none;
  padding: 12px;
  gap: 12px;
  border-radius: 0 0 8px 8px;
}
.u2-kb-col--jira {
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 8px;
  min-height: 160px;
}
.u2-kb-col-head--jira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--read-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding: 2px 4px;
}
.u2-kb-count {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  padding: 0 5px;
}
.u2-issue-chip--jira,
.u2-ds-card--issue {
  background: var(--surface);
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
  padding: 8px 10px;
  cursor: grab;
}
.u2-issue-chip--jira:active,
.u2-ds-card--issue:active { cursor: grabbing; }
.u2-issue-key {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--read-muted);
  letter-spacing: 0.02em;
}
.u2-issue-sum {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 3px;
  line-height: 1.35;
}
.u2-issue-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.u2-issue-prio {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #DE350B;
}
.u2-issue-prio::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #DE350B;
}
.u2-issue-prio.is-med { color: #FF8B00; }
.u2-issue-prio.is-med::before { border-bottom-color: #FF8B00; }
.u2-issue-prio.is-low { color: #0065FF; }
.u2-issue-prio.is-low::before {
  border-bottom: none;
  border-top: 7px solid #0065FF;
}
.u2-issue-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6554C0, #8777D9);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.u2-jira-issue {
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  overflow: hidden;
}
.u2-jira-issue-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
}
.u2-jira-issue-key {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--read-muted);
}
.u2-jira-issue-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.u2-jira-issue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr);
  gap: 0;
}
.u2-jira-issue-main { padding: 14px; }
.u2-jira-issue-side {
  padding: 14px;
  background: var(--surface-2);
  border-left: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
}
.u2-jira-field {
  margin-bottom: 12px;
}
.u2-jira-field-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--read-muted);
  margin-bottom: 4px;
}
.u2-jira-field-val {
  font-size: 0.82rem;
  color: var(--ink);
}
.u2-jira-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--slate) 22%, var(--surface));
  color: var(--ink);
}
.u2-jira-status.is-progress { background: color-mix(in srgb, #0052CC 20%, var(--surface)); color: #0052CC; }
.u2-jira-status.is-done { background: color-mix(in srgb, var(--output) 20%, var(--surface)); color: #006644; }
.u2-jira-comment {
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  border-radius: 4px;
  padding: 8px 10px;
  min-height: 64px;
  background: var(--surface-2);
  font-size: 0.78rem;
  color: var(--read-muted);
}
.u2-zone--jira-well {
  background: var(--surface-2);
  border: 2px dashed #C1C7D0;
  border-radius: 8px;
  min-height: 88px;
  padding: 10px;
  transition: border-color .15s, background .15s;
}
.u2-zone--jira-well.is-over {
  border-color: var(--u2-jira-blue);
  background: color-mix(in srgb, #0052CC 20%, var(--surface));
}
.u2-zone--jira-well.is-ok {
  border-style: solid;
  border-color: #36B37E;
  background: color-mix(in srgb, var(--output) 20%, var(--surface));
}
.u2-zone-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--slate) 22%, var(--surface));
  color: var(--ink);
  margin-bottom: 6px;
}
.u2-zone-badge.is-todo { background: color-mix(in srgb, var(--slate) 22%, var(--surface)); }
.u2-zone-badge.is-progress { background: color-mix(in srgb, #0052CC 20%, var(--surface)); color: #0052CC; }
.u2-zone-badge.is-done { background: color-mix(in srgb, var(--output) 20%, var(--surface)); color: #006644; }

/* ---- Canva chrome ---- */
.u2-canva-app {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.u2-canva-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.u2-canva-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--u2-canva-purple), #00C4CC);
  flex-shrink: 0;
  position: relative;
}
.u2-canva-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
  opacity: .95;
}
.u2-canva-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}
.u2-canva-sub {
  font-size: 0.68rem;
  color: var(--read-muted);
}
.u2-canva-actions { margin-left: auto; display: flex; gap: 6px; }
.u2-canva-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--u2-canva-purple);
  color: #fff;
}
.u2-canva-btn--ghost {
  background: var(--surface-2);
  color: var(--ink);
}
.u2-canva-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  min-height: 260px;
}
.u2-canva-rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 10px 8px;
}
.u2-canva-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--read-muted);
}
.u2-canva-rail-item.is-on {
  background: color-mix(in srgb, var(--u2-canva-purple) 18%, var(--surface));
  color: var(--u2-canva-purple);
}
.u2-canva-rail-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
}
.u2-canva-rail-item.is-on .u2-canva-rail-ico {
  background: linear-gradient(135deg, var(--u2-canva-purple), #00C4CC);
}
.u2-canva-stage {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(139,61,255,.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0,196,204,.06), transparent 40%),
    var(--surface-2);
}
.u2-canva-canvas {
  background: var(--surface);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}
.u2-gal--canva .u2-gal-frame {
  border: none;
  box-shadow: none;
  background: transparent;
}
.u2-poster--canva .u2-poster-sheet {
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}

/* ---- LinkedIn chrome ---- */
.u2-li-card--pro {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
}
.u2-li-banner--pro {
  height: 72px;
  background: linear-gradient(90deg, #0A66C2 0%, #378fe9 55%, #70b5f9 100%);
}
.u2-li-avatar--pro {
  width: 72px;
  height: 72px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #0A66C2, #004182);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -36px 0 0 16px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.u2-li-body--pro { padding: 8px 16px 16px; }
.u2-li-name--pro {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(0,0,0,.9);
  line-height: 1.25;
}
.u2-li-headline--pro {
  font-size: 0.82rem;
  color: rgba(0,0,0,.6);
  margin-top: 2px;
}
.u2-li-meta--pro {
  font-size: 0.72rem;
  color: rgba(0,0,0,.5);
  margin-top: 4px;
}
.u2-li-actions--pro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.u2-li-btn {
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--u2-li-blue);
  color: var(--u2-li-blue);
  background: var(--surface);
}
.u2-li-btn--primary {
  background: var(--u2-li-blue);
  color: #fff;
}
.u2-li-sec {
  border-top: 1px solid #e0e0e0;
  padding: 12px 16px;
}
.u2-li-sec-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(0,0,0,.9);
  margin-bottom: 6px;
}
.u2-li-sec-line {
  font-size: 0.78rem;
  color: rgba(0,0,0,.6);
  line-height: 1.4;
}

/* ---- Google Sites / portfolio chrome ---- */
.u2-site-frame--pro {
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60,64,67,.15), 0 2px 6px rgba(60,64,67,.1);
}
.u2-site-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.u2-site-dots { display: flex; gap: 5px; }
.u2-site-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-mid);
  display: block;
}
.u2-site-dots i:nth-child(1) { background: #f4c1bd; }
.u2-site-dots i:nth-child(2) { background: #fde293; }
.u2-site-dots i:nth-child(3) { background: #b7e1cd; }
.u2-site-url {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 0.72rem;
  color: var(--read-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-site-nav--pro {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.u2-site-nav-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.u2-site-nav-btn.is-on {
  background: var(--sheet-sel);
  color: var(--u2-sites-blue);
}
.u2-site-page {
  padding: 16px;
  min-height: 160px;
}
.u2-site-hero {
  background: linear-gradient(135deg, var(--sheet-sel), var(--surface-2));
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 12px;
}
.u2-site-hero h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: #202124;
}
.u2-site-hero p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--read-muted);
}
.u2-resume--pro {
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(60,64,67,.12);
  overflow: hidden;
}
.u2-resume-head--pro {
  padding: 16px 18px;
  background: linear-gradient(90deg, #0F6B6B, #1a73e8);
  color: #fff;
}
.u2-resume-head--pro h3 {
  margin: 0;
  font-size: 1.1rem;
}
.u2-resume-head--pro p {
  margin: 4px 0 0;
  font-size: 0.78rem;
  opacity: .9;
}
.u2-resume-body--pro { padding: 14px 18px 18px; }
.u2-resume-sec--pro { margin-bottom: 12px; }
.u2-resume-sec--pro h4 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0F6B6B;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.u2-resume-sec--pro p,
.u2-resume-sec--pro li {
  font-size: 0.78rem;
  color: var(--ink);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .u2-gs-body { grid-template-columns: minmax(0, 1fr); }
  .u2-gs-side { border-left: none; border-top: 1px solid var(--line); }
  .u2-jira-issue-grid { grid-template-columns: minmax(0, 1fr); }
  .u2-jira-issue-side { border-left: none; border-top: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface)); }
  .u2-canva-body { grid-template-columns: minmax(0, 1fr); }
  .u2-canva-rail {
    display: flex;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .u2-gs-menu { display: none; }
  .u2-jira-search { display: none; }
}

/* ========== Unit 2 sims.js chrome bridge ========== */
/* Maps markup from modules/unit-2/sims.js onto realism tokens/shells. */

.u2-gs,
.u2-gs-app {
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}
.u2-gs-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #fff;
  background: #188038;
  flex-shrink: 0;
}
.u2-gs-doc { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.u2-gs-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #202124;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-gs-menus {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  padding: 2px 12px 6px;
  font-size: 0.7rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.u2-gs-menus i { font-style: normal; }
.u2-gs-share {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 16px;
  background: #c2e7b0;
  color: #137333;
  font-size: 0.72rem;
  font-weight: 700;
}
.u2-gs-fx,
.u2-gs-fx-bar,
.u2-formula.u2-gs-fx-bar {
  display: grid;
  grid-template-columns: 52px 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.75rem;
  border-radius: 0;
  box-shadow: none;
}
.u2-gs--vlookup .u2-formula.u2-gs-fx-bar.is-linked {
  border: 2px solid #1a73e8;
  background: var(--sheet-sel);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
  border-radius: 6px;
}
.u2-gs--vlookup .u2-gs-fx-name.is-linked {
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
  font-weight: 700;
}
.u2-gs-fx-mark {
  font-style: italic;
  font-weight: 700;
  color: var(--read-muted);
  text-align: center;
}
.u2-gs-fx-val {
  border: 1px solid var(--line-mid);
  border-radius: 3px;
  padding: 4px 8px;
  min-height: 26px;
  color: #202124;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u2-gs-tab-add {
  padding: 4px 10px;
  color: var(--read-muted);
  font-weight: 700;
}
.u2-sheet--pro { border: none; border-radius: 0; box-shadow: none; }
.u2-sheet-scroll {
  overflow: auto;
  max-height: 260px;
  background: var(--surface);
}
.u2-sheet-letters th {
  background: var(--surface-2) !important;
  color: var(--read-muted) !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: 1px solid #e0e0e0 !important;
  padding: 3px 6px !important;
}
.u2-sheet-corner { width: 28px; }
.u2-sheet-rn {
  background: var(--surface-2) !important;
  color: var(--read-muted) !important;
  font-weight: 600 !important;
  text-align: center !important;
  width: 32px;
  border: 1px solid #e0e0e0 !important;
}
.u2-sheet-table--grid td.is-wash { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); }
.u2-sheet-table--grid td.is-focus {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
  background: var(--sheet-sel);
}
.u2-pivot-editor-h {
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--read-muted);
}
.u2-pivot-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 4px 12px 14px;
  padding: 0;
}
.u2-gs--editor .u2-ds,
.u2-gs--vlookup .u2-vl { padding: 10px 12px 12px; }

/* Jira shell from sims.js */
.u2-jira,
.u2-jira-app {
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.18);
}
.u2-jira-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: #fff;
  background: #0052cc;
  flex-shrink: 0;
}
.u2-jira-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
}
.u2-jira-crumb b,
.u2-jira-crumb strong { color: #fff; font-weight: 700; }
.u2-jira-crumb span { opacity: 0.65; }
.u2-jira-spacer { flex: 1; min-width: 8px; }
.u2-jira-chip {
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.u2-kb--jira { position: relative; }
.u2-kb--jira .u2-kb-col {
  background: var(--surface-2);
  border: none;
  border-radius: 8px;
  min-height: 0;
  padding: 8px;
}
.u2-kb--jira .u2-kb-head {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.u2-kb-card-top { display: flex; align-items: center; gap: 6px; }
.u2-kb-type { color: #0052cc; display: inline-flex; }
.u2-kb-prio--high { color: #de350b; }
.u2-kb-prio--med { color: #ff8b00; }
.u2-jira-modal {
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  overflow: hidden;
  margin: 12px;
}
.u2-jira-modal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
}
.u2-jira-modal-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
}
.u2-jira-meta-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.u2-form-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.u2-form.u2-form--jira {
  margin: 0;
  padding: 14px;
  border: none;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

/* Canva shell from sims.js */
.u2-canva,
.u2-canva-app,
.u2-canva-mini {
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.u2-canva-logo {
  display: inline-flex;
  color: #8b3dff;
}
.u2-canva-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 650;
  color: #1a1a1a;
}
.u2-canva-top--sm { padding: 6px 10px; font-size: 0.76rem; }
.u2-canva-search {
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--surface-2);
  color: #6b6b6b;
  font-size: 0.72rem;
  font-weight: 500;
  min-width: 120px;
}
.u2-canva-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6b6b;
}
.u2-canva-brand i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: #8b3dff;
}
.u2-canva-brand i:nth-child(2) { background: #00c4cc; }
.u2-canva-brand i:nth-child(3) { background: #ff6a3d; }
.u2-canva-body {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  min-height: 240px;
}
.u2-canva-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.72rem;
  color: #5a5a5a;
}
.u2-canva-rail span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 8px;
}
.u2-canva-rail span.is-on {
  background: color-mix(in srgb, var(--u2-canva-purple, #8B3DFF) 16%, var(--surface));
  color: #7d2ae8;
  font-weight: 650;
}
.u2-canva-stage { background: var(--surface-2); }

/* designGallery — keep 3-col Canva layout above generic shell */
.u2-canva--pro .u2-canva-body--gal {
  display: grid;
  grid-template-columns: 72px 188px minmax(0, 1fr);
  min-height: 380px;
}
.u2-canva--pro .u2-canva-rail--icons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.u2-canva--pro .u2-canva-rail--icons span {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 650;
}
.u2-canva--pro .u2-canva-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b3dff, #00c4cc);
  flex-shrink: 0;
  position: relative;
}
.u2-canva--pro .u2-canva-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--surface);
  opacity: 0.95;
}
.u2-canva--pro .u2-gal-stage {
  height: 380px;
  min-height: 380px;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--acc, #8b3dff) 12%, transparent), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(0, 196, 204, 0.08), transparent 40%),
    var(--surface-2);
}

/* Poster image plane (no blob/hill art) */
.u2-poster-img {
  display: block;
  width: 100%;
  min-height: 88px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #d9e6f2 0%, #c5d6e6 55%, #a8c0d4 100%);
  position: relative;
  overflow: hidden;
}
.u2-poster-img-sun,
.u2-poster-img-hill { display: none; }
.u2-poster-img::after {
  content: "";
  position: absolute;
  inset: 18% 22% auto;
  height: 42%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* LinkedIn extras */
.u2-li-meta { display: block; margin-top: 2px; font-size: 0.72rem; color: #666; }
.u2-li-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.u2-li-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid #0a66c2;
  color: #0a66c2;
  font-size: 0.72rem;
  font-weight: 650;
  background: var(--surface);
}
.u2-li-btn--primary { background: #0a66c2; color: #fff; }
.u2-li-btn--more { border-color: #ccc; color: #666; min-width: 28px; padding-inline: 8px; }
.u2-li-exp { display: flex; gap: 8px; align-items: flex-start; font-size: 0.76rem; color: #333; }
.u2-li-logo {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--secondary) 14%, var(--surface));
  border: 1px solid #d0e2f5;
  flex-shrink: 0;
}
.u2-li-logo--org { background: color-mix(in srgb, var(--secondary) 12%, var(--surface)); }
.u2-li-exp-row { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.u2-li-feat-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.u2-li-feat { display: flex; flex-direction: column; gap: 4px; }
.u2-li-feat-art,
.u2-li-feat-art--2 {
  display: block;
  height: 54px;
  border-radius: 6px;
  background: linear-gradient(135deg, #dce8f5, color-mix(in srgb, var(--secondary) 12%, var(--surface)));
  border: 1px solid #e3e8ee;
}
.u2-li-feat-art--2 { background: linear-gradient(135deg, #e8f0e9, #f4f7f2); }
.u2-li-feat-cap { font-style: normal; font-size: 0.72rem; font-weight: 650; color: var(--ink); }

/* Sites chrome extras */
.u2-site-mark { color: #1a73e8; display: inline-flex; }
.u2-site-name { font-size: 0.82rem; font-weight: 650; color: #202124; }
.u2-site-publish {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 4px;
  background: #1a73e8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 650;
}
.u2-site-layout { display: grid; grid-template-columns: 140px minmax(0, 1fr); min-height: 180px; }
.u2-site-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.74rem;
  color: var(--ink);
}
.u2-site-tree > span {
  display: block;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.u2-site-tree > span.is-on {
  background: color-mix(in srgb, var(--u2-brand, #0F6B6B) 16%, var(--surface));
  color: var(--u2-brand-deep, #0a4f4f);
  font-weight: 650;
}
.u2-site-main { padding: 12px; background: var(--surface); }
.u2-site-hero--rich {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 8px;
  background: var(--sheet-sel);
  margin-bottom: 10px;
}
.u2-site-hero--rich strong,
.u2-site-hero--rich b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
}
.u2-site-hero--rich span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--read-muted, var(--u2-txt-2));
}
.u2-site-prose { font-size: 0.8rem; color: var(--ink); line-height: 1.55; }
.u2-site-prose b,
.u2-site-proj b,
.u2-site-resume-embed b,
.u2-site-contact > b {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.u2-site-prose span,
.u2-site-proj span,
.u2-site-resume-embed span {
  display: block;
  line-height: 1.45;
}
.u2-site-proj,
.u2-site-resume-embed,
.u2-site-contact {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
}
.u2-site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--u2-line-soft);
  background: linear-gradient(180deg, var(--surface), var(--u2-paper-2));
}
.u2-site-nav button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--u2-txt-2);
}
.u2-site-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--coral) 16%, var(--surface));
  color: #c5221f;
  font-size: 0.72rem;
  font-weight: 650;
}

@media (max-width: 720px) {
  .u2-canva-body,
  .u2-site-layout { grid-template-columns: minmax(0, 1fr); }
  .u2-canva--pro .u2-canva-body--gal {
    grid-template-columns: minmax(0, 1fr);
  }
  .u2-canva--pro .u2-canva-rail--icons {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .u2-canva--pro .u2-gal-panel {
    border-right: none;
    border-bottom: 1px solid var(--line);
    max-height: 160px;
  }
  .u2-canva--pro .u2-gal-thumbs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .u2-canva--pro .u2-gal-thumb {
    min-width: 96px;
    flex: 0 0 auto;
  }
  .u2-canva--pro .u2-canva-actions { display: none; }
  .u2-canva--pro .u2-canva-search { display: none; }
  .u2-canva-rail,
  .u2-site-tree { border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; }
  .u2-gs-menus { display: none; }
  .u2-gs--nav .u2-gs-menus { display: flex !important; flex-wrap: wrap; gap: 2px 8px; font-size: 0.65rem; }
  .u2-gs--nav .u2-gs-menudrop { left: 12px; top: 52px; max-width: calc(100% - 24px); }
  .u2-kb--jira {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    grid-template-columns: none;
  }
}


/* realistic photo layers for design sims */
.u2-poster-img--photo {
  padding: 0;
  height: 120px;
  min-height: 120px;
  background: #d7e0ea;
}
.u2-poster-img--photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.u2-poster-img--photo::after { display: none; }
.u2-poster-sheet--live {
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.u2-gp-art--live {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: 240px;
  min-height: 240px;
}
.u2-gp-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u2-gp-photo--poor {
  filter: contrast(0.85) saturate(0.55) blur(0.6px);
  transform: scale(1.08);
}
.u2-gp-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,28,.08), rgba(10,16,28,.72));
}
.u2-gp-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
  padding: 18px 14px;
}
.u2-gp-art--good.u2-gp-art--live .u2-gp-t {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.u2-gp-art--poor.u2-gp-art--live {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  height: 240px;
  min-height: 240px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--amber) 16%, var(--surface)), color-mix(in srgb, var(--coral) 14%, var(--surface)));
}
.u2-gp-art--poor.u2-gp-art--live .u2-gp-photo {
  position: relative;
  inset: auto;
  height: 70px;
  border-radius: 4px;
}
.u2-gp-art--poor.u2-gp-art--live .u2-gp-noise {
  position: absolute;
  inset: 8px 8px auto;
  height: 70px;
  opacity: 0.35;
  pointer-events: none;
}
.u2-err-img--photo {
  display: block;
  width: 100%;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  background: #c9d0d6;
}
.u2-err-img--photo img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  filter: contrast(0.7) saturate(0.4) blur(0.8px);
  transform: scale(1.2);
  display: block;
}
.u2-li-cover--photo {
  padding: 0;
  height: 100px;
  overflow: hidden;
  background: #0a66c2;
}
.u2-li-cover--photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.u2-li-feat-art--photo,
.u2-li-feature-art--photo {
  padding: 0;
  height: 72px;
  overflow: hidden;
  display: block;
  background: color-mix(in srgb, var(--secondary) 12%, var(--surface));
}
.u2-li-feat-art--photo img,
.u2-li-feature-art--photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.u2-li-card--mini { max-width: 280px; }
.u2-li-card--mini .u2-li-cover { height: 48px; }
.u2-li-card--mini .u2-li-avatar {
  width: 48px;
  height: 48px;
  top: 24px;
  left: 12px;
  margin: 0;
  font-size: 0.9rem;
}
.u2-li-card--mini .u2-li-top {
  padding-left: 68px;
  margin-top: 8px;
  min-height: 28px;
}
.u2-rs-paper.u2-rs-paper--mini { min-height: 80px; padding: 12px; }
.u2-pfflow .u2-mini-site {
  display: flex;
  flex-direction: column;
}
.u2-pfflow .u2-mini-site-grid {
  flex: 1;
  align-content: stretch;
}
.u2-pfflow .u2-mini-site-grid i,
.u2-pfflow .u2-mini-site-card img {
  min-height: 72px;
  height: auto;
  aspect-ratio: auto;
}
.u2-pfflow .u2-rs-paper.u2-rs-paper--mini {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.u2-pfflow .u2-li-card--mini { max-width: none; }
.u2-pfflow .u2-li-card--mini .u2-li-cover { height: 96px; }
.u2-pfflow .u2-li-card--mini .u2-li-avatar {
  width: 56px;
  height: 56px;
  top: 68px;
  left: 14px;
}
.u2-pfflow .u2-li-card--mini .u2-li-top {
  padding-left: 80px;
  margin-top: 10px;
}
.u2-pfflow .u2-panel-body > .u2-urlbar {
  min-height: 48px;
  margin-top: auto;
  margin-bottom: auto;
}
.u2-pfflow .u2-mini-site .u2-urlbar {
  margin: 10px 12px;
}

/* ---------- Unit 2 script-faithful chrome extras ---------- */
.u2v-host .sim-edu-label,
.u2v-sim .sim-edu-label {
  margin: 4px 0 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}

/* Unit 2 controls — lock sizes to Module 4 scale */
.u2v-host .u2v-btn,
.u2v-host button.u2v-btn {
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.25;
}
.u2v-host .u2v-chip,
.u2v-host button.u2v-chip,
.u2v-host .u2-card,
.u2v-host button.u2-card,
.u2v-host .u2-flow-step,
.u2v-host button.u2-flow-step {
  font-size: 0.8rem;
  line-height: 1.25;
}
.u2v-host .u2-chip-placed,
.u2v-host button.u2-chip-placed {
  font-size: 0.74rem;
  line-height: 1.25;
}
.u2v-host .ts-app-name,
.u2v-host .u2-pick-label {
  font-size: 0.8rem;
  line-height: 1.35;
}
.u2v-host .u2-pick-desc {
  font-size: 0.73rem;
  line-height: 1.4;
}
.u2v-host .u2-site-nav button,
.u2v-host .u2-gal-dot,
.u2v-host .u2-gal-thumb-meta b {
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Unit 2 — softer type + breathing room (titles / chrome labels) */
.u2v-host {
  --u2-ink: var(--ink);
  --u2-txt-2: var(--read-muted);
  --u2-txt-3: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u2v-shell { gap: 16px; }
.u2v-head { gap: 6px; margin-bottom: 2px; }
.u2v-title {
  font-weight: 600;
  color: color-mix(in srgb, var(--u2-brand) 18%, var(--u2-ink));
}
.u2-panel { gap: 0; }
.u2-panel-head { margin-bottom: 12px; }
.u2-panel-kicker { font-weight: 600; }
.u2-panel-title {
  margin-top: 4px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.u2-panel-body { gap: 12px; }
.u2-hs-side-title,
.u2-hs-kicker,
.u2-open-side-title,
.u2-report-h,
.u2-li-h,
.u2-rs-h,
.u2-zone-head,
.u2-gal-kind,
.u2-gal-panel-head strong,
.u2-gal-thumb-meta b,
.u2-track-table th,
.u2-form-lbl,
.u2-jira-field-label,
.u2-pivot-zone-label,
.u2-kb-col-head--jira,
.u2-gs-side-title {
  font-weight: 600 !important;
}
.u2-gal-title,
.u2-poster-h1,
.u2-tpl-title,
.u2-gp-t,
.u2-rs-name,
.u2-li-name,
.u2-li-name--pro,
.u2-canva-title,
.u2-issue-h,
.u2-jira-issue-title,
.u2-form-title,
.u2-entry-title,
.u2-wf-label,
.u2-app-h,
.u2-site-name,
.u2-gs-title {
  font-weight: 600 !important;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.u2-gal-title,
.u2-tpl-title {
  color: rgba(255, 255, 255, 0.94);
}
.u2-soc-who b,
.u2-soc-likes,
.u2-soc-caption,
.u2-canva--pro .u2-canva-title,
.u2-canva--pro .u2-canva-btn--ghost,
.u2-gs-doc-name {
  color: color-mix(in srgb, var(--ink) 82%, transparent) !important;
  font-weight: 600 !important;
}
.u2-pivot-slot-val,
.u2-form-summary b,
.u2-dash-num,
.u2-kb-card-key,
.u2-track-key,
.u2-issue-key,
.u2-jira-issue-key {
  font-weight: 600 !important;
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
}
.u2-pivot-slot .u2-pivot-slot-val {
  color: #202124 !important;
}
.u2-gs--editor .u2-pivot-editor-h,
.u2-pivot-editor > .u2-pivot-editor-h {
  margin-top: 0;
  margin-bottom: 8px;
}
.u2-gs--editor > .u2-pivot-editor-h {
  margin: 10px 12px 8px;
}
.u2-gs-menus {
  margin-bottom: 2px;
}
.u2-hs-detail { padding: 12px 14px; }
.u2-final { margin-top: 4px; }
.u2v-status { margin-top: 2px; }

.u2-gemini {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 40, 50, 0.04);
}
.u2-gemini-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink);
}
.u2-gemini .u2-bubble,
.u2-gemini .u2-prompt-built {
  margin: 12px;
}
.u2-gemini--live .u2-gemini-stage,
.u2-gemini--studio .u2-gemini-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding: 4px 0 8px;
}
.u2-gemini-sheet-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #137333;
  background: color-mix(in srgb, var(--output) 16%, var(--surface));
}
.u2-gemini-build {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.u2-gemini-build-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--read-muted);
}
.u2-gemini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.u2-gemini-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc, #2563A8) 28%, var(--line-mid));
  background: var(--surface);
  color: color-mix(in srgb, var(--acc, #2563A8) 55%, #202124);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.u2-gemini-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--acc, #2563A8) 8%, var(--surface));
}
.u2-gemini-chip.is-on {
  border-color: color-mix(in srgb, var(--acc, #2563A8) 48%, transparent);
  background: color-mix(in srgb, var(--acc, #2563A8) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc, #2563A8) 18%, transparent);
}
.u2-gemini-chip:disabled { opacity: 0.55; cursor: default; }
.u2-gemini-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-mid);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.u2-gemini-composer:focus-within {
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px #1a73e8;
}
.u2-gemini-input {
  flex: 1 1 auto;
  width: 100%;
  min-height: 40px;
  max-height: 120px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #202124;
}
.u2-gemini-input.is-readonly {
  color: #80868b;
  min-height: 28px;
}
.u2-gemini-input.is-full { font-weight: 600; color: #174ea6; }
.u2-gemini-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  color: #80868b;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.u2-gemini-send.is-ready {
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
}
.u2-gemini-send.is-ready:hover { background: #1765cc; transform: translateY(-1px); }
.u2-gemini-send:disabled { opacity: 0.9; }
.u2-gemini-log { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 4px; }
.u2-gemini-msg .u2-bubble { margin: 0; }
.u2-bubble--ai {
  border-color: color-mix(in srgb, #1a73e8 22%, transparent);
  background: color-mix(in srgb, #1a73e8 10%, var(--surface));
}
.u2-bubble--ai .u2-bubble-tag { color: #1a73e8; background: color-mix(in srgb, #1a73e8 10%, var(--surface)); }
.u2-bubble-body > :first-child { margin-top: 0; }
.u2-bubble-body > :last-child { margin-bottom: 0; }
.u2-gemini-thinking {
  margin: 0;
  font-size: 0.82rem;
  color: var(--read-muted);
  font-style: italic;
}
.u2-tool-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.u2-tool-bar--gemini {
  margin: 0 12px 12px;
}
.u2-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.u2-tool-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #1a73e8;
  color: #174ea6;
}
.u2-tool-btn.is-primary {
  border-color: transparent;
  background: #1a73e8;
  color: #fff;
}
.u2-tool-btn.is-primary:hover:not(:disabled) {
  background: #1765cc;
  color: #fff;
}
.u2-tool-btn.is-menu {
  border-radius: 8px;
  background: var(--surface-2);
}
.u2-tool-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.u2-pivot-create {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.u2-pivot-create-h {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: #202124;
  letter-spacing: -0.01em;
}
.u2-pivot-create-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.u2-pivot-create-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 36px;
}
.u2-pivot-create-lbl {
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--read-muted);
  line-height: 1.3;
}
.u2-pivot-create-val {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.8rem;
  font-weight: 550;
  color: #202124;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u2-pivot-create-val--ok {
  border-color: color-mix(in srgb, #188038 28%, var(--line-mid));
  background: color-mix(in srgb, var(--output) 12%, var(--surface));
  color: #137333;
  font-weight: 600;
}
.u2-pivot-create-go {
  align-self: flex-start;
  min-width: 112px;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 8px;
}
.u2-pivot-create-row input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  background: var(--surface-2);
  font: inherit;
  font-size: 0.8rem;
  color: #202124;
}
.u2-pivot-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
}
.u2-pivot-radio.is-on {
  border-color: color-mix(in srgb, #188038 28%, var(--line-mid));
  background: color-mix(in srgb, var(--output) 12%, var(--surface));
  color: #137333;
}
.u2-gs-menus i.is-on {
  color: #188038;
  font-weight: 700;
}
/* Module 2 — same expanding ring pulse as Module 3 (u3Pulse) */
.u2-gs--nav {
  position: relative;
  overflow: visible !important;
}
.u2-gs--nav .u2-gs-menus {
  position: relative;
  z-index: 3;
  overflow: visible;
}
.u2-gs--nav .u2-gs-menus i[data-menu],
.u2-gs--nav .u2-gs-menus i.is-click {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  outline: none;
  position: relative;
  background: transparent;
}
.u2-gs--nav .u2-gs-menus i[data-menu]:hover,
.u2-gs--nav .u2-gs-menus i[data-menu]:focus-visible {
  color: var(--secondary, #2F6FAD);
  background: transparent;
}
.u2-gs--nav .u2-gs-menus i.is-click.is-on,
.u2-gs--nav .u2-gs-menus i.is-click.u2-pulse,
.u2-gs--nav .u2-gs-menus i.u2-pulse {
  background: transparent !important;
  color: var(--secondary, #2F6FAD) !important;
  font-weight: 650;
}
.u2-pulse,
.u2-gs-menus i.u2-pulse,
.u2-gs-menudrop-item.u2-pulse,
.u2-gs-menudrop-item.is-target.u2-pulse,
.u2-tool-btn.u2-pulse {
  position: relative;
  z-index: 2;
  border-radius: 4px;
  box-shadow: 0 0 0 0 rgba(var(--secondary-rgb, 47, 111, 173), 0.45);
  animation: u2NavPulse 1.2s ease-in-out infinite;
}
.u2-pulse::after,
.u2-gs-menus i.u2-pulse::after,
.u2-tool-btn.u2-pulse::after,
.u2-gs-menudrop-item.u2-pulse::after {
  content: none;
  display: none;
}
/* Create — keep primary fill; Module-3-style ring */
.u2-tool-btn.u2-pulse.is-primary {
  background: #1a73e8;
  color: #fff;
  font-weight: 650;
  border-color: transparent;
  box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45);
  animation: u2CreatePulse 1.2s ease-in-out infinite;
}
.u2-gs-menudrop-item.is-target,
.u2-gs-menudrop-item.is-target.u2-pulse {
  color: var(--secondary, #2F6FAD);
  font-weight: 650;
  background: transparent;
}
.u2-gs-menudrop-item.is-target .u2-gs-menudrop-ico,
.u2-gs-menudrop-item.is-target.u2-pulse .u2-gs-menudrop-ico {
  color: var(--secondary, #2F6FAD);
}
/* Spreading ring — same idea as Module 3 u3Pulse */
@keyframes u2NavPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--secondary-rgb, 47, 111, 173), 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(var(--secondary-rgb, 47, 111, 173), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--secondary-rgb, 47, 111, 173), 0); }
}
@keyframes u2CreatePulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}
.u2-gs-menudrop {
  position: absolute;
  z-index: 40;
  top: 56px;
  left: 108px;
  min-width: 188px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(60, 64, 67, 0.16);
}
.u2-gs-menudrop[hidden] { display: none !important; }
.u2-gs-menudrop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 500;
  color: #202124;
  cursor: pointer;
  position: relative;
}
.u2-gs-menudrop-item:hover:not(:disabled) {
  background: var(--surface-2);
}
.u2-gs-menudrop-item.is-muted,
.u2-gs-menudrop-item:disabled {
  color: #80868b;
  cursor: default;
  opacity: 0.72;
}
.u2-gs-menudrop-sep {
  height: 1px;
  margin: 3px 0;
  background: var(--line);
}
.u2-gs-menudrop-ico {
  display: inline-flex;
  width: 16px;
  color: var(--read-muted);
  flex-shrink: 0;
}
.u2-gs-menudrop-item.is-muted .u2-gs-menudrop-ico {
  color: #9aa0a6;
}
.u2-nav-coach {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--read-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}
.u2-nav-coach strong { color: var(--secondary, #2F6FAD); font-weight: 650; }
.u2-pivotflow .u2-panel,
.u2-pivotflow .u2-panel-body,
.u2-pivotflow .u2v-shell {
  overflow: visible;
}
.u2-gs-share--btn {
  border: 0;
  cursor: default;
}
button.u2-app-tpl {
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.u2-app-tpl:hover {
  border-color: #0052CC;
  box-shadow: 0 0 0 1px color-mix(in srgb, #0052CC 25%, transparent);
}
.u2-app--jira .u2-app-bar {
  gap: 8px;
}
.u2-pivot-slot.is-hl {
  border-color: color-mix(in srgb, var(--acc, #188038) 36%, var(--line-mid));
  background: color-mix(in srgb, var(--acc, #188038) 5%, var(--surface));
  outline: none;
}
@media (max-width: 720px) {
  .u2-pivot-config {
    grid-template-columns: 1fr;
  }
  .u2-pivot-create-row {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
    min-height: 0;
  }
}

/* ---- Pivot: clean step layout + light Field List cue ---- */
.u2-pivot-step {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(200px, 0.9fr);
  gap: 12px;
  align-items: start;
  margin: 8px 12px 10px;
}
.u2-pivot-step .u2-pivot-create {
  margin: 0;
}
.u2-pivot-insight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
}
.u2-pmap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 12px 12px;
}
.u2-pivot-insight .u2-pmap { margin: 0; }
.u2-pmap-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc, #188038) 28%, var(--line-mid));
  background: color-mix(in srgb, var(--acc, #188038) 8%, var(--surface));
  font-size: 0.7rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--acc, #188038) 50%, #202124);
  line-height: 1.3;
}
.u2-pfl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.u2-pfl.is-hl {
  border-color: color-mix(in srgb, #188038 30%, var(--line-mid));
  background: color-mix(in srgb, var(--output) 12%, var(--surface));
}
.u2-pfl--compact { min-height: 0; }
.u2-pfl-h {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--read-muted);
}
.u2-pfl-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.u2-pfl-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--acc, var(--read-muted)) 28%, var(--line-mid));
  background: var(--surface);
}
.u2-pfl-area.is-filled {
  background: color-mix(in srgb, var(--acc, #188038) 6%, var(--surface));
}
.u2-pfl-area-name {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acc, var(--read-muted));
}
.u2-pfl-area-val {
  font-size: 0.78rem;
  font-weight: 650;
  color: #202124;
  line-height: 1.3;
  word-break: break-word;
}
.u2-pfl-area-val--empty { color: #9aa0a6; font-weight: 550; }

/* ---- VLOOKUP: light scenario + compact XLOOKUP ---- */
.u2-vl-scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #0F6B6B 18%, var(--line-mid));
  background: color-mix(in srgb, var(--output) 12%, var(--surface));
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--ink);
}
.u2-vl-scenario-bar strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: #0F6B6B;
}
.u2-vl-scenario-res {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: #0F6B6B;
}
.u2-vl-formula-lbl {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #202124;
}
.u2-vl-xstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #1a73e8 22%, var(--line-mid));
  background: color-mix(in srgb, var(--secondary) 12%, var(--surface));
  font-size: 0.74rem;
  font-weight: 550;
  color: var(--read-muted);
  animation: u2Rise 0.32s ease both;
}
.u2-vl-xstrip-lbl {
  font-weight: 700;
  color: #1a73e8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.68rem;
}
.u2-vl-xstrip code {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--sheet-sel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 650;
  color: #174ea6;
  word-break: break-word;
}

@media (max-width: 720px) {
  .u2-pivot-step,
  .u2-pfl-areas {
    grid-template-columns: 1fr;
  }
  .u2-vl-scenario-res { margin-left: 0; }
}

.u2-kb-mover {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .u2-kb-card.is-live { animation: none; }
  .u2-prompt-meter-fill { transition: none; }
  .u2-gemini-chip,
  .u2-tool-btn,
  .u2-gemini-send { transition: none; }
  .u2-pulse,
  .u2-gs-menus i.u2-pulse,
  .u2-tool-btn.u2-pulse,
  .u2-gs-menudrop-item.u2-pulse,
  .u2-gs-menudrop-item.is-target.u2-pulse {
    animation-duration: 1.2s !important;
    animation-iteration-count: infinite !important;
  }
  .u2-pulse::after,
  .u2-gs-menus i.u2-pulse::after,
  .u2-tool-btn.u2-pulse::after,
  .u2-gs-menudrop-item.u2-pulse::after {
    content: none;
    display: none;
  }
}

/* ---- Success practices + Final summary (direct, no empty tabs) ---- */
.u2-practices-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.7fr);
  gap: 14px;
  align-items: stretch;
}
.u2-practices-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.u2-practice-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 7%, var(--surface)), var(--surface));
}
.u2-practice-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
}
.u2-practice-label {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--u2-ink, #1a1a1a);
}
.u2-balance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--u2-line-soft, var(--line));
  background: var(--surface-2);
}
.u2-balance-h {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--read-muted);
}
.u2-balance-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.u2-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  background: color-mix(in srgb, var(--acc) 10%, var(--surface));
  color: color-mix(in srgb, var(--acc) 55%, #202124);
  font-size: 0.8rem;
  font-weight: 700;
}
.u2-balance-eq {
  font-size: 1rem;
  font-weight: 700;
  color: #80868b;
}
.u2-balance-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--read-muted);
}
.u2-sumflow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--u2-line-soft, var(--line));
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.u2-sumflow-step {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 108px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--acc) 20%, transparent);
  background: color-mix(in srgb, var(--acc) 6%, var(--surface));
}
.u2-sumflow-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 750;
  color: color-mix(in srgb, var(--acc) 70%, #1a1a1a);
  background: color-mix(in srgb, var(--acc) 14%, var(--surface));
}
.u2-sumflow-ico { color: var(--acc); }
.u2-sumflow-label {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--u2-ink, #1a1a1a);
}
.u2-sumflow-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  color: #9aa0a6;
  flex: none;
}
@media (max-width: 820px) {
  .u2-practices-layout { grid-template-columns: 1fr; }
  .u2-sumflow-arrow { display: none; }
}

/* ========== Unit 3 — Google Sheets / Power BI faithful labs ========== */
.u3-task-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--sheet-sel);
  border: 1px solid color-mix(in srgb, #1a73e8 28%, var(--surface));
  color: #174ea6;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
}
.u3-task-hint iconify-icon { flex-shrink: 0; margin-top: 2px; }
.u3-gs-wrap { position: relative; }
.u3-gs .u2-gs-menus i {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.u3-gs .u2-gs-menus i:hover,
.u3-gs .u2-gs-menus i.is-active {
  background: var(--sheet-sel);
  color: #1a73e8;
}
.u3-gs-star { color: var(--read-muted); opacity: 0.7; display: inline-flex; }
.u3-gs-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.u3-gs-tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 4px;
  color: var(--ink);
  font-size: 0.72rem;
}
.u3-gs-tb--wide { min-width: 44px; font-weight: 600; }
.u3-gs-tb--paint {
  width: 18px;
  height: 14px;
  border-radius: 2px;
  background: #fbbc04;
  border: 1px solid var(--line-mid);
  min-width: 18px;
}
.u3-gs-sep {
  width: 1px;
  height: 16px;
  background: var(--line-mid);
  margin: 0 4px;
}
.u3-gs-workspace { background: var(--surface); }
.u3-gs-workspace--side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
}
.u3-gs-main { min-width: 0; position: relative; }
.u3-gs-aside {
  border-left: 1px solid var(--line);
  background: var(--surface);
  min-height: 280px;
}
.u3-th {
  position: relative;
  cursor: context-menu;
  user-select: none;
}
.u3-th.is-col-on,
.u2-sheet-table--grid td.is-col-on {
  background: var(--sheet-sel) !important;
}
.u3-th-label { display: inline-block; }
.u3-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--read-muted);
  vertical-align: middle;
  cursor: pointer;
}
.u3-filter-btn.is-on,
.u3-filter-btn:hover { background: var(--sheet-sel); color: #1a73e8; }
.u3-cf-brown {
  background: #d7a86e !important;
  color: #3c2f1e !important;
  font-weight: 650;
}
.u3-gs-ctx,
.u3-gs-menudrop {
  position: absolute;
  z-index: 40;
  min-width: 220px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.22);
}
.u3-gs-menudrop { left: 120px; top: 58px; }
.u3-gs-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.78rem;
  color: #202124;
  cursor: pointer;
}
.u3-gs-ctx-item:hover { background: var(--surface-2); }
.u3-gs-ctx-item.is-disabled { opacity: 0.4; cursor: default; }
.u3-gs-ctx-ico {
  width: 18px;
  display: inline-flex;
  color: var(--read-muted);
}
.u3-gs-ctx-kbd {
  margin-left: auto;
  color: #80868b;
  font-size: 0.68rem;
}
.u3-gs-ctx-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.u3-filter-dd {
  position: absolute;
  z-index: 35;
  top: 72px;
  left: 36px;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.2);
  padding: 8px;
}
.u3-filter-dd-search input {
  width: 100%;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.75rem;
  margin-bottom: 6px;
}
.u3-filter-dd-sep { height: 1px; background: var(--line); margin: 6px 0; }
.u3-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 0.78rem;
  color: #202124;
  cursor: pointer;
}
.u3-filter-dd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.u3-gs-btn {
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: #1a73e8;
}
.u3-gs-btn--ghost { color: var(--ink); }
.u3-gs-btn--primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
.u3-gs-btn--primary:hover { background: #1765cc; }
.u3-gs-toast {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 50;
  padding: 10px 16px;
  border-radius: 4px;
  background: #323232;
  color: #fff;
  font-size: 0.78rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u3-gs-modal {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(32, 33, 36, 0.32);
  padding: 16px;
}
.u3-gs-modal-card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(60, 64, 67, 0.28);
  overflow: hidden;
}
.u3-gs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.u3-gs-modal-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #202124;
}
.u3-gs-modal-x {
  border: none;
  background: transparent;
  color: var(--read-muted);
  cursor: pointer;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.u3-gs-modal-x:hover { background: var(--surface-2); }
.u3-gs-modal-body { padding: 4px 16px 12px; }
.u3-gs-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
}
.u3-dlg-lead {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.5;
}
.u3-dlg-note {
  margin: 10px 0 0;
  font-size: 0.72rem;
  color: var(--read-muted);
}
.u3-side-panel { padding: 12px; }
.u3-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.u3-side-head h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 650;
  color: #202124;
}
.u3-side-head button {
  border: none;
  background: transparent;
  color: var(--read-muted);
  cursor: pointer;
}
.u3-side-label {
  margin: 10px 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--read-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.u3-side-label-sm {
  display: block;
  margin: 6px 0 4px;
  font-size: 0.72rem;
  color: var(--read-muted);
}
.u3-side-field,
.u3-side-input,
.u3-side-select {
  width: 100%;
  border: 1px solid var(--line-mid);
  border-radius: 4px;
  padding: 7px 8px;
  font-size: 0.78rem;
  background: var(--surface);
  color: #202124;
}
.u3-side-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.u3-side-input--sm { width: 56px; flex: 0 0 auto; }
.u3-side-done { width: 100%; margin-top: 14px; }
.u3-cf-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--ink);
}
.u3-cf-swatch-chip {
  width: 28px;
  height: 18px;
  border-radius: 2px;
  background: #d7a86e;
  border: 1px solid #c89555;
}
.u3-cell-edit { padding: 0 !important; }
.u3-cell-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 6px 8px;
  font-size: 0.78rem;
  background: transparent;
  font-family: inherit;
}
.u3-cell-err {
  margin: 8px 12px 0;
  color: #d93025;
  font-size: 0.75rem;
}
.u3-cell-warn { box-shadow: inset 0 0 0 2px #f9ab00; }
.u3-cell-warn-msg {
  margin: 8px 12px 0;
  color: #e37400;
  font-size: 0.75rem;
}
.u3-gs-alert {
  margin: 12px;
  padding: 14px;
  border: 1px solid var(--line-mid);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(60, 64, 67, 0.18);
}
.u3-gs-alert strong { display: block; margin-bottom: 6px; color: #202124; }
.u3-gs-alert p { margin: 0 0 10px; font-size: 0.8rem; color: var(--ink); line-height: 1.45; }
.u3-radio {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.78rem;
}
.u3-radio strong { display: block; color: #202124; }
.u3-radio small { display: block; color: var(--read-muted); margin-top: 2px; line-height: 1.35; }
.u3-radio:has(input:checked) {
  border-color: #1a73e8;
  background: var(--sheet-sel);
}

.u3-flip-board,
.u3-app-board { padding: 2px; }
.u3-flip-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--read-muted);
}
.u3-flip-title {
  margin: 4px 0 2px;
  font-family: "Noto Serif Bengali", serif;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
}
.u3-flip-sub { margin: 0 0 12px; font-size: 0.78rem; color: var(--read-muted); }
.u3-flip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Unit 3 — softer success fills + Unit 4 typography tokens */
body[data-unit="unit-3"] {
  --u3-soft-green: color-mix(in srgb, var(--output) 14%, var(--surface));
  --u3-soft-green-border: color-mix(in srgb, var(--output) 38%, transparent);
  --u3-nav-active-bg: color-mix(in srgb, var(--output) 12%, transparent);
  --u3-nav-hover-bg: color-mix(in srgb, var(--output) 7%, transparent);

  /* Match Unit 4 / shared course type system */
  --font-ui: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'Noto Serif Bengali', 'Noto Serif', serif;
  --font-body: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif;
  font-family: var(--font-body);
  color: var(--ink);
}
body[data-unit="unit-3"] .nav-item:hover {
  background: var(--u3-nav-hover-bg);
}
body[data-unit="unit-3"] .nav-item.is-active {
  background: var(--u3-nav-active-bg);
}
body[data-unit="unit-3"] .nav-item.is-done:not(.is-active) .nav-type-ico {
  background: var(--u3-soft-green);
}
body[data-unit="unit-3"] .quiz-opt.is-correct {
  background: color-mix(in srgb, #2F8F5B 5%, var(--surface));
  border-color: color-mix(in srgb, #2F8F5B 28%, transparent);
}
body[data-unit="unit-3"] .sim-bin.is-ok {
  background: color-mix(in srgb, var(--moss, #3F6F4E) 4%, var(--surface));
}

/* Unit 3 instructional chrome → Unit 4 type scale / colors */
body[data-unit="unit-3"] .slide-head-title,
body[data-unit="unit-3"] .u3-flip-title,
body[data-unit="unit-3"] .u3-app-title-head,
body[data-unit="unit-3"] .dr-reorder h3,
body[data-unit="unit-3"] .read-panel > h3 {
  font-family: var(--font-display) !important;
  color: var(--deep) !important;
  font-weight: 650;
  letter-spacing: -0.015em;
}
body[data-unit="unit-3"] .u3-flip-title {
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem) !important;
  line-height: 1.35;
}
body[data-unit="unit-3"] .u3-flip-kicker,
body[data-unit="unit-3"] .u3-pbi-kicker,
body[data-unit="unit-3"] .u3-pbi-sec,
body[data-unit="unit-3"] .u3-side-label,
body[data-unit="unit-3"] .lesson-kicker {
  font-family: var(--font-ui) !important;
  color: var(--read-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 650;
  letter-spacing: 0.08em;
}
body[data-unit="unit-3"] .u3-flip-sub,
body[data-unit="unit-3"] .u3-flip-body,
body[data-unit="unit-3"] .u3-app-body,
body[data-unit="unit-3"] .u3-coach-text,
body[data-unit="unit-3"] .u3-task-hint,
body[data-unit="unit-3"] .u3-pbi-task,
body[data-unit="unit-3"] .u3-dlg-lead,
body[data-unit="unit-3"] .u3-gs-alert p,
body[data-unit="unit-3"] .dr-reorder .vb,
body[data-unit="unit-3"] .read-panel > .vb {
  font-family: var(--font-body) !important;
  color: var(--read-ink) !important;
  font-size: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem) !important;
  line-height: 1.75 !important;
}
body[data-unit="unit-3"] .u3-flip-name,
body[data-unit="unit-3"] .u3-app-title,
body[data-unit="unit-3"] .u3-side-head h4,
body[data-unit="unit-3"] .u3-gs-modal-head h3,
body[data-unit="unit-3"] .u3-pbi-title,
body[data-unit="unit-3"] .u3-pbi-chip {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  font-weight: 650;
}
body[data-unit="unit-3"] .u3-flip-name,
body[data-unit="unit-3"] .u3-app-title {
  font-size: 0.95rem !important;
}
body[data-unit="unit-3"] .u3-flip-body,
body[data-unit="unit-3"] .u3-app-body {
  font-size: 0.9rem !important;
  color: var(--read-muted) !important;
}
body[data-unit="unit-3"] .u3-flip-card.is-open .u3-flip-body,
body[data-unit="unit-3"] .u3-app-card.is-open .u3-app-body {
  color: var(--read-ink) !important;
}
body[data-unit="unit-3"] .u3-pbi-title {
  font-size: 1rem !important;
  font-family: var(--font-display) !important;
}
body[data-unit="unit-3"] .u3-pbi-task {
  font-size: 0.98rem !important;
}
body[data-unit="unit-3"] .u3-pbi-select,
body[data-unit="unit-3"] .u3-side-field,
body[data-unit="unit-3"] .u3-side-input,
body[data-unit="unit-3"] .u3-side-select,
body[data-unit="unit-3"] .u3-gs-btn,
body[data-unit="unit-3"] .dr-reorder-item,
body[data-unit="unit-3"] .u3-radio,
body[data-unit="unit-3"] .u3-pbi-chip,
body[data-unit="unit-3"] .u3-pbi-vis-item,
body[data-unit="unit-3"] .u3-pbi-msg,
body[data-unit="unit-3"] .u3-dlg-note,
body[data-unit="unit-3"] .u3-side-label-sm {
  font-family: var(--font-body) !important;
}
body[data-unit="unit-3"] .u3-pbi-select,
body[data-unit="unit-3"] .u3-side-field,
body[data-unit="unit-3"] .u3-side-input,
body[data-unit="unit-3"] .u3-side-select {
  font-size: 0.9rem !important;
  color: var(--ink) !important;
}
body[data-unit="unit-3"] .u3-pbi-chip {
  font-size: 0.9rem !important;
}
body[data-unit="unit-3"] .u3-pbi-vis-item {
  font-size: 0.72rem !important;
  color: var(--ink) !important;
}
body[data-unit="unit-3"] .u3-pbi-top {
  color: var(--ink);
}
body[data-unit="unit-3"] .u3-pbi-pill,
body[data-unit="unit-3"] .u3-dlg-note,
body[data-unit="unit-3"] .u3-side-label-sm,
body[data-unit="unit-3"] .u3-radio small {
  color: var(--read-muted) !important;
}
body[data-unit="unit-3"] .u3-gs-modal-head h3,
body[data-unit="unit-3"] .u3-side-head h4,
body[data-unit="unit-3"] .u3-gs-alert strong,
body[data-unit="unit-3"] .u3-radio strong {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}
body[data-unit="unit-3"] .u3-coach-text {
  font-size: 0.95rem !important;
}
body[data-unit="unit-3"] .ld-title {
  font-family: var(--font-body);
  color: var(--ink);
}
body[data-unit="unit-3"] .ld-blurb,
body[data-unit="unit-3"] .vb:not(.vi-body),
body[data-unit="unit-3"] .tip-callout .vb,
body[data-unit="unit-3"] .gist-callout .vb {
  font-family: var(--font-body);
  color: var(--read-ink);
}
body[data-unit="unit-3"] .vi-host .vi-title,
body[data-unit="unit-3"] .vi-host .vi-unit-name {
  font-family: var(--font-display) !important;
  color: var(--deep, var(--ink)) !important;
  font-size: clamp(1.28rem, 2.6vw, 1.75rem) !important;
  font-weight: 650 !important;
  line-height: 1.4 !important;
}
body[data-unit="unit-3"] .vi-host .vi-unit-num {
  color: var(--brand, #0F6B6B) !important;
  font-family: inherit !important;
}
body[data-unit="unit-3"] .vi-host .vi-body,
body[data-unit="unit-3"] .vi-host .vi-body.vb {
  font-family: var(--font-body) !important;
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.125rem) !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--read-ink) !important;
}
body[data-unit="unit-3"] .vi-host .vi-stat-value {
  font-family: var(--font-display) !important;
}
body[data-unit="unit-3"] .vi-host .vi-stat-label {
  font-family: var(--font-body) !important;
  color: var(--read-muted) !important;
  font-size: 0.8rem !important;
}
body[data-unit="unit-3"] .nav-item .nav-label,
body[data-unit="unit-3"] .sidebar-unit-label,
body[data-unit="unit-3"] .header-crumb {
  font-family: var(--font-body);
}
body[data-unit="unit-3"] .sidebar-brand-title,
body[data-unit="unit-3"] .header-title,
body[data-unit="unit-3"] .layout-banner-title {
  font-family: var(--font-display);
  color: var(--ink);
}
@media (max-width: 720px) {
  .u3-flip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .u3-flip-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared dragReorder — list reorder */
.dr-reorder-item {
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s, background 0.15s;
}
.dr-reorder-item:active {
  cursor: grabbing;
}
.dr-reorder-item.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.dr-reorder-item.is-dragover {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
  background: var(--sheet-sel);
}
.dr-reorder-grip {
  font-size: 0.7rem;
  letter-spacing: -0.08em;
  color: #9aa0a6;
  line-height: 1;
  padding: 0 2px;
}
.dr-reorder-item.is-correct {
  border-color: color-mix(in srgb, #2F8F5B 35%, var(--line-mid));
  background: color-mix(in srgb, #2F8F5B 6%, var(--surface));
}
.u3-pbi-row.is-correct {
  border-color: color-mix(in srgb, #2F8F5B 35%, var(--line));
  box-shadow: inset 3px 0 0 #2F8F5B;
}
.u3-pbi-row.is-wrong {
  border-color: color-mix(in srgb, #dc2626 28%, var(--line));
}
.u3-flip-card,
.u3-app-card {
  text-align: left;
  border: 1px solid var(--line-mid);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.u3-flip-card:hover,
.u3-app-card:hover {
  border-color: #1a73e8;
  box-shadow: 0 1px 4px rgba(26, 115, 232, 0.15);
}
.u3-flip-card.is-open,
.u3-app-card.is-open {
  border-color: var(--u3-soft-green-border, #b7dfc3);
  background: var(--u3-soft-green, #f5faf7);
}
.u3-flip-num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--sheet-sel);
  color: #1a73e8;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.u3-flip-name,
.u3-app-title {
  display: block;
  font-weight: 650;
  color: #202124;
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.u3-flip-body,
.u3-app-body {
  display: block;
  font-size: 0.76rem;
  color: var(--read-muted);
  line-height: 1.45;
}
.u3-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.u3-app-ico {
  display: inline-flex;
  color: #1a73e8;
  margin-bottom: 6px;
}

.u3-pbi {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.04);
}
.u3-pbi-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--surface-2) 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--line);
  color: #0f172a;
}
.u3-pbi-logo {
  color: #f2c811;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.u3-pbi-top-copy {
  flex: 1;
  min-width: 0;
}
.u3-pbi-kicker {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.u3-pbi-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.25;
}
.u3-pbi-pill {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid #e2e8f0;
  color: #475569;
}
.u3-pbi-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.u3-pbi-vis {
  background: var(--surface-2);
  border-right: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}
.u3-pbi-sec {
  margin: 0 0 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.u3-pbi-vis-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.u3-pbi-vis-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c, #118DFF) 18%, var(--line));
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--c, #118DFF) 8%, var(--surface));
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.u3-pbi-vis-item:hover {
  border-color: color-mix(in srgb, var(--c, #118DFF) 42%, var(--line));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c, #118DFF) 14%, transparent);
  transform: none;
}
.u3-pbi-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 7px;
  color: var(--c, #118DFF);
  background: color-mix(in srgb, var(--c, #118DFF) 14%, var(--surface));
}
.u3-pbi-ico iconify-icon {
  color: inherit;
}
.u3-pbi-canvas {
  padding: 10px 12px 12px;
  background: var(--surface);
  overflow: visible;
  max-height: none;
}
.u3-pbi-task {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}
.u3-pbi-matches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.u3-pbi-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}
.u3-pbi-row.is-filled {
  border-color: color-mix(in srgb, var(--c, #118DFF) 28%, var(--line));
  box-shadow: inset 3px 0 0 var(--c, #118DFF);
}
.u3-pbi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 148px;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 650;
  color: #0f172a;
  white-space: nowrap;
}
.u3-pbi-chip .u3-pbi-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.u3-pbi-arrow {
  color: #94a3b8;
  font-weight: 600;
  flex-shrink: 0;
}
.u3-pbi-select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 0.78rem;
  color: #0f172a;
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}
.u3-pbi-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c, #118DFF) 45%, #cbd5e1);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #118DFF) 14%, transparent);
}
.u3-pbi-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}
.u3-pbi-msg { margin: 0; font-size: 0.78rem; font-weight: 550; }
.u3-pbi-msg.is-ok { color: #15803d; }
.u3-pbi-msg.is-bad { color: #dc2626; }
.u3-pbi.is-ok {
  border-color: color-mix(in srgb, #22c55e 28%, var(--line));
}

@media (max-width: 720px) {
  .u3-gs-workspace--side { grid-template-columns: 1fr; }
  .u3-gs-aside { border-left: none; border-top: 1px solid var(--line); }
  .u3-pbi-vis-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .u3-pbi-row { flex-wrap: wrap; }
  .u3-pbi-chip { flex: 1 1 auto; }
  .u3-pbi-select { flex: 1 1 100%; }
  .u2-gs-menus { display: none; }
  .u2-gs--nav .u2-gs-menus,
  .u3-gs .u2-gs-menus { display: flex !important; }
}

/* Unit 3 — live sort / range selection polish */
.u3-th.is-sorted .u3-th-label { color: #188038; }
.u3-sort-mark {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #188038;
}
.u3-filter-btn { opacity: 0.55; }
.u3-th:hover .u3-filter-btn,
.u3-th.is-col-on .u3-filter-btn,
.u3-filter-btn.is-on { opacity: 1; }
.u2-sheet-table--grid td.u3-in-range {
  box-shadow: inset 0 0 0 1px #1a73e8;
  background: rgba(26, 115, 232, 0.04);
}
.u2-sheet-table--grid tr.u3-row-flash td {
  animation: u3RowFlash 0.9s ease;
}
@keyframes u3RowFlash {
  0% { background: color-mix(in srgb, var(--amber) 22%, var(--surface)); }
  40% { background: var(--sheet-sel); }
  100% { background: transparent; }
}
.u3-tbody--sorted tr {
  animation: u3RowIn 0.45s ease;
}
@keyframes u3RowIn {
  from { opacity: 0.35; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}


/* ========== Unit 3 — responsive / overflow fixes (override) ========== */
.u3-gs-wrap {
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 100%;
}
.u3-gs-wrap.is-pop-open {
  padding-bottom: 12px;
  min-height: 0;
}
.u3-gs.u2-gs,
.u2-gs.u3-gs {
  overflow: visible !important;
  max-width: 100%;
}
.u3-gs-workspace {
  overflow: visible;
}
.u3-gs-main {
  position: relative;
  overflow: visible;
  min-width: 0;
}
.u3-gs .u2-sheet-scroll {
  overflow: auto;
  max-height: min(42vh, 340px);
  -webkit-overflow-scrolling: touch;
}
.u3-gs-wrap--side .u2-sheet-scroll {
  max-height: min(36vh, 280px);
}
.u3-gs-aside {
  min-height: 0;
  max-height: min(52vh, 420px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.u3-gs-ctx,
.u3-gs-menudrop,
.u3-filter-dd {
  position: absolute;
  z-index: 80;
  max-height: min(320px, 55vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 24px rgba(60, 64, 67, 0.28);
}
.u3-gs-menudrop {
  /* JS places it; fallback */
  left: 96px;
  top: 56px;
}
.u3-filter-dd {
  width: min(240px, calc(100% - 16px));
  left: 36px;
  top: 108px;
  padding: 8px;
}
.u3-gs-status {
  position: relative;
  z-index: 5;
  margin-top: 0;
  padding: 7px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.74rem;
  line-height: 1.35;
}
.u3-gs-status span {
  display: inline-block;
}
.u3-gs-toast { display: none !important; } /* legacy floating toast off */
.u3-gs-tb.is-on {
  background: var(--sheet-sel);
  color: #1a73e8;
}
.u3-gs-modal {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: auto;
  background: rgba(32, 33, 36, 0.28);
}
.u3-gs-modal-card {
  width: min(420px, 100%);
  max-height: min(80vh, 520px);
  overflow: auto;
}
.u3-pbi {
  max-width: 100%;
  overflow: hidden;
}
.u3-pbi-body {
  min-height: 0;
}
.u3-pbi-canvas {
  overflow: visible;
  max-height: none;
}
.u3-flip-grid,
.u3-app-grid {
  max-width: 100%;
}

@media (max-width: 900px) {
  .u3-gs-workspace--side {
    grid-template-columns: 1fr !important;
  }
  .u3-gs-aside {
    border-left: none !important;
    border-top: 1px solid var(--line);
    max-height: none;
  }
  .u3-gs .u2-sheet-scroll,
  .u3-gs-wrap--side .u2-sheet-scroll {
    max-height: min(38vh, 300px);
  }
  .u3-pbi-body {
    display: flex !important;
    flex-direction: column !important;
  }
  .u3-pbi-vis {
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .u3-pbi-vis-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .u3-gs .u2-gs-menus {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 0.65rem;
  }
  .u3-gs-toolbar { display: none; }
  .u3-filter-dd,
  .u3-gs-ctx,
  .u3-gs-menudrop {
    max-height: min(50vh, 280px);
  }
  .u3-pbi-row {
    flex-wrap: wrap;
  }
  .u3-pbi-chip { flex: 1 1 auto; }
  .u3-pbi-select { min-width: 0; width: 100%; flex: 1 1 100%; }
  .u3-pbi-vis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* CF brown must win over range highlight */
.u2-sheet-table--grid td.u3-cf-brown,
.u2-sheet-table--grid td.u3-in-range.u3-cf-brown,
td.u3-cf-brown {
  background: #d7a86e !important;
  color: #3c2f1e !important;
  font-weight: 650 !important;
}
.u3-side-done {
  position: relative;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto !important;
}
.u3-gs-aside,
.u3-side-panel {
  pointer-events: auto;
}

/* Duplicate row highlight */
.u2-sheet-table--grid tr.u3-row-dup td {
  background: color-mix(in srgb, var(--coral) 16%, var(--surface)) !important;
}
.u3-gs-modal-card .u3-gs-btn {
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.u3-gs-wrap .u3-gs-modal {
  pointer-events: auto;
}

/* Unit 3 — in-sim coach + pulse targets + undo buttons */
.u3-coach {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--sheet-sel) 0%, color-mix(in srgb, #1a73e8 10%, var(--surface)) 100%);
  border: 1px solid color-mix(in srgb, #1a73e8 28%, var(--surface));
  color: #174ea6;
}
.u3-coach-badge {
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.u3-coach-text {
  margin: 0;
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.u3-coach-ico { flex-shrink: 0; margin-top: 1px; }
.u3-gs-tb.is-disabled,
.u3-gs-tb:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.u3-gs-tb[data-undo],
.u3-gs-tb[data-redo],
.u3-gs-tb[data-tb-filter] {
  cursor: pointer;
  border: none;
  background: transparent;
}
.u3-gs-tb[data-undo]:not(:disabled):hover,
.u3-gs-tb[data-redo]:not(:disabled):hover,
.u3-gs-tb[data-tb-filter]:hover {
  background: var(--sheet-sel);
  color: #1a73e8;
}
.u3-pulse,
.u2-gs-menus i.u3-pulse,
.u3-th.u3-pulse,
.u3-filter-btn.u3-pulse,
.u3-gs-btn.u3-pulse,
.u3-gs-tb.u3-pulse {
  animation: u3Pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.45);
  border-radius: 4px;
  position: relative;
  z-index: 2;
}
.u3-pulse-box {
  animation: u3PulseBox 1.2s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes u3Pulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(26, 115, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
}
@keyframes u3PulseBox {
  0% { outline: 2px solid rgba(26, 115, 232, 0.85); outline-offset: 2px; }
  50% { outline: 2px solid rgba(26, 115, 232, 0.25); outline-offset: 4px; }
  100% { outline: 2px solid rgba(26, 115, 232, 0.85); outline-offset: 2px; }
}
.u3-gs-ctx-item.u3-pulse,
.u3-gs-menudrop .u3-gs-ctx-item:first-of-type {
  background: var(--sheet-sel);
}

/* GPA Entry sheets — keep B2 cell normal width after Done */
.u3-sheet--gpa .u2-sheet-scroll {
  overflow: auto;
}
.u3-gpa-table {
  table-layout: fixed !important;
  width: 100% !important;
  max-width: 100%;
}
.u3-gpa-table .u3-col-rn,
.u3-gpa-table .u2-sheet-rn,
.u3-gpa-table .u2-sheet-corner {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}
.u3-gpa-table .u3-col-a { width: 140px; }
.u3-gpa-table .u3-col-b { width: 100px; }
.u3-gpa-table .u3-col-empty { width: auto; }
.u3-gpa-table th,
.u3-gpa-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.u3-gpa-table td.u3-cell-edit {
  padding: 0 !important;
  width: 100px !important;
  max-width: 100px !important;
  min-width: 88px;
  position: relative;
}
.u3-cell-input {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  height: 28px;
  padding: 4px 8px !important;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.78rem;
  font-family: inherit;
}
.u3-gpa-table td.is-focus {
  outline: 2px solid #1a73e8;
  outline-offset: -2px;
  z-index: 1;
}
.u3-pulse-cell {
  animation: u3PulseCell 1.15s ease-in-out infinite;
}
@keyframes u3PulseCell {
  0%, 100% { box-shadow: inset 0 0 0 2px #1a73e8; }
  50% { box-shadow: inset 0 0 0 2px rgba(26, 115, 232, 0.35); }
}
/* Don't let old pulse-box explode cell size */
.u3-gpa-table .u3-pulse-box {
  animation: u3PulseCell 1.15s ease-in-out infinite !important;
  outline: none !important;
}

/* ========== Unit 6 — SEO / SMM showcase ========== */
.u6-sim-host { width: 100%; }
.u6-kicker,
.u6-seo-kicker,
.u6-seo-drag-kicker,
.u6-ks-kicker,
.u6-qa-kicker,
.u6-smm-kicker,
.u6-tools-kicker,
.u6-assess-kicker,
.u6-ks-hash-kicker,
.u6-ks-sum-kicker,
.u6-ks-split-tag {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F6B6B;
}
.u6-sim {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.u6-sim-host > .u6-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
  padding: 0;
  text-align: left;
  align-items: flex-start;
}
.u6-lead {
  margin: 0 0 12px;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.88rem;
  font-weight: 450;
  color: var(--read-muted);
  line-height: 1.6;
}
.u6-sim-head { display: flex; flex-direction: column; gap: 6px; }
.u6-sim-title {
  margin: 0;
  font-family: "Noto Serif Bengali", serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.u6-sim-q { margin: 0; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 88%, transparent); }
.u6-hint { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.u6-opts { display: grid; gap: 8px; }
@media (min-width: 640px) {
  .u6-opts { grid-template-columns: 1fr 1fr; }
}
.u6-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  min-height: 44px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.u6-opt:hover { border-color: rgba(37, 99, 168, 0.35); }
.u6-opt.is-on {
  border-color: #2563A8;
  background: rgba(37, 99, 168, 0.06);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 168, 0.2);
}
.u6-opt.is-ok { border-color: #2F8F5B; background: rgba(47, 143, 91, 0.08); }
.u6-opt.is-bad { border-color: #C45C4A; background: rgba(196, 92, 74, 0.08); }
.u6-opt-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(21, 42, 50, 0.25);
  flex-shrink: 0;
  margin-top: 1px;
}
.u6-opt.is-on .u6-opt-check {
  border-color: #2563A8;
  background: #2563A8;
  box-shadow: inset 0 0 0 3px #fff;
}
.u6-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.u6-btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.u6-btn--primary { background: #0F6B6B; color: #fff; }
.u6-btn--primary:disabled { opacity: 0.45; cursor: default; }
.u6-fb {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
}
.u6-fb.is-ok { background: rgba(47, 143, 91, 0.1); color: #1F6B42; }
.u6-fb.is-bad { background: rgba(196, 92, 74, 0.1); color: #9E3F32; }
.u6-fb.is-reveal {
  background: rgba(15, 107, 107, 0.1);
  color: #0F4F4F;
}
.u6-fb-wrong {
  color: #C45C4A;
  font-weight: 700;
}

.u6-seo-drag { gap: 12px; }
.u6-seo-drag-board {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 168, 0.14);
  background: var(--surface-2);
  box-shadow: 0 8px 22px var(--line);
  overflow: visible;
}
@media (min-width: 820px) {
  .u6-seo-drag-board {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
  }
  .u6-seo-drag-board .u6-hub {
    justify-self: center;
    align-self: center;
    margin: 0 auto;
    width: min(100%, 460px);
    max-width: 480px;
    min-height: 0;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0;
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .u6-seo-drag-board .u6-seo-drag-pool-wrap {
    flex: 0 0 300px;
    width: 300px;
    min-width: 280px;
    max-width: 320px;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(37, 99, 168, 0.14);
    background: var(--surface);
  }
  .u6-hub-slot.is-over,
  .u6-hub-slot.is-reject {
    transform: translate(-50%, -50%) scale(1.04);
  }
}
.u6-sim-host > .u6-seo-drag-head {
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
}
.u6-seo-drag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.05);
}
.u6-seo-drag-head-copy { min-width: 0; flex: 1; }
.u6-seo-drag-title {
  margin: 0;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand, #0F6B6B);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u6-seo-drag-sub {
  margin: 0;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.82rem;
  font-weight: 450;
  line-height: 1.35;
  color: var(--read-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u6-seo-drag-meter {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.u6-seo-drag-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.u6-seo-drag-ring-bg,
.u6-seo-drag-ring-fg {
  fill: none;
  stroke-width: 4.5;
}
.u6-seo-drag-ring-bg { stroke: rgba(37, 99, 168, 0.12); }
.u6-seo-drag-ring-fg {
  stroke: url(#u6RingGrad);
  stroke: #2563A8;
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: calc(113.1 - (113.1 * var(--pct, 0) / 100));
  transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px rgba(37, 99, 168, 0.35));
}
.u6-seo-drag.is-done .u6-seo-drag-ring-fg { stroke: #2F8F5B; }
.u6-seo-drag-count {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--slate, #3D5A73);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.u6-seo-drag-count span {
  font-size: 10px;
  font-weight: 500;
  color: rgba(37, 99, 168, 0.5);
}
.u6-seo-drag.is-done .u6-seo-drag-count { color: #1F6B42; }
.u6-seo-drag.is-done .u6-seo-drag-count span { color: rgba(31, 107, 66, 0.55); }
.u6-seo-drag.is-done .u6-hub {
  border-color: transparent;
}
.u6-hub {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0 auto;
  width: min(100%, 480px);
  aspect-ratio: 1;
  border-radius: 22px;
  border: 0;
  background: transparent;
  overflow: visible;
}
.u6-hub-atmosphere {
  display: none;
}
.u6-hub-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.35;
  animation: u6BlobDrift 12s ease-in-out infinite;
}
.u6-hub-blob--a {
  width: 46%;
  height: 46%;
  left: 8%;
  top: 10%;
  background: rgba(56, 189, 248, 0.28);
}
.u6-hub-blob--b {
  width: 42%;
  height: 42%;
  right: 4%;
  bottom: 12%;
  background: rgba(15, 107, 107, 0.22);
  animation-delay: -4s;
}
.u6-hub-blob--c {
  width: 28%;
  height: 28%;
  left: 42%;
  top: 38%;
  background: rgba(37, 99, 168, 0.18);
  animation-delay: -7s;
}
.u6-hub-page {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  max-width: 200px;
  aspect-ratio: 0.9;
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 18px 40px var(--line-mid),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
}
.u6-hub-page-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 4px;
}
.u6-hub-page-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E56B5A;
  display: block;
}
.u6-hub-page-bar i:nth-child(2) { background: #E2B344; }
.u6-hub-page-bar i:nth-child(3) { background: #5EBE7A; }
.u6-hub-page-line {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(37, 99, 168, 0.1);
}
.u6-hub-page-line.is-mid { width: 72%; }
.u6-hub-page-line.is-short { width: 48%; }
.u6-hub-spokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.u6-hub-spokes line {
  stroke: var(--slate);
  stroke-width: 1.15;
  stroke-linecap: round;
}
.u6-hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(38%, 168px);
  aspect-ratio: 1;
  height: auto;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), transparent 42%),
    radial-gradient(circle at 72% 82%, rgba(15, 107, 107, 0.55), transparent 52%),
    linear-gradient(145deg, #4A90D9 0%, #1E4F9E 46%, #0F6B6B 100%);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(37, 99, 168, 0.32),
    0 0 0 6px #fff,
    0 0 0 8px rgba(37, 99, 168, 0.22),
    inset 0 2px 10px rgba(255, 255, 255, 0.38),
    inset 0 -12px 22px rgba(8, 30, 60, 0.28);
  z-index: 2;
  padding: 12px;
}
.u6-hub-core-shine {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 42%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(2px);
  pointer-events: none;
}
.u6-seo-drag.is-done .u6-hub-core {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.48), transparent 42%),
    linear-gradient(145deg, #3CB77A, #1F6B42);
  box-shadow:
    0 22px 44px rgba(47, 143, 91, 0.32),
    0 0 0 7px rgba(255, 255, 255, 0.55),
    0 0 0 8px rgba(47, 143, 91, 0.16),
    inset 0 2px 10px rgba(255, 255, 255, 0.35);
  animation: none;
}
.u6-seo-drag.is-drag-active .u6-hub-core,
.u6-seo-drag.has-selection .u6-hub-core {
  box-shadow:
    0 22px 44px rgba(37, 99, 168, 0.46),
    0 0 0 7px rgba(255, 255, 255, 0.6),
    0 0 0 12px rgba(37, 99, 168, 0.18),
    inset 0 2px 10px rgba(255, 255, 255, 0.38),
    inset 0 -12px 22px rgba(8, 30, 60, 0.28);
}
.u6-hub-eyebrow {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
  position: relative;
  z-index: 1;
}
.u6-hub-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px rgba(8, 30, 60, 0.22);
}
.u6-hub-check {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  position: relative;
  z-index: 1;
}
.u6-hub-slots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.u6-hub-page { display: none; }
.u6-hub-slot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 104px;
  height: 104px;
  min-height: 104px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed #6B8499;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  padding: 10px;
  z-index: 1;
  pointer-events: auto;
  box-shadow: 0 4px 14px var(--line-mid);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.u6-hub-slot-num {
  align-self: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: #2563A8;
}
.u6-hub-slot.is-over {
  border-style: solid;
  border-color: #7eb3d4;
  background: color-mix(in srgb, var(--secondary) 14%, var(--surface));
  box-shadow:
    0 0 0 5px rgba(126, 179, 212, 0.18),
    0 12px 28px rgba(126, 179, 212, 0.16);
  transform: translate(-50%, -50%) scale(1.06);
}
.u6-hub-slot.is-reject {
  border-style: solid;
  border-color: #e3b0a8;
  background: color-mix(in srgb, var(--coral) 14%, var(--surface));
  box-shadow: 0 0 0 5px rgba(227, 176, 168, 0.18);
  transform: translate(-50%, -50%) scale(1.04);
}
.u6-seo-drag.is-drag-active .u6-hub-slot:not(.is-filled),
.u6-seo-drag.has-selection .u6-hub-slot:not(.is-filled) {
  border-color: rgba(37, 99, 168, 0.62);
  animation: u6SlotPulse 1.35s ease-in-out infinite;
}
.u6-hub-slot.is-filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--chip, #eaf8f0) 72%, #6B8499);
  background: color-mix(in srgb, var(--chip, #eaf8f0) 88%, var(--surface));
  width: 108px;
  height: 108px;
  min-height: 108px;
  border-radius: 50%;
  padding: 10px 8px;
  box-shadow: 0 6px 16px rgba(21, 42, 50, 0.14);
}
.u6-hub-slot.is-filled .u6-chip.is-placed {
  animation: u6ChipPop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.u6-hub-slot.is-filled .u6-hub-slot-num {
  color: #1E4F9E;
  background: var(--surface);
}
.u6-hub-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #4A6274;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.u6-hub-ph-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563A8;
  box-shadow: none;
}
.u6-seo-drag-pool-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 18px;
  border-radius: 0 0 28px 28px;
  border: 0;
  background: rgba(255, 255, 255, 0.42);
}
.u6-seo-drag-pool-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.u6-seo-drag-pool-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.u6-seo-drag-legend {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-seo-drag-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.u6-leg {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid transparent;
}
.u6-leg--on {
  background: rgba(37, 99, 168, 0.12);
  border-color: rgba(37, 99, 168, 0.35);
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.08);
}
.u6-leg--off {
  background: rgba(196, 92, 74, 0.1);
  border-color: rgba(196, 92, 74, 0.35);
  box-shadow: 0 0 0 3px rgba(196, 92, 74, 0.08);
}
.u6-seo-drag-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  min-height: 88px;
}
/* Soft pastel list cards — no on/off color coding, no light-red tones */
.u6-seo-drag .u6-chip:not(.is-placed) {
  width: 100%;
  min-height: 48px;
  padding: 8px 8px 8px 8px;
  gap: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--chip, #eef5fa) 86%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--chip, #d7e6f0) 62%, var(--line-mid));
  color: #5A6B7C;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  box-shadow: 0 1px 2px var(--line);
}
.u6-seo-drag .u6-chip:not(.is-placed):hover {
  border-color: color-mix(in srgb, var(--chip, #9bb8d4) 55%, rgba(90, 122, 150, 0.28));
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(90, 122, 150, 0.12);
}
.u6-seo-drag .u6-chip:active {
  cursor: grabbing;
}
.u6-seo-drag .u6-chip.is-shake { animation: u6Shake 0.45s ease; }
.u6-seo-drag-legend,
.u6-chip-tag { display: none !important; }
.u6-seo-drag-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 480px) {
  .u6-hub {
    min-height: 340px;
    width: 100%;
    aspect-ratio: 1;
    overflow: visible;
    padding: 8px 4px;
  }
  .u6-hub-slot,
  .u6-hub-slot.is-filled {
    width: 78px;
    height: 78px;
    min-height: 78px;
    padding: 6px;
  }
  .u6-hub-core {
    width: min(36%, 128px);
  }
}
.u6-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.u6-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  border-radius: 12px;
  padding: 9px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: grab;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(21, 42, 50, 0.04);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.u6-chip-ico {
  flex-shrink: 0;
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 168, 0.08);
  color: #2563A8;
}
.u6-seo-drag .u6-chip-ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #5A7A96;
  box-shadow: none;
}
.u6-chip-t {
  min-width: 0;
  flex: 1;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
}
.u6-seo-drag .u6-chip:not(.is-placed) .u6-chip-t {
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.4;
  color: #5A6B7C;
}
.u6-chip-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #8A9AAB;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.u6-chip-grip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: #B4C2CE;
  opacity: 0.95;
}
.u6-seo-drag .u6-chip.is-placed .u6-chip-grip {
  display: none;
}
.u6-chip.is-selected,
.u6-chip.is-dragging {
  border-color: #2563A8;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.18), 0 12px 24px rgba(37, 99, 168, 0.14);
}
.u6-chip.is-selected { transform: translateY(-1px); }
.u6-chip.is-dragging { opacity: 0.55; cursor: grabbing; }
.u6-chip.is-placed {
  cursor: pointer;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 0;
  white-space: normal;
  text-align: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  min-height: 0;
  color: var(--ink);
  backdrop-filter: none;
}
.u6-chip.is-placed .u6-chip-t {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.u6-chip.is-placed .u6-chip-ico {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: #2563A8;
}
.u6-chip.is-placed:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.35);
}
.u6-chip.is-shake { animation: u6Shake 0.45s ease; }
@keyframes u6Shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes u6ChipPop {
  from { transform: scale(0.88); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes u6SlotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 168, 0), 0 10px 24px var(--line); }
  50% { box-shadow: 0 0 0 6px rgba(37, 99, 168, 0.14), 0 10px 24px rgba(37, 99, 168, 0.12); }
}
@keyframes u6HubBreathe {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.12); }
}
@keyframes u6BlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, -4%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .u6-seo-drag.is-drag-active .u6-hub-slot:not(.is-filled),
  .u6-seo-drag.has-selection .u6-hub-slot:not(.is-filled),
  .u6-hub-slot.is-filled .u6-chip.is-placed,
  .u6-chip.is-shake,
  .u6-hub-core,
  .u6-hub-blob { animation: none; }
  .u6-seo-drag-ring-fg { transition: none; }
}

.u6-seo-drag.is-done .u6-audit {
  border-color: rgba(47, 143, 91, 0.35);
  box-shadow: 0 0 0 1px rgba(47, 143, 91, 0.08);
}
.u6-audit {
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 168, 0.14);
  background:
    linear-gradient(180deg, rgba(37, 99, 168, 0.05), transparent 42%),
    #fff;
  overflow: hidden;
}
.u6-audit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
}
.u6-audit-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.u6-audit-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563A8;
  color: #fff;
  flex-shrink: 0;
}
.u6-audit-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.u6-audit-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u6-audit-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.u6-audit-count {
  font-size: 13px;
  font-weight: 800;
  color: #2563A8;
  font-variant-numeric: tabular-nums;
}
.u6-audit-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(37, 99, 168, 0.1);
  overflow: hidden;
  min-width: 72px;
}
.u6-audit-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563A8, #2F8F5B);
  transition: width 0.25s ease;
}
.u6-audit-board {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}
.u6-audit-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1.5px dashed rgba(37, 99, 168, 0.28);
  background: rgba(247, 250, 252, 0.9);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.u6-audit-slot.is-over {
  border-color: #2563A8;
  background: rgba(37, 99, 168, 0.08);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 168, 0.12);
}
.u6-audit-slot.is-filled {
  border-style: solid;
  border-color: rgba(47, 143, 91, 0.35);
  background: rgba(47, 143, 91, 0.06);
}
.u6-audit-slot-num {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #2563A8;
  background: rgba(37, 99, 168, 0.1);
  flex-shrink: 0;
}
.u6-audit-slot.is-filled .u6-audit-slot-num {
  color: #fff;
  background: #2F8F5B;
}
.u6-audit-slot-ph {
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.u6-audit-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u6-audit-pool-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u6-audit-pool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.u6-audit-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(21, 42, 50, 0.04);
  max-width: 100%;
  text-align: left;
}
.u6-audit-chip:hover {
  border-color: rgba(37, 99, 168, 0.35);
}
.u6-audit-chip.is-dragging,
.u6-audit-chip:focus-visible {
  outline: none;
  border-color: #2563A8;
  box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.18);
}
.u6-audit-chip.is-placed {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
}
.u6-audit-chip.is-placed:hover {
  color: #9E3F32;
}
.u6-audit-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 168, 0.1);
  color: #2563A8;
  flex-shrink: 0;
}
.u6-audit-slot.is-filled .u6-audit-ico {
  background: rgba(47, 143, 91, 0.14);
  color: #1F6B42;
}
.u6-audit-chip-txt { line-height: 1.25; }
.u6-audit-chip.is-shake { animation: u6-shake 0.4s ease; }

.u6-assess-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F6B6B;
}

.u6-qa-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u6-qa-hint {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.u6-qa-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563A8;
}
.u6-qa-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.u6-qa-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}
.u6-qa-num {
  font-family: "Noto Serif Bengali", serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  min-width: 1.5em;
  padding-top: 1px;
}
.u6-qa-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
.u6-qa-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid rgba(21, 42, 50, 0.18);
  border-radius: 0;
  padding: 8px 4px 10px;
  font: inherit;
  background: transparent;
}
.u6-qa-input::placeholder {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  font-style: italic;
}
.u6-qa-input:focus {
  outline: none;
  border-bottom-color: #2563A8;
  box-shadow: none;
  background: rgba(37, 99, 168, 0.04);
}
.u6-model {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 107, 107, 0.08);
  font-size: 13px;
  line-height: 1.45;
}

/* Platform match — Module 1 drum drop, compact 6-chip pool */
.u6-match-drums {
  position: relative;
}
.u6-match-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.u6-match-titles { min-width: 0; flex: 1; }
.u6-match-drums .u1-act-kicker {
  display: block;
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-match-drums .u6-match-title {
  margin: 0;
  font-family: var(--font-display, "Noto Sans Bengali", sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.u6-match-hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper, #fff) 88%, #0F6B6B 12%);
}
.u6-match-hud-lab {
  grid-column: 1;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-match-hud-n {
  grid-column: 2;
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0F6B6B;
}
.u6-match-hud-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.u6-match-hud-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  transition: width 0.28s ease;
}
.u6-match-drums .u1-act-q {
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  line-height: 1.5;
}
.u6-match-drums .u1-tip {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-size: 0.8rem;
  font-weight: 450;
  line-height: 1.45;
}
.vl-act-host .u6-match-drums .u6-match-title {
  font-size: 1.02rem;
}
.vl-act-host .u6-match-drums .u1-act-q {
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  line-height: 1.5;
}
.vl-act-host .u6-match-drums .u1-tip {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-size: 0.8rem;
}
.u6-match-drums .u1-drum.is-target:not(.is-filled-ok) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bk, #0F6B6B) 28%, transparent);
}
.u6-match-drums .u1-drum.is-snap {
  animation: u6MatchSnap 0.5s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.u6-match-drums .u1-drum.is-soft {
  animation: u6MatchSoft 0.35s ease;
}
.u6-match-drums .u1-drum.is-filled-ok .ts-bucket-rim,
.u6-match-drums .u1-drum.is-locked-ok .ts-bucket-rim {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #2F8F5B 55%, transparent);
}
.u6-match-drums .u1-drum.is-locked-bad .ts-bucket-rim {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #C45C4A 55%, transparent);
}
.u6-match-drums .u1-drum.is-reject,
.u6-match-drums .u1-drum-chip.is-reject {
  animation: u6Shake 0.45s ease;
}
.u6-match-drums.is-shake {
  animation: u6Shake 0.5s ease;
}
.u6-match-drums.is-win .u6-match-hud {
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
  background: color-mix(in srgb, #2F8F5B 12%, var(--paper, #fff));
}
.u6-match-drums .ts-placed.is-land {
  animation: u6MatchLand 0.42s cubic-bezier(0.22, 1.35, 0.36, 1);
}
.u6-match-fb.is-pop {
  animation: u6MatchFbPop 0.45s ease;
}
@keyframes u6MatchSnap {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes u6MatchSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
@keyframes u6MatchLand {
  0% { opacity: 0.2; transform: scale(0.7); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes u6MatchFbPop {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
  .u6-match-top { flex-direction: column; align-items: stretch; }
  .u6-match-hud { width: 100%; min-width: 0; }
}
.u6-match-drums .u1-drum-pool.ts-pool {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.u6-match-drums .u1-drum-chip.ts-app {
  min-height: 40px;
  padding: 8px 10px;
  align-items: center;
}
.u6-match-drums .u1-drum-chip.ts-app .ts-app-name {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
}
.u6-match-drums .u1-drums.ts-buckets {
  max-width: 100%;
}
.vl-act-shell--roomy .u6-match-drums .u1-drum-pool.ts-pool,
.vl-act-host .u6-match-drums .u1-drum-pool.ts-pool {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 560px) {
  .u6-match-drums .u1-drum-pool.ts-pool,
  .vl-act-host .u6-match-drums .u1-drum-pool.ts-pool {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.u6-cake-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0;
}
@media (min-width: 640px) {
  .u6-cake-compare { grid-template-columns: 1fr 1fr; }
}
.u6-cake-col {
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-mid);
}
.u6-cake-col--short { background: rgba(196, 92, 74, 0.06); }
.u6-cake-col--long { background: rgba(47, 143, 91, 0.08); }
.u6-cake-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.u6-cake-term {
  margin: 0 0 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.u6-cake-meta { margin: 0; font-size: 12px; opacity: 0.75; line-height: 1.4; }

.u6-kw-stage {
  --u6-kw: var(--brand);
  --u6-kw-ink: var(--ink);
  border-radius: 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.u6-kw-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 860px) {
  .u6-kw-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.15fr);
    gap: 22px 28px;
    align-items: center;
  }
}
.u6-kw-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u6-kw);
}
.u6-kw-title {
  margin: 0 0 10px;
  font-family: "Noto Serif Bengali", serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--u6-kw-ink);
}
.u6-kw-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
}
.u6-kw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.u6-kw-pills li {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 107, 107, 0.08);
  color: var(--u6-kw-ink);
  border: 1px solid rgba(15, 107, 107, 0.14);
}
.u6-kw-figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-mid);
  background: var(--surface-2);
  box-shadow: 0 10px 28px var(--line);
}
.u6-kw-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(52vh, 420px);
  object-fit: contain;
  object-position: center;
  background: var(--surface-2);
}
.u6-kw-caption {
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Keyword story — static infographic (client image3) */
.u6-ks-fig {
  margin: 14px 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-mid, var(--line-mid));
  background: var(--surface);
}
.u6-ks-fig img {
  display: block;
  width: 100%;
  height: auto;
}

.u6-ks { gap: 12px; }
.u6-ks-head { display: grid; gap: 6px; margin-bottom: 4px; }
.u6-ks-title {
  margin: 0;
  font-family: "Noto Serif Bengali", serif;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink);
}
.u6-ks-body {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.u6-ks-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.u6-ks-step-dir {
  appearance: none;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 1px solid rgba(15, 107, 107, 0.22);
  background: var(--surface);
  color: #0F6B6B;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.u6-ks-step-dir:disabled { opacity: 0.35; cursor: not-allowed; }
.u6-ks-step-dir.is-next:not(:disabled) {
  background: rgba(15, 107, 107, 0.08);
  border-color: rgba(15, 107, 107, 0.32);
  color: #0F6B6B;
}
.u6-ks-step {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.u6-ks-step:hover {
  color: var(--ink);
  border-color: rgba(15, 107, 107, 0.32);
}
.u6-ks-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  color: #0F6B6B;
  background: rgba(15, 107, 107, 0.1);
}
.u6-ks-step-ico {
  display: inline-flex;
  color: #0F6B6B;
  line-height: 0;
}
.u6-ks-step-tick { display: none; }
.u6-ks-step.is-seen { border-color: rgba(47, 143, 91, 0.28); }
.u6-ks-step.is-seen .u6-ks-step-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  background: #2F8F5B;
}
.u6-ks-step.is-active {
  color: #0F6B6B;
  border-color: rgba(15, 107, 107, 0.32);
  background: rgba(15, 107, 107, 0.08);
  box-shadow: none;
}
.u6-ks-step.is-active .u6-ks-step-num {
  background: rgba(15, 107, 107, 0.16);
  color: #0F6B6B;
}
.u6-ks-step.is-active .u6-ks-step-ico { color: #0F6B6B; }
.u6-ks-hint {
  margin: 0 0 4px;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u6-sim-host > .u6-ks-hint { margin: 0 0 10px; }
.u6-ks-stage {
  border-radius: 16px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  overflow: hidden;
  min-height: 540px;
  height: 540px;
  max-height: 540px;
  display: flex;
  flex-direction: column;
}
.u6-ks-panel {
  position: relative;
  padding: 22px 18px 18px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: auto;
  background: var(--surface);
}
.u6-ks-corner {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #2563A8;
  background: rgba(37, 99, 168, 0.1);
  border: 1px solid rgba(37, 99, 168, 0.18);
  z-index: 2;
}
.u6-ks-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-mid);
}
.u6-ks-pill--navy {
  background: rgba(37, 99, 168, 0.08);
  color: #1e4f8c;
  border-color: rgba(37, 99, 168, 0.2);
}
.u6-ks-pill--alert {
  background: rgba(196, 92, 74, 0.08);
  color: #9E3F32;
  border-color: rgba(196, 92, 74, 0.22);
}
.u6-ks-pill--ok {
  background: rgba(47, 143, 91, 0.08);
  color: #1F6B42;
  border-color: rgba(47, 143, 91, 0.22);
}
.u6-ks-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
}
.u6-ks-panel-copy { min-width: 0; flex: 1; }
.u6-ks-badge { display: none; }
.u6-ks-panel-hint {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  text-align: center;
}
.u6-ks-nav { display: none; }
.u6-ks-nav-btn {
  appearance: none;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.u6-ks-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.u6-ks-nav-btn.is-primary {
  background: #2563A8;
  border-color: #2563A8;
  color: #fff;
}

/* Panel 1 — intro (laptop + megaphone, search on screen) */
.u6-ks-intro {
  padding: 28px 20px 20px;
  background: var(--surface);
}
.u6-ks-intro-title {
  margin: 0 36px 16px;
  font-family: "Noto Serif Bengali", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
}
.u6-ks-intro-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(88px, 0.55fr);
  gap: 12px;
  align-items: end;
  max-width: 560px;
  margin: 0 auto 14px;
}
.u6-ks-laptop { display: grid; gap: 0; }
.u6-ks-laptop-lid {
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  border: 7px solid #d5dbe2;
  border-bottom-width: 10px;
  background: #d5dbe2;
  box-shadow: 0 12px 28px var(--line-mid);
}
.u6-ks-laptop-base {
  height: 10px;
  margin: 0 -8px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #c5ccd4, #9aa3ad);
  position: relative;
}
.u6-ks-laptop-base > i {
  display: block;
  width: 56px;
  height: 5px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: #7d868f;
}
.u6-ks-horn {
  position: relative;
  height: 150px;
  margin-bottom: 8px;
}
.u6-ks-horn-cone {
  position: absolute;
  right: 8px;
  top: 28px;
  width: 78px;
  height: 78px;
  background: conic-gradient(from 220deg, #3d7ec4, #2563A8 40%, #1e4f8c);
  clip-path: polygon(0 50%, 100% 8%, 100% 92%);
  border-radius: 4px;
}
.u6-ks-horn-bell {
  position: absolute;
  right: 4px;
  top: 18px;
  width: 22px;
  height: 98px;
  border-radius: 40% 60% 60% 40%;
  background: linear-gradient(180deg, #6ea0d6, #2563A8 55%, #1a4a86);
  box-shadow: inset -4px 0 0 rgba(255, 255, 255, 0.18);
}
.u6-ks-horn-grip {
  position: absolute;
  left: 10px;
  bottom: 18px;
  width: 42px;
  height: 10px;
  border-radius: 6px;
  background: #cfd6dc;
  transform: rotate(-18deg);
}
.u6-ks-horn-waves {
  position: absolute;
  right: -2px;
  top: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(37, 99, 168, 0.35);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 10px 0 0;
}
.u6-ks-browser {
  border-radius: 0;
  border: 0;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
.u6-ks-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.u6-ks-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.u6-ks-dot--r { background: #ff5f57; }
.u6-ks-dot--y { background: #febc2e; }
.u6-ks-dot--g { background: #28c840; }
.u6-ks-url {
  flex: 1;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u6-ks-browser-body { padding: 10px 10px 8px; }
.u6-ks-g-logo {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.u6-ks-g-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  box-shadow: 0 1px 4px var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.u6-ks-g-q {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.u6-ks-g-tabs {
  display: flex;
  gap: 12px;
  margin: 8px 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.u6-ks-g-tabs .is-on {
  color: #1a73e8;
  box-shadow: inset 0 -2px 0 #1a73e8;
  padding-bottom: 6px;
  margin-bottom: -7px;
}
.u6-ks-g-hit { margin-bottom: 8px; }
.u6-ks-g-url {
  margin: 0;
  font-size: 10px;
  color: #202124;
}
.u6-ks-g-title {
  margin: 1px 0;
  font-size: 13px;
  font-weight: 600;
  color: #1a0dab;
  line-height: 1.3;
}
.u6-ks-g-snip {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #4d5156;
}
.u6-ks-intro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.u6-ks-intro-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(37, 99, 168, 0.16);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(21, 42, 50, 0.04);
}
.u6-ks-intro-chips li span {
  display: inline-flex;
  color: #2563A8;
}

/* Panel 2 — split */
.u6-ks-split { padding-top: 28px; background: var(--surface); }
.u6-ks-split-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 0 14px;
}
.u6-ks-split-title { display: none; }
.u6-ks-split-task {
  margin: 4px 0 0;
  max-width: 42em;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.u6-ks-split-task em { font-style: normal; font-weight: 800; color: #2563A8; }
.u6-ks-split-progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.u6-ks-split-progress li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.u6-ks-split-progress li span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}
.u6-ks-split-progress .is-todo {
  background: rgba(37, 99, 168, 0.06);
  border-color: rgba(37, 99, 168, 0.2);
  color: #2563A8;
}
.u6-ks-split-progress .is-todo span {
  background: #2563A8;
  color: #fff;
}
.u6-ks-split-progress .is-done {
  background: rgba(47, 143, 91, 0.1);
  border-color: rgba(47, 143, 91, 0.25);
  color: #1F6B42;
}
.u6-ks-split-progress .is-done span {
  background: #2F8F5B;
  color: #fff;
}
.u6-ks-split-status {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  background: rgba(37, 99, 168, 0.08);
  color: #2563A8;
  border: 1px solid rgba(37, 99, 168, 0.16);
}
.u6-ks-split-status.is-ready {
  background: rgba(47, 143, 91, 0.1);
  color: #1F6B42;
  border-color: rgba(47, 143, 91, 0.25);
}
.u6-ks-col.needs-tap {
  border-style: dashed;
  animation: u6SlotPulse 1.4s ease-in-out infinite;
}
.u6-ks-col-cue {
  align-self: flex-end;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563A8;
  background: rgba(37, 99, 168, 0.1);
  padding: 3px 8px;
  border-radius: 999px;
}
.u6-ks-col--long .u6-ks-col-cue {
  color: #1F6B42;
  background: rgba(47, 143, 91, 0.12);
}
.u6-ks-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  max-width: 760px;
  margin: 0 auto;
}
.u6-ks-vs-badge {
  align-self: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #1e4f8c;
  background: var(--surface);
  border: 1px solid rgba(37, 99, 168, 0.22);
  z-index: 1;
}
.u6-ks-col {
  appearance: none;
  text-align: left;
  border: 1.5px solid var(--line-mid);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: inherit;
  box-shadow: 0 6px 18px var(--line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.u6-ks-col.is-on {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--line-mid);
}
.u6-ks-col--short.is-on { border-color: #2563A8; }
.u6-ks-col--long.is-on { border-color: #2F8F5B; }
.u6-ks-col-h {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.u6-ks-col--short .u6-ks-col-h {
  background: rgba(37, 99, 168, 0.08);
  color: #1e4f8c;
  border-color: rgba(37, 99, 168, 0.18);
}
.u6-ks-col--long .u6-ks-col-h {
  background: rgba(47, 143, 91, 0.08);
  color: #1F6B42;
  border-color: rgba(47, 143, 91, 0.2);
}
.u6-ks-search {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(21, 42, 50, 0.04);
}
.u6-ks-search-ico {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid rgba(21, 42, 50, 0.35);
  position: relative;
}
.u6-ks-search-ico::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 1.5px;
  background: rgba(21, 42, 50, 0.35);
  right: -4px;
  bottom: -1px;
  transform: rotate(40deg);
}
.u6-ks-hits,
.u6-ks-traits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.u6-ks-hits {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.u6-ks-col.is-on .u6-ks-hits {
  max-height: 140px;
  opacity: 1;
}
.u6-ks-hits li {
  position: relative;
  padding-left: 16px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.u6-ks-hits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
}
.u6-ks-col--short .u6-ks-hits li { color: #2563A8; }
.u6-ks-col--long .u6-ks-hits li { color: #2F8F5B; }
.u6-ks-traits {
  margin-top: auto;
  padding: 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.u6-ks-col--short .u6-ks-traits { background: rgba(37, 99, 168, 0.08); color: #1e4f8c; }
.u6-ks-col--long .u6-ks-traits { background: rgba(47, 143, 91, 0.1); color: #1F6B42; }

/* Social post */
.u6-ks-post {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid #ccd0d5;
  background: var(--surface);
  padding: 12px 12px 8px;
  box-shadow: 0 8px 24px var(--line);
  font-family: "Segoe UI", "Hind Siliguri", sans-serif;
}
.u6-ks-post.is-good { border-color: rgba(47, 143, 91, 0.4); }
.u6-ks-post-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 1;
}
.u6-ks-post-mark.is-ok { background: #2F8F5B; }
.u6-ks-post-mark.is-bad { background: #C45C4A; }
.u6-ks-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.u6-ks-post-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #0F6B6B, #2563A8);
}
.u6-ks-post-name { margin: 0; font-size: 14px; font-weight: 700; color: #050505; }
.u6-ks-post-time { margin: 0; font-size: 12px; color: #65676b; }
.u6-ks-post-body {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #050505;
}
.u6-ks-photo {
  position: relative;
  margin: 0 -12px 10px;
  width: calc(100% + 24px);
  height: 148px;
  max-height: 148px;
  overflow: hidden;
  background: var(--surface-2);
}
.u6-ks-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.u6-ks-cake { display: none; }
.u6-ks-cake-base,
.u6-ks-cake-mid,
.u6-ks-cake-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
}
.u6-ks-cake-base {
  bottom: 14px;
  width: 120px;
  height: 28px;
  background: #6b3b24;
}
.u6-ks-cake-mid {
  bottom: 36px;
  width: 108px;
  height: 24px;
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
}
.u6-ks-cake-top {
  bottom: 54px;
  width: 96px;
  height: 22px;
  background: #8b4518;
}
.u6-ks-cake-berry {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c62828;
  bottom: 72px;
}
.u6-ks-cake-berry--1 { left: calc(50% - 28px); }
.u6-ks-cake-berry--2 { left: calc(50% - 6px); background: #2e7d32; }
.u6-ks-cake-berry--3 { left: calc(50% + 16px); }
.u6-ks-hashes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.u6-ks-hash {
  appearance: none;
  border: 0;
  background: rgba(37, 99, 168, 0.08);
  color: #2563A8;
  border-radius: 999px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.u6-ks-hash.is-on {
  background: rgba(37, 99, 168, 0.1);
  color: #1e4f8c;
  border: 1px solid rgba(37, 99, 168, 0.22);
}
.u6-ks-post-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u6-ks-panel-hint--inline {
  margin: 4px 0 0;
}
.u6-ks-hash-panel {
  padding-top: 28px;
  background: var(--surface);
}
.u6-ks-hash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-left: 28px;
}
.u6-ks-hash-head .u6-ks-panel-hint {
  text-align: left;
  margin-bottom: 0;
}
.u6-ks-hash-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.u6-ks-hash-count {
  flex-shrink: 0;
  min-width: 64px;
  padding: 8px 10px;
  height: auto;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #2563A8;
  background: rgba(37, 99, 168, 0.08);
  border: 1px solid rgba(37, 99, 168, 0.16);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.u6-ks-hash-count-lab {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(37, 99, 168, 0.62);
  margin-bottom: 2px;
}
.u6-ks-hash-count span {
  display: inline;
  font-size: 11px;
  font-weight: 700;
  color: rgba(37, 99, 168, 0.55);
  margin-top: 0;
}
.u6-ks-hash-count.is-ok {
  color: #1F6B42;
  background: rgba(47, 143, 91, 0.1);
  border-color: rgba(47, 143, 91, 0.25);
}
.u6-ks-hash-count.is-ok span { color: rgba(31, 107, 66, 0.55); }
.u6-ks-hash-count.is-bad {
  color: #9E3F32;
  background: rgba(196, 92, 74, 0.1);
  border-color: rgba(196, 92, 74, 0.25);
}
.u6-ks-hash-count.is-bad span { color: rgba(158, 63, 50, 0.55); }
.u6-ks-hash-layout {
  display: grid;
  gap: 12px;
}
@media (min-width: 720px) {
  .u6-ks-hash-layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}
.u6-ks-post--compact .u6-ks-photo {
  height: 112px;
  max-height: 112px;
}
.u6-ks-hashes--live {
  min-height: 40px;
  margin: 0 0 8px;
  padding: 8px;
  border: 1.5px dashed #C45C4A;
  border-radius: 8px;
  background: rgba(196, 92, 74, 0.04);
}
.u6-ks-hash-empty {
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.u6-ks-hash-pool {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(247, 250, 252, 0.9);
}
.u6-ks-hash-pool-lab {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u6-ks-hash.is-offtopic {
  border: 1px dashed rgba(196, 92, 74, 0.35);
  color: #9E3F32;
  background: rgba(196, 92, 74, 0.06);
}
.u6-ks-hash.is-offtopic i {
  font-style: normal;
  margin-left: 4px;
  font-size: 9px;
  font-weight: 800;
  opacity: 0.75;
}
.u6-ks-hash.is-wrong {
  background: rgba(196, 92, 74, 0.1) !important;
  color: #9E3F32 !important;
  border: 1px solid rgba(196, 92, 74, 0.28);
}
.u6-ks-hash-feedback {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}
.u6-ks-hashes-static {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.u6-ks-hashes-static span {
  padding: 0;
  border-radius: 0;
  background: none;
  color: #1877f2;
  font-size: 13px;
  font-weight: 600;
}

.u6-ks-good-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 0 14px;
}
.u6-ks-good { padding-top: 28px; background: var(--surface); }
.u6-ks-good-banner { display: none; }
.u6-ks-good-compare {
  display: grid;
  gap: 12px;
  align-items: center;
  min-height: 0;
}
@media (min-width: 720px) {
  .u6-ks-good-compare {
    grid-template-columns: minmax(140px, 0.55fr) auto minmax(0, 1fr);
    align-items: start;
  }
}
.u6-ks-good-bad {
  padding: 12px;
  border-radius: 14px;
  border: 1.5px dashed rgba(196, 92, 74, 0.4);
  background: rgba(196, 92, 74, 0.06);
}
.u6-ks-good-lab {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.u6-ks-good-lab.is-bad { color: #9E3F32; }
.u6-ks-good-lab.is-ok { color: #1F6B42; margin: 0 0 8px; }
.u6-ks-good-snip {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.u6-ks-good-snip mark {
  background: rgba(196, 92, 74, 0.15);
  color: #9E3F32;
  font-weight: 800;
  padding: 0 2px;
  border-radius: 3px;
}
.u6-ks-good-arrow {
  display: none;
  color: #2F8F5B;
}
@media (min-width: 720px) {
  .u6-ks-good-arrow { display: grid; place-items: center; }
}
.u6-ks-good-ok {
  min-width: 0;
}
.u6-ks-good-ok .u6-ks-post {
  margin: 0;
  max-width: 340px;
}

.u6-ks-post-foot span { display: inline-flex; align-items: center; gap: 4px; }

.u6-ks-stuff { padding-top: 28px; background: var(--surface); }
.u6-ks-stuff-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.u6-ks-stuff-banner { display: none; }
.u6-ks-stuff-banner-ico { display: inline-flex; }
.u6-ks-stuff-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(196, 92, 74, 0.08);
  border: 1px solid rgba(196, 92, 74, 0.22);
  font-size: 12px;
  font-weight: 700;
  color: #9E3F32;
}
.u6-ks-stuff-meter-lab {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
}
.u6-ks-stuff-meter strong {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.u6-ks-stuff-meter-bar {
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: rgba(196, 92, 74, 0.15);
  overflow: hidden;
}
.u6-ks-stuff-meter-bar > i {
  display: block;
  height: 100%;
  width: calc(var(--n, 0) * 5%);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #C45C4A, #9E3F32);
}
.u6-ks-stuff-page {
  border-radius: 14px;
  border: 1px solid rgba(196, 92, 74, 0.22);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(196, 92, 74, 0.1);
}
.u6-ks-stuff-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.u6-ks-stuff-chrome > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-mid);
}
.u6-ks-stuff-chrome > span:nth-child(1) { background: #ff5f57; }
.u6-ks-stuff-chrome > span:nth-child(2) { background: #febc2e; }
.u6-ks-stuff-chrome > span:nth-child(3) { background: #28c840; }
.u6-ks-stuff-chrome > em {
  margin-left: 6px;
  flex: 1;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.u6-ks-stuff-box {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0;
  padding: 14px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
}
.u6-ks-stuff-box:hover { background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.u6-ks-stuff-box.is-open { background: color-mix(in srgb, var(--coral) 14%, var(--surface)); }
.u6-ks-stuff-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.u6-ks-stuff-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.u6-ks-stuff-w {
  background: rgba(196, 92, 74, 0.14);
  color: #9E3F32;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.u6-ks-stuff-box.is-open .u6-ks-stuff-w {
  background: #C45C4A;
  color: #fff;
  animation: u6StuffFlash 0.45s ease;
}
.u6-ks-stuff-tap {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #C45C4A;
  letter-spacing: 0.02em;
}
.u6-ks-warn {
  display: none;
  position: relative;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface);
  border: 1.5px solid rgba(196, 92, 74, 0.35);
  box-shadow: 0 8px 20px rgba(196, 92, 74, 0.12);
}
.u6-ks-warn::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 28px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-left: 1.5px solid rgba(196, 92, 74, 0.35);
  border-top: 1.5px solid rgba(196, 92, 74, 0.35);
  transform: rotate(45deg);
}
.u6-ks-warn.is-show { display: flex; animation: u6ChipPop 0.28s ease; }
.u6-ks-warn-ico { color: #C45C4A; flex-shrink: 0; margin-top: 2px; }
.u6-ks-warn-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #9E3F32;
}
.u6-ks-warn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.u6-ks-warn-list li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
}
.u6-ks-warn-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C45C4A;
}
.u6-ks-warn-list strong { color: #9E3F32; }
@keyframes u6StuffFlash {
  from { filter: brightness(1.25); }
  to { filter: brightness(1); }
}

/* Summary */
.u6-ks-summary {
  background: var(--surface);
  color: var(--ink);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 18px 20px;
}
.u6-ks-summary .u6-ks-corner {
  background: rgba(37, 99, 168, 0.1);
  color: #2563A8;
  border: 1px solid rgba(37, 99, 168, 0.18);
}
.u6-ks-sum-head { margin: 0; text-align: center; padding: 0 28px; }
.u6-ks-sum-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.u6-ks-sum-sub {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 57.99999999999999%, transparent);
}
.u6-ks-glass {
  padding: 8px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.u6-ks-takeaways {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.u6-ks-take {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.u6-ks-take:hover { background: var(--surface-2); border-color: rgba(15, 107, 107, 0.22); }
.u6-ks-take.is-on {
  background: rgba(15, 107, 107, 0.05);
  border-color: rgba(15, 107, 107, 0.22);
}
.u6-ks-take.is-bad.is-on {
  border-color: rgba(196, 92, 74, 0.28);
  background: rgba(196, 92, 74, 0.05);
}
.u6-ks-take-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(15, 107, 107, 0.08);
  color: #0F6B6B;
  flex-shrink: 0;
}
.u6-ks-take-ico.is-bad { background: rgba(196, 92, 74, 0.1); color: #9E3F32; }
.u6-ks-take-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}
.u6-ks-take-t {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.u6-ks-take-t em {
  color: #1F6B42;
  font-style: normal;
  font-weight: 800;
}
.u6-ks-take-t strong { color: #0F6B6B; }
.u6-ks-take-d {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u6-ks-take-tap {
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.u6-ks-take-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--line);
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  margin-top: 4px;
}
.u6-ks-take.is-on .u6-ks-take-check {
  background: rgba(47, 143, 91, 0.12);
  color: #1F6B42;
}
.u6-ks-avoid { color: #9E3F32; }
.u6-ks-sum-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.u6-ks-sum-nudge {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u6-ks-cta {
  appearance: none;
  min-width: 200px;
  border: 1.5px solid rgba(15, 107, 107, 0.32);
  background: var(--surface);
  color: #0F6B6B;
  border-radius: 12px;
  padding: 11px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.u6-ks-cta:hover:not(:disabled) { background: rgba(15, 107, 107, 0.06); }
.u6-ks-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.u6-ks-cta--solid {
  border-color: rgba(15, 107, 107, 0.32);
  background: rgba(15, 107, 107, 0.08);
  color: #0F6B6B;
  width: 100%;
}
.u6-ks-cta--solid:hover:not(:disabled) { background: rgba(15, 107, 107, 0.12); }
.u6-ks-plan {
  width: min(100%, 380px);
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  display: grid;
  gap: 10px;
  animation: u6ChipPop 0.28s ease;
}
.u6-ks-plan-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u6-ks-plan-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.u6-ks-done {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u6-ks-done {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
@media (max-width: 860px) {
  .u6-ks-step-ico { display: none; }
}
@media (max-width: 720px) {
  .u6-ks-stage {
    height: 480px;
    min-height: 480px;
    max-height: 480px;
  }
}
@media (max-width: 640px) {
  .u6-ks-vs { grid-template-columns: 1fr; }
  .u6-ks-vs-badge { justify-self: center; margin: -4px 0; }
  .u6-ks-col.is-on .u6-ks-hits { max-height: 160px; }
  .u6-ks-intro-scene { grid-template-columns: 1fr; }
  .u6-ks-horn { display: none; }
  .u6-ks-step-label { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .u6-ks-col,
  .u6-ks-hits { transition: none; }
}

.u6-kw-board {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 107, 107, 0.14);
  background: linear-gradient(165deg, rgba(15, 107, 107, 0.07), rgba(255, 255, 255, 0.95));
}
.u6-kw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.u6-kw-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, #0F6B6B, #2563A8);
  flex-shrink: 0;
}
.u6-kw-brand-name {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #0F6B6B;
}
.u6-kw-brand-sub {
  margin: 0;
  font-size: 11px;
  opacity: 0.7;
}
.u6-kw-search-compare {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.u6-kw-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
}
.u6-kw-search--short { border-color: rgba(196, 92, 74, 0.25); }
.u6-kw-search--long { border-color: rgba(47, 143, 91, 0.3); }
.u6-kw-search-ico {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--u6-kw);
  position: relative;
  flex-shrink: 0;
}
.u6-kw-search-ico::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 2px;
  background: var(--u6-kw);
  right: -4px;
  bottom: -1px;
  transform: rotate(45deg);
  border-radius: 2px;
}
.u6-kw-search-q {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--u6-kw-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u6-kw-search--long .u6-kw-search-q { white-space: normal; }
.u6-kw-search-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.u6-kw-search--short .u6-kw-search-tag {
  background: rgba(196, 92, 74, 0.12);
  color: #9E3F32;
}
.u6-kw-search--long .u6-kw-search-tag {
  background: rgba(47, 143, 91, 0.14);
  color: #1F6B42;
}
.u6-post-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 640px) {
  .u6-post-compare { grid-template-columns: 1fr 1fr; }
}
.u6-post {
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
}
.u6-post--bad { border-color: rgba(196, 92, 74, 0.35); background: rgba(196, 92, 74, 0.05); }
.u6-post--good { border-color: rgba(47, 143, 91, 0.35); background: rgba(47, 143, 91, 0.06); }
.u6-post-label {
  margin: 0 0 6px;
}
.u6-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.u6-status--bad { background: rgba(196, 92, 74, 0.14); color: #9E3F32; }
.u6-status--good { background: rgba(47, 143, 91, 0.14); color: #1F6B42; }
.u6-post-body { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.u6-post-tags { margin: 0 0 6px; font-size: 12px; color: #0F6B6B; font-weight: 600; }
.u6-post-meta { margin: 0; font-size: 12px; opacity: 0.7; }

.u6-plat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 6px;
}
.u6-plat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pc, #2563A8) 35%, transparent);
  background: color-mix(in srgb, var(--pc, #2563A8) 10%, var(--surface));
  color: color-mix(in srgb, var(--pc, #2563A8) 80%, #152A32);
  font-size: 13px;
  font-weight: 700;
}
.u6-plat-contrast {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #C45C4A;
}

/* Social media overview */
.u6-smm {
  gap: 12px;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.u6-smm-head { display: grid; gap: 8px; }
.u6-smm-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2F8F5B;
}
.u6-smm-title {
  margin: 0;
  font-family: "Noto Serif Bengali", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}
.u6-smm-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
}
.u6-smm-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
}
.u6-smm-alert-ico { color: var(--teal); flex-shrink: 0; margin-top: 2px; }
.u6-smm-alert-t {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9E3F32;
}
.u6-smm-alert-b {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.u6-smm-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 760px) {
  .u6-smm-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 340px;
  }
  .u6-smm-grid > * { min-width: 0; }
}
.u6-smm-plats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 280px;
}
@media (min-width: 760px) {
  .u6-smm-plats { min-height: 100%; height: 100%; }
}
.u6-smm-plat {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.u6-smm-plat:hover {
  border-color: color-mix(in srgb, var(--pc) 42%, transparent);
}
.u6-smm-plat.is-active {
  border-color: color-mix(in srgb, var(--pc) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 16%, transparent);
  transform: none;
  background: var(--surface);
}
.u6-smm-plat.is-seen:not(.is-active) {
  background: var(--surface);
  border-color: var(--line-mid);
}
.u6-smm-plat-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--pc);
  background: #F4F6F7;
  flex-shrink: 0;
}
.u6-smm-plat[data-plat="ig"] .u6-smm-plat-ico {
  color: #fff;
  background: linear-gradient(135deg, #F58529, #DD2A7B 52%, #8134AF);
}
.u6-smm-plat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.u6-smm-plat-hint {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.u6-smm-plat-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--teal);
}
.u6-smm-stage {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pc) 20%, var(--line-mid));
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 280px;
  height: 100%;
  overflow: hidden;
}
.u6-smm-stage-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.u6-smm-stage-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pc);
}
.u6-smm-stage[data-plat="ig"] .u6-smm-stage-name {
  background: linear-gradient(90deg, #F58529, #DD2A7B 48%, #8134AF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.u6-smm-stage-tone {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--pc) 18%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--pc) 45%, #152A32);
}
.u6-smm-stage-tone span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pc) 70%, #5B6B7A);
}
.u6-smm-stage-aud {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}
.u6-smm-stage-voice {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.u6-smm-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.u6-smm-format {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--pc) 42%, #152A32);
  background: color-mix(in srgb, var(--pc) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--pc) 16%, transparent);
}
.u6-smm-demo-lab {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  text-transform: uppercase;
}
.u6-smm-mock {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--pc) 14%, var(--line-mid));
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: none;
  flex: 1 1 auto;
  min-height: 132px;
  display: flex;
  flex-direction: column;
}
.u6-smm-li-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.u6-smm-li-head p { margin: 0; font-size: 12px; font-weight: 800; color: var(--ink); }
.u6-smm-li-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--pc);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--pc) 55%, transparent);
  flex-shrink: 0;
}
.u6-smm-stage[data-plat="ig"] .u6-smm-li-av {
  background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #E1306C;
}
.u6-smm-stage[data-plat="li"] .u6-smm-li-av {
  border-radius: 6px;
}
.u6-smm-li-av--photo {
  background:
    radial-gradient(circle at 35% 30%, #f3d4b8 0 38%, transparent 40%),
    linear-gradient(180deg, #c47a4a, #8b4a2a);
  font-size: 0;
}
.u6-smm-people {
  list-style: none;
  margin: auto 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.u6-smm-people li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.u6-smm-people strong { color: var(--ink); margin-right: 4px; }
.u6-smm-people-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: color-mix(in srgb, var(--pc) 72%, #8b6b4a);
}
.u6-smm-thumb-face {
  position: absolute;
  left: 14px;
  bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(circle at 35% 30%, #f3d4b8 0 40%, transparent 42%),
    linear-gradient(180deg, #c47a4a, #6b3b24);
}
.u6-smm-thumb-time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 4px;
}
.u6-smm-mock-meta {
  margin: 0;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: color-mix(in srgb, var(--ink) 50%, transparent) !important;
}
.u6-smm-mock-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}
.u6-smm-mock--video .u6-smm-mock-copy,
.u6-smm-mock--visual .u6-smm-mock-copy {
  -webkit-line-clamp: 2;
  min-height: 2.6em;
}
.u6-smm-react {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.u6-smm-mock--video .u6-smm-thumb {
  position: relative;
  height: 56px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45)),
    linear-gradient(145deg, #3a1212, #1a1a1a);
  margin-bottom: 8px;
  flex-shrink: 0;
}
.u6-smm-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #FF0000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.u6-smm-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}
.u6-smm-mock-title {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.u6-smm-mock--visual .u6-smm-gram {
  height: 48px;
  border-radius: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(221, 42, 123, 0.08)),
    linear-gradient(135deg, #f6e7d4, #e8c9a8 55%, #ddb08a);
}
.u6-smm-gram-cake {
  width: 54px;
  height: 40px;
  border-radius: 6px 6px 4px 4px;
  background:
    linear-gradient(#8b4518 0 12px, color-mix(in srgb, var(--amber) 14%, var(--surface)) 12px 22px, #6b3b24 22px 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.u6-smm-mock--article {
  border-left: 3px solid var(--pc);
}
.u6-smm-mock--feed {
  border-left: 3px solid var(--pc);
}
.u6-smm-contrast {
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.u6-smm-contrast-lab {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.u6-smm-contrast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.u6-smm-side {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  min-height: 108px;
  height: 100%;
  box-sizing: border-box;
}
.u6-smm-side header {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.u6-smm-side-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: #1877F2;
}
.u6-smm-side-av--li { background: #0A66C2; }
.u6-smm-side p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  font-style: normal;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u6-smm-side--fb {
  background: var(--surface);
  border-color: var(--line-mid);
  border-left: 3px solid #1877F2;
}
.u6-smm-side--li {
  background: var(--surface);
  border-color: var(--line-mid);
  border-left: 3px solid #0A66C2;
}
.u6-smm-side--fb header { color: #1877F2; }
.u6-smm-side--li header { color: #0A66C2; }
.u6-smm-vs { display: none; }
@media (max-width: 520px) {
  .u6-smm-contrast-row { grid-template-columns: 1fr; }
}

/* Unit 6 — tools why */
.u6-tools {
  gap: 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(800px 240px at 100% 0%, rgba(15, 107, 107, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 252, 0.96));
  box-shadow: 0 16px 36px var(--line);
}
.u6-tools-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0F6B6B;
}
.u6-tools-title {
  margin: 0;
  font-family: "Noto Serif Bengali", serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
}
.u6-tools-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.u6-tools-body--script {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 52rem;
}
.u6-tools--solo .u6-actions {
  margin-top: 4px;
}
.u6-tools-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
@media (min-width: 640px) {
  .u6-tools-tabs { grid-template-columns: none; }
}
.u6-tools-tab {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  text-align: left;
  min-height: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.u6-tools-tab-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  color: #0F6B6B;
  background: rgba(15, 107, 107, 0.1);
}
.u6-tools-tab.is-active .u6-tools-tab-n {
  background: rgba(15, 107, 107, 0.16);
}
.u6-tools-tab-hint { display: none; }
.u6-tools-tab-check {
  position: static;
  top: auto;
  right: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 143, 91, 0.14);
  color: #1F6B42;
}
.u6-tools-tab:hover { border-color: rgba(15, 107, 107, 0.4); }
.u6-tools-tab.is-active {
  border-color: rgba(15, 107, 107, 0.32);
  background: rgba(15, 107, 107, 0.08);
  box-shadow: none;
}
.u6-tools-tab.is-seen:not(.is-active) { border-color: rgba(47, 143, 91, 0.28); }
.u6-tools-tab-ico { color: #0F6B6B; }
.u6-tools-tab-name { font-weight: 650; font-size: 0.78rem; }
.u6-tools-stage {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
  min-height: 260px;
  height: 260px;
  overflow: auto;
}
.u6-tools-panel {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.u6-tools-mock--dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.u6-tools-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  font-size: 13px;
  font-weight: 700;
  color: #0F6B6B;
}
.u6-tools-mock--metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.u6-tools-mock--metrics span {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(15, 107, 107, 0.22);
  font-size: 12px;
  font-weight: 800;
  color: #0F6B6B;
}
.u6-tools-mock--cms {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line-mid);
}
.u6-tools-cms-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.u6-tools-cms-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #c45c4a;
}
.u6-tools-cms-bar span:nth-child(2) { background: #c48a2a; }
.u6-tools-cms-bar span:nth-child(3) { background: #2f8f5b; }
.u6-tools-cms-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
}
.u6-tools-cms-line {
  height: 8px;
  border-radius: 4px;
  background: var(--line-mid);
  margin: 0 0 6px;
}
.u6-tools-cms-line--short { width: 55%; }
.u6-tools-cms-pub {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #0F6B6B;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.vl-act-host .u6-sim { max-width: none; }


/* ---- Complete Issue · Cancel vs Create ---- */
.u2-completeissue .u2-form-actions { margin-top: 4px; }
.u2-completeissue .u2v-btn--cancel { min-width: 92px; }
.u2-completeissue .u2v-btn:not(.u2v-btn--cancel) { min-width: 132px; }
.u2-completeissue .u2v-btn.u2v-btn--cancel:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-mid);
  filter: none;
  transform: none;
}

/* ---- Problem Solving: live Jira issue + 5 scripted steps ---- */
.u2-ps-issue {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--slate) 22%, var(--surface));
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(9, 30, 66, 0.08);
}
.u2-ps-issue-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.u2-ps-issue-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.u2-ps-issue-warn {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--u2-clay, #c45c4a) 28%, transparent);
  background: color-mix(in srgb, var(--u2-clay, #c45c4a) 8%, var(--surface));
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.45;
  color: color-mix(in srgb, var(--u2-clay, #c45c4a) 40%, var(--ink));
}
.u2-ps-issue-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 12px 0 0;
}
.u2-ps-issue-fields dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--read-muted);
}
.u2-ps-issue-fields dd {
  margin: 3px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.u2-ps-choose {
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-ps-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}
.u2-ps-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--u2-line-soft, var(--line));
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  color: var(--u2-ink);
  font: inherit;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.u2-ps-step:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--acc) 36%, transparent); }
.u2-ps-step-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, var(--surface));
}
.u2-ps-step-label { flex: 1; font-size: 0.8rem; font-weight: 650; line-height: 1.3; }
.u2-ps-step-tick { display: none; color: #1f845a; }
.u2-ps-step.is-on {
  border-color: color-mix(in srgb, var(--acc) 42%, transparent);
  background: color-mix(in srgb, var(--acc) 8%, var(--surface));
}
.u2-ps-step.is-on .u2-ps-step-tick { display: inline-flex; }

/* ---- Serial 19: 5 MCQ icons ---- */
.u2-mcq-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.u2-mcq-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--acc) 22%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, var(--surface));
  cursor: pointer;
  color: var(--u2-ink);
  font: inherit;
  text-align: center;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.u2-mcq-icon:hover { transform: translateY(-2px); }
.u2-mcq-icon.is-on {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 22%, transparent);
}
.u2-mcq-icon-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 750;
  color: color-mix(in srgb, var(--acc) 72%, #1a1a1a);
  background: color-mix(in srgb, var(--acc) 16%, var(--surface));
}
.u2-mcq-icon-mark { color: var(--acc); }
.u2-mcq-icon-topic {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--u2-ink);
}
.u2-mcq-icon-tick {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  color: #1f845a;
}
.u2-mcq-icon.is-done .u2-mcq-icon-tick { display: inline-flex; }
.u2-mcq-panel {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--u2-line-soft, var(--line));
  background: var(--surface);
}
.u2-mcq-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--u2-txt-3);
}
.u2-mcq-q {
  margin: 0 0 12px;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--u2-ink);
}
.u2-mcq-opts { display: flex; flex-direction: column; gap: 8px; }
.u2-mcq-opts .u2-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 10px 12px;
}
.u2-mcq-opts .u2-opt span {
  display: block;
  white-space: normal;
  line-height: 1.4;
}
.u2-mcq-opts .u2-opt b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.72rem;
  background: color-mix(in srgb, var(--u2-brand) 10%, var(--surface));
}
.u2-mcq-fb {
  margin: 10px 0 0;
  min-height: 1.2em;
  font-size: 0.8rem;
  font-weight: 600;
}
.u2-mcq-fb.is-ok { color: var(--u2-green, #1f845a); }
.u2-mcq-fb.is-bad { color: var(--u2-clay, #c45c4a); }
@media (max-width: 820px) {
  .u2-jira-modal-meta,
  .u2-ps-issue-fields { grid-template-columns: 1fr; }
  .u2-mcq-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Unit 6 — SEO cards, Jamal, tools drag, analytics match, resources ===== */
.u6-tools--solo { gap: 14px; }
.u6-tools-fig { margin-top: 4px; }
.u6-seo-card {
  --u6-accent: #2563A8;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--u6-accent) 12%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--u6-accent) 18%, transparent);
  overflow: hidden;
}
.u6-seo-card.has-pop { overflow: hidden; }
.vl-act-story--skip {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.vl-act-story--skip .vl-act-turn {
  min-width: 0;
  flex: 1;
}
.vl-act-skip,
.u6-seo-card-skip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface, #fff));
  color: var(--brand, #0F6B6B);
  font-family: var(--font-ui, "Plus Jakarta Sans", "Noto Sans Bengali", sans-serif);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  line-height: 1.2;
}
.vl-act-skip:hover,
.u6-seo-card-skip:hover {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 14%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 42%, transparent);
}
.u6-seo-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
}
.u6-seo-card-head .u6-seo-card-meter {
  grid-column: 1 / -1;
}
.u6-seo-card-pop .u6-seo-card-skip {
  position: absolute;
  top: 10px;
  left: 12px;
  right: auto;
  z-index: 2;
}
.u6-seo-card-pop:has(.u6-seo-card-skip) {
  padding-top: 48px;
}
.u6-seo-card-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.u6-seo-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  font-family: "Noto Serif Bengali", serif;
}
.u6-seo-card-meter {
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--u6-accent) 14%, transparent);
  overflow: hidden;
  margin-top: 6px;
}
.u6-seo-card-meter > span {
  display: block;
  height: 100%;
  width: var(--u6-pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--u6-accent), color-mix(in srgb, #2F8F5B 70%, var(--u6-accent)));
  transition: width 0.35s ease;
}
.u6-seo-card.is-complete {
  box-shadow: 0 0 0 1px color-mix(in srgb, #2F8F5B 35%, transparent), 0 12px 28px color-mix(in srgb, #2F8F5B 12%, transparent);
}
.u6-seo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.u6-seo-card-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--u6-accent) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: u6CardIn 0.45s ease forwards;
  animation-delay: var(--d, 0ms);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
@keyframes u6CardIn {
  to { opacity: 1; transform: translateY(0); }
}
.u6-seo-card-chip:hover {
  border-color: color-mix(in srgb, var(--u6-accent) 55%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--u6-accent) 12%, transparent);
}
.u6-seo-card-chip.is-active {
  border-color: var(--u6-accent);
  background: color-mix(in srgb, var(--u6-accent) 10%, var(--paper));
}
.u6-seo-card-chip.is-seen { border-color: color-mix(in srgb, #2F8F5B 45%, transparent); }
.u6-seo-card-n {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--u6-accent);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.u6-seo-card-name {
  flex: 1;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
}
.u6-seo-card-check { flex: none; color: #2F8F5B; margin-top: 2px; }

/* Description popup layered over the titles popup */
.u6-seo-card-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: u6PopFade 0.22s ease;
}
.u6-seo-card-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(2px);
}
.u6-seo-card-pop {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: min(70%, 360px);
  overflow: auto;
  padding: 20px 22px 18px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--u6-accent) 28%, transparent);
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--ink) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--u6-accent) 12%, transparent);
  animation: u6PopUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.u6-seo-card-pop-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  cursor: pointer;
}
.u6-seo-card-pop-x:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
}
.u6-seo-card-detail-n {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--u6-accent);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.u6-seo-card-detail-title {
  margin: 0 36px 10px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  font-family: "Noto Serif Bengali", serif;
  line-height: 1.35;
}
.u6-seo-card-detail-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  font-family: "Noto Sans Bengali", "Hind Siliguri", sans-serif;
}
@keyframes u6PopFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes u6PopUp {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .u6-seo-card-layer,
  .u6-seo-card-pop { animation: none; }
}

/* ---------- Jamal rescue — Apple glass materials ---------- */
.u6-jamal {
  --u6j-ink: #1c1c1e;
  --u6j-muted: #6e6e73;
  --u6j-line: rgba(28, 28, 30, 0.08);
  --u6j-panel: rgba(255, 255, 255, 0.72);
  --u6j-panel-2: rgba(255, 255, 255, 0.5);
  --u6j-brand: var(--brand, #0F6B6B);
  --u6j-brand-deep: #0a5a5a;
  --u6j-ok: #248a3d;
  --u6j-bad: #d70015;
  --u6j-warn: #c93400;
  --u6j-amber: var(--amber, #C48A2A);
  --u6j-blue: var(--secondary, #2F6FAD);
  --u6j-cyan: var(--brand, #0F6B6B);
  --u6j-purple: #5B4FC9;
  --u6j-purple-deep: #4A40B0;
  --u6j-r: 22px;
  --u6j-r-sheet: 26px;
  --u6j-r-btn: 14px;
  --u6j-r-sm: 12px;
  --u6j-fill: rgba(255, 255, 255, 0.48);
  --u6j-stage:
    radial-gradient(80% 70% at 100% 0%, rgba(15, 107, 107, 0.07), transparent 52%),
    radial-gradient(70% 60% at 0% 100%, rgba(91, 79, 201, 0.06), transparent 54%),
    linear-gradient(180deg, #f7f5f1 0%, #eef3f6 52%, #e8f0ee 100%);
  --u6j-stage-line: rgba(28, 28, 30, 0.08);
  --u6j-stage-glow: transparent;
  --u6j-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.14) 100%);
  --u6j-glass-border: rgba(255, 255, 255, 0.58);
  --u6j-glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 0 0 0.5px rgba(28, 28, 30, 0.06),
    0 10px 28px rgba(15, 25, 40, 0.08);
  --u6j-glass-blur: blur(28px) saturate(180%);
  --u6j-card-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 100%);
  --u6j-wall: url("../../assets/unit-6/bg-2.jpg");
  gap: 16px;
  position: relative;
  max-height: none;
  overflow: hidden;
  padding: 18px;
  border-radius: var(--u6j-r);
  color: var(--u6j-ink);
  background: var(--u6j-stage);
  border: 1px solid var(--u6j-stage-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 36px rgba(15, 25, 40, 0.06);
  isolation: isolate;
}
.u6-jamal::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--u6j-wall) center 42% / cover no-repeat;
  opacity: 0.64 !important;
  filter: saturate(0.72) contrast(0.92);
}
.u6-jamal::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 62% 48% at 12% 88%, rgba(15, 107, 107, 0.08), transparent 62%),
    radial-gradient(ellipse 48% 40% at 92% 8%, rgba(91, 79, 201, 0.07), transparent 58%),
    linear-gradient(180deg, rgba(247, 245, 241, 0.46) 0%, rgba(238, 243, 246, 0.32) 46%, rgba(232, 240, 238, 0.52) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='640' fill='none'%3E%3Cdefs%3E%3Cpattern id='g' width='28' height='28' patternUnits='userSpaceOnUse'%3E%3Cpath d='M28 0H0v28' stroke='rgba(15,107,107,0.07)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cg stroke='rgba(15,107,107,0.13)' stroke-width='1'%3E%3Cpath d='M70 460 210 290 370 350 540 150 730 240 910 110'/%3E%3Cpath d='M120 540 290 390 470 450 650 270 840 360'/%3E%3C/g%3E%3Cg fill='rgba(47,111,173,0.2)'%3E%3Ccircle cx='210' cy='290' r='3.5'/%3E%3Ccircle cx='370' cy='350' r='3'/%3E%3Ccircle cx='540' cy='150' r='4'/%3E%3Ccircle cx='730' cy='240' r='3'/%3E%3Ccircle cx='650' cy='270' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, auto, auto, cover;
  background-position: center;
}
.u6-jamal-shell { display: none; }

.u6-jamal > *:not(.u6-jamal-modal):not(.u6-jamal-store) {
  position: relative;
  z-index: 1;
}

.u6-jamal-hud { display: none; }

.u6-jamal-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
}
.u6-jamal-steps span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 0.5px solid rgba(28, 28, 30, 0.08);
  background: var(--u6j-fill);
  color: var(--u6j-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.u6-jamal-steps span > i {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  opacity: 0.5;
  flex: none;
}
.u6-jamal-steps span b {
  font-size: 0.58rem;
  font-weight: 700;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
.u6-jamal-steps span::before,
.u6-jamal-steps span::after { display: none; }
.u6-jamal-steps span.is-on {
  color: #fff;
  background: var(--u6j-brand);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.u6-jamal-steps span.is-on > i,
.u6-jamal-steps span.is-on b { color: rgba(255, 255, 255, 0.92); opacity: 1; }
.u6-jamal-steps span.is-done {
  color: var(--u6j-brand);
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  border-color: color-mix(in srgb, var(--u6j-brand) 16%, transparent);
}
.u6-jamal-steps span.is-done > i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  background: var(--u6j-brand);
  opacity: 1;
}
.u6-jamal-steps span.is-done b { color: var(--u6j-brand); opacity: 0.85; }
@media (max-width: 720px) {
  .u6-jamal-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .u6-jamal-steps span { font-size: 0; gap: 0; padding: 8px 4px; min-height: 40px; }
  .u6-jamal-steps span b { font-size: 0.68rem; opacity: 1; }
  .u6-jamal-steps span > i { display: none; }
  .u6-jamal-steps span.is-done > i { display: inline-grid; }
  .u6-jamal-steps span.is-done b { display: none; }
}

.u6-jamal-alertcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px 18px;
  align-items: center;
  position: relative;
  padding: 18px 16px 18px 18px;
  border-radius: var(--u6j-r);
  overflow: hidden;
  isolation: isolate;
  background: var(--u6j-glass);
  border: 0.5px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  animation: u6JamalAlertIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.u6-jamal-alertcard::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--u6j-bad);
}
.u6-jamal-alertcard::after { display: none; }
.u6-jamal-alertcopy { min-width: 0; }
.u6-jamal-hero {
  position: relative;
  width: 92px;
  height: 92px;
  flex: none;
}
.u6-jamal-live { display: none; }
.u6-jamal-pulse {
  display: block;
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--u6j-bad) 28%, transparent);
  pointer-events: none;
  animation: u6JamalLiveRing 2.8s ease-out infinite;
}
.u6-jamal-alertico {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: 36px;
  height: 36px;
  align-self: start;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--u6j-bad);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
  animation: none;
}
.u6-jamal-alertico--bounce { animation: none; }
.u6-jamal-kicker {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u6j-brand);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-alert {
  margin: 0 0 8px;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -0.022em;
  color: var(--u6j-ink);
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  text-wrap: balance;
}
.u6-jamal-alert-k {
  color: var(--u6j-bad);
  font-weight: 700;
}
.u6-jamal-story {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--u6j-muted);
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  font-weight: 450;
}

/* Live checkout drop simulation */
.u6-jamal-funnel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: u6JamalIn 0.5s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.u6-jamal-sim {
  position: relative;
  padding: 16px 14px 18px;
  border-radius: var(--u6j-r);
  overflow: hidden;
  isolation: isolate;
  background: var(--u6j-glass);
  border: 0.5px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
}
.u6-jamal-sim-chrome {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0 2px;
}
.u6-jamal-sim-chrome i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(160, 210, 230, 0.28);
}
.u6-jamal-sim-chrome i:nth-child(1) { background: #ff7a6a; }
.u6-jamal-sim-chrome i:nth-child(2) { background: #f0b429; }
.u6-jamal-sim-chrome i:nth-child(3) { background: #4ad19a; }
.u6-jamal-sim-board {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) minmax(56px, 1fr) minmax(72px, 0.9fr) minmax(160px, 1.6fr);
  align-items: start;
  gap: 0 4px;
  min-height: 168px;
}
.u6-jamal-sim-node.is-in,
.u6-jamal-sim-node.is-cart,
.u6-jamal-sim-lane.is-to-cart {
  margin-top: 48px;
}
.u6-jamal-sim-node {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.u6-jamal-sim-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 14px rgba(15, 25, 40, 0.1);
}
.u6-jamal-sim-node.is-in .u6-jamal-sim-orb {
  background: var(--u6j-blue);
}
.u6-jamal-sim-node.is-cart .u6-jamal-sim-orb {
  background: var(--u6j-ok);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    0 6px 14px rgba(15, 25, 40, 0.1);
}
.u6-jamal-sim-node.is-pay .u6-jamal-sim-orb {
  background: rgba(28, 28, 30, 0.08);
  border: 1.5px dashed rgba(28, 28, 30, 0.18);
  color: rgba(28, 28, 30, 0.32);
  box-shadow: none;
  opacity: 1;
}
.u6-jamal-sim-node.is-drop .u6-jamal-sim-orb {
  background: var(--u6j-bad);
  border: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 6px 14px rgba(215, 0, 21, 0.16);
  animation: none;
}
.u6-jamal-sim-node strong {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--u6j-ink);
}
.u6-jamal-sim-node.is-in strong { color: var(--u6j-blue); }
.u6-jamal-sim-node.is-cart strong { color: var(--u6j-ok); }
.u6-jamal-sim-node.is-drop strong { color: var(--u6j-bad); }
.u6-jamal-sim-node p {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 550;
  color: var(--u6j-muted);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-sim-node.is-pay p { color: rgba(28, 28, 30, 0.38); }
.u6-jamal-sim-lane {
  position: relative;
  height: 56px;
  align-self: start;
  margin-top: 0;
}
.u6-jamal-sim-pipe {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 25px;
  height: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--u6j-ok) 55%, rgba(28, 28, 30, 0.12));
  box-shadow: none;
}
.u6-jamal-sim-person {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--u6j-blue);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  animation: u6JamalSimToCart 2.2s linear infinite;
  animation-delay: calc(var(--d) * 0.36s);
  pointer-events: none;
}
.u6-jamal-sim-person iconify-icon { display: block; }
.u6-jamal-sim-person.is-drop {
  color: #fff;
  background: var(--u6j-bad);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  animation-name: u6JamalSimToDrop;
  animation-duration: 2.4s;
}
.u6-jamal-sim-fork {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) minmax(72px, auto);
  grid-template-rows: 1fr 1fr;
  align-items: center;
  min-height: 168px;
  gap: 8px 0;
}
.u6-jamal-sim-fork-arm {
  position: relative;
  height: 100%;
  min-height: 64px;
}
.u6-jamal-sim-fork-arm.is-pay { grid-row: 1; grid-column: 1; }
.u6-jamal-sim-fork .is-pay.u6-jamal-sim-node { grid-row: 1; grid-column: 2; }
.u6-jamal-sim-fork-arm.is-drop { grid-row: 2; grid-column: 1; }
.u6-jamal-sim-fork .is-drop.u6-jamal-sim-node { grid-row: 2; grid-column: 2; }
.u6-jamal-sim-fork-arm .u6-jamal-sim-pipe {
  left: 0;
  right: 8px;
  top: 50%;
  margin-top: -2px;
}
.u6-jamal-sim-pipe.is-empty {
  background: none;
  box-shadow: none;
  border-top: 2px dashed rgba(28, 28, 30, 0.18);
  height: 0;
  opacity: 1;
}
.u6-jamal-sim-pipe.is-used {
  background: color-mix(in srgb, var(--u6j-bad) 72%, var(--u6j-ok));
  box-shadow: none;
}
.u6-jamal-sim-fork-arm.is-drop .u6-jamal-sim-person {
  top: calc(50% - 11px);
}
@keyframes u6JamalSimToCart {
  0% { left: 0; opacity: 0; transform: scale(0.75); }
  10% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; }
  100% { left: calc(100% - 22px); opacity: 0; transform: scale(0.8); }
}
@keyframes u6JamalSimToDrop {
  0% { left: 0; opacity: 0; transform: scale(0.75); }
  12% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; }
  100% { left: calc(100% - 22px); opacity: 0; transform: scale(0.85); }
}
@media (max-width: 720px) {
  .u6-jamal-sim-board {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 4px;
  }
  .u6-jamal-sim-node.is-in,
  .u6-jamal-sim-node.is-cart,
  .u6-jamal-sim-lane.is-to-cart {
    margin-top: 0;
  }
  .u6-jamal-sim-lane {
    width: 6px;
    height: 40px;
    justify-self: center;
  }
  .u6-jamal-sim-pipe {
    left: 50%;
    right: auto;
    top: 0;
    width: 5px;
    height: 100%;
    margin-left: -2px;
    background: color-mix(in srgb, var(--u6j-ok) 55%, rgba(28, 28, 30, 0.12));
  }
  .u6-jamal-sim-person {
    left: 50%;
    margin-left: -11px;
    top: 0;
    animation-name: u6JamalSimToCartY;
  }
  .u6-jamal-sim-fork {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 36px auto;
    min-height: 0;
    width: 100%;
    gap: 4px 8px;
  }
  .u6-jamal-sim-fork-arm.is-pay { grid-row: 1; grid-column: 1; }
  .u6-jamal-sim-fork-arm.is-drop { grid-row: 1; grid-column: 2; }
  .u6-jamal-sim-fork .is-pay.u6-jamal-sim-node { grid-row: 2; grid-column: 1; }
  .u6-jamal-sim-fork .is-drop.u6-jamal-sim-node { grid-row: 2; grid-column: 2; }
  .u6-jamal-sim-fork-arm {
    height: 36px;
    min-height: 0;
  }
  .u6-jamal-sim-fork-arm .u6-jamal-sim-pipe {
    left: 50%;
    right: auto;
    top: 0;
    width: 5px;
    height: 100%;
    margin: 0 0 0 -2px;
  }
  .u6-jamal-sim-pipe.is-empty {
    border-top: 0;
    border-left: 2px dashed rgba(28, 28, 30, 0.18);
    width: 0;
    height: 100%;
  }
  .u6-jamal-sim-pipe.is-used {
    background: color-mix(in srgb, var(--u6j-bad) 72%, var(--u6j-ok));
  }
  .u6-jamal-sim-fork-arm.is-drop .u6-jamal-sim-person {
    top: 0;
    animation-name: u6JamalSimToDropY;
  }
}
@keyframes u6JamalSimToCartY {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 22px); opacity: 0; }
}
@keyframes u6JamalSimToDropY {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 22px); opacity: 0; }
}

/* Funnel stats — 3D glass journey cards */
.u6-jamal-funnel {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  display: grid;
  gap: 0;
  box-shadow: none;
  overflow: visible;
  animation: u6JamalIn 0.5s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.u6-jamal-funnel-head,
.u6-jamal-funnel-ico,
.u6-jamal-funnel-copy,
.u6-jamal-funnel-kicker,
.u6-jamal-funnel-title,
.u6-jamal-funnel-xp,
.u6-jamal-funnel-join,
.u6-jamal-funnel-grid { display: none; }
.u6-jamal-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(56px, 88px) minmax(0, 1fr) minmax(56px, 88px) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: 6px 2px 10px;
}
.u6-jamal-fstep {
  --stage: var(--u6j-brand);
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 16px 12px 14px;
  min-height: 0;
  border: 0.5px solid var(--u6j-glass-border);
  border-radius: var(--u6j-r);
  background: var(--u6j-glass);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  overflow: hidden;
  isolation: isolate;
  animation: u6JamalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.08s);
  cursor: default;
  transform: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.u6-jamal-fstep:hover,
.u6-jamal-fstep:active {
  transform: translateY(-2px);
  border-color: var(--u6j-glass-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 0.5px rgba(28, 28, 30, 0.08),
    0 14px 32px rgba(15, 25, 40, 0.1);
}
.u6-jamal-fstep:hover .u6-jamal-fstep-ico {
  transform: none;
}
.u6-jamal-fstep::before { display: none; }
.u6-jamal-fstep::after { display: none; }
.u6-jamal-fstep.is-traffic { --stage: var(--u6j-blue); }
.u6-jamal-fstep.is-ok { --stage: var(--u6j-ok); }
.u6-jamal-fstep.is-ok::after { display: none; }
.u6-jamal-fstep.is-bad {
  --stage: var(--u6j-amber);
  margin-top: 18px;
}
.u6-jamal-fstep.is-bad::after { display: none; }
.u6-jamal-fstep-top,
.u6-jamal-fstep-tag,
.u6-jamal-fstep-idx,
.u6-jamal-fstep-glow,
.u6-jamal-fstep-scene,
.u6-jamal-fstep-meter { display: none; }
.u6-jamal-fstep-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--u6j-brand);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
  transition: none;
  z-index: 1;
}
.u6-jamal-fstep.is-ok .u6-jamal-fstep-ico {
  background: var(--u6j-ok);
}
.u6-jamal-fstep.is-bad .u6-jamal-fstep-ico {
  color: #fff;
  background: var(--u6j-amber);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;
  animation: none;
}
.u6-jamal-fstep-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  width: 100%;
  margin-top: 0;
  justify-items: center;
  position: relative;
  z-index: 1;
}
.u6-jamal-fstep strong {
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--stage);
  line-height: 1.15;
}
.u6-jamal-fstep.is-traffic strong { color: var(--u6j-blue); }
.u6-jamal-fstep.is-ok strong { color: var(--u6j-ok); }
.u6-jamal-fstep.is-bad strong { color: var(--u6j-amber); }
.u6-jamal-fstep p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--u6j-muted);
  font-weight: 500;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-fjoin {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
  width: auto;
  height: 56px;
  margin: 16px 0 0;
  color: transparent;
  background: none;
  border: 0;
  border-radius: 0;
  opacity: 1;
  overflow: visible;
}
.u6-jamal-fjoin-line {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--u6j-brand) 20%, transparent), var(--u6j-brand), var(--u6j-ok));
  box-shadow: none;
}
.u6-jamal-fjoin-dots,
.u6-jamal-fjoin-leak {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.u6-jamal-fjoin-dots i {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--u6j-ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--u6j-ok) 18%, transparent);
  animation: u6JamalTravel 1.8s linear infinite;
}
.u6-jamal-fjoin-dots i:nth-child(2) { animation-delay: 0.6s; }
.u6-jamal-fjoin-dots i:nth-child(3) { animation-delay: 1.2s; }
.u6-jamal-fjoin.is-break {
  height: 92px;
  color: var(--u6j-amber);
  animation: none;
  background: none;
  border: 0;
}
.u6-jamal-fjoin.is-break .u6-jamal-fjoin-line {
  height: 0;
  background: none;
  box-shadow: none;
  border-top: 3px dashed color-mix(in srgb, var(--u6j-amber) 72%, #fff);
  width: 118%;
  transform: rotate(26deg);
  transform-origin: 12% 50%;
}
.u6-jamal-fjoin-leak i {
  position: absolute;
  top: 28px;
  width: 6px;
  height: 8px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: color-mix(in srgb, var(--u6j-amber) 78%, #fff);
  animation: u6JamalDrip 1.5s ease-in infinite;
}
.u6-jamal-fjoin-leak i:nth-child(1) { left: 28%; animation-delay: 0s; }
.u6-jamal-fjoin-leak i:nth-child(2) { left: 48%; animation-delay: 0.4s; }
.u6-jamal-fjoin-leak i:nth-child(3) { left: 66%; animation-delay: 0.85s; }
@media (max-width: 720px) {
  .u6-jamal-alertcard { grid-template-columns: auto 1fr auto; }
  .u6-jamal-flow {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }
  .u6-jamal-fstep.is-bad { margin-top: 0; }
  .u6-jamal-fjoin {
    width: 4px;
    height: 36px;
    margin: 0;
    justify-self: center;
  }
  .u6-jamal-fjoin-line {
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--u6j-brand), var(--u6j-ok));
  }
  .u6-jamal-fjoin-dots i {
    left: 50%;
    margin-top: 0;
    margin-left: -4px;
    animation-name: u6JamalTravelY;
  }
  .u6-jamal-fjoin.is-break {
    height: 48px;
    width: 4px;
  }
  .u6-jamal-fjoin.is-break .u6-jamal-fjoin-line {
    width: 0;
    height: 100%;
    border-top: 0;
    border-left: 3px dashed color-mix(in srgb, var(--u6j-amber) 72%, #fff);
    transform: none;
  }
  .u6-jamal-fjoin-leak i { left: 10px; top: auto; }
  .u6-jamal-fjoin-leak i:nth-child(1) { top: 8px; }
  .u6-jamal-fjoin-leak i:nth-child(2) { top: 20px; }
  .u6-jamal-fjoin-leak i:nth-child(3) { top: 32px; }
}

.u6-jamal-mission {
  position: relative;
  padding: 14px 16px;
  border-radius: var(--u6j-r-sm);
  background: var(--u6j-glass);
  color: var(--u6j-ink);
  border: 0.5px solid var(--u6j-glass-border);
  overflow: hidden;
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
}
.u6-jamal-mission-stamp { display: none; }
.u6-jamal-mission-lab {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u6j-brand);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-mission > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  color: var(--u6j-ink);
  max-width: 46ch;
}
.u6-jamal-mission-meta { display: none; }
.u6-jamal-mission--compact {
  background: var(--u6j-glass);
  border-color: var(--u6j-glass-border);
}
.u6-jamal-mission--compact .u6-jamal-mission-lab { color: var(--u6j-amber); }
.u6-jamal-mission--compact > p { font-family: var(--font-body, "Noto Sans Bengali", sans-serif); }
.u6-jamal-mission--compact .u6-jamal-link {
  display: inline-block;
  margin-top: 10px;
}

/* Step modals — white theme, soft teal/amber accents */
.u6-jamal-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: u6JamalIn 0.22s ease both;
}
.u6-jamal-modal-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: default;
  background: rgba(28, 28, 30, 0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.u6-jamal-modal-scrim[data-mission-dismiss] { cursor: pointer; }
.u6-jamal-modal-dialog {
  --u6m-ink: #1c1c1e;
  --u6m-muted: #6e6e73;
  --u6m-gold: #9a6b16;
  --u6m-teal: var(--brand, #0F6B6B);
  --u6m-line: rgba(28, 28, 30, 0.08);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-height: min(86vh, 640px);
  border-radius: var(--u6j-r-sheet);
  color: var(--u6m-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 28px 80px rgba(15, 25, 40, 0.14);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  animation: u6JamalModalPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}
.u6-jamal-modal-dialog::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 36%, transparent 62%);
  opacity: 0.7;
}
.u6-jamal-modal:has(.u6-jamal-modal-dialog--mission) .u6-jamal-modal-scrim {
  background: rgba(247, 245, 241, 0.28);
}
.u6-jamal-modal-dialog--mission {
  width: min(100%, 560px);
  color: var(--u6m-ink);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 34px 90px rgba(15, 25, 40, 0.16);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}
.u6-jamal-modal-dialog--mission::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%);
}
.u6-jamal-modal-dialog--mission::after { display: none; }
.u6-jamal-modal-dialog--play { width: min(100%, 660px); max-height: min(90vh, 740px); }
.u6-jamal-modal-dialog--win { width: min(100%, 460px); }
@keyframes u6JamalModalPop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.u6-jamal-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--u6m-muted);
  background: rgba(120, 120, 128, 0.14);
  transition: background 0.15s ease, color 0.15s ease;
}
.u6-jamal-modal-x[hidden] { display: none !important; }
.u6-jamal-modal-x:hover {
  color: var(--u6m-ink);
  background: rgba(120, 120, 128, 0.22);
}
.u6-jamal-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 56px 16px 24px;
  border-bottom: 1px solid rgba(28, 28, 30, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}
.u6-jamal-modal-head--center {
  flex-direction: column;
  text-align: center;
  padding: 28px 24px 18px;
  gap: 12px;
}
.u6-jamal-modal-head-main { min-width: 0; flex: 1; }
.u6-jamal-modal-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--u6m-ink);
  font-family: var(--font-ui, "Plus Jakarta Sans", "Noto Sans Bengali", sans-serif);
}
.u6-jamal-mission-head h3 {
  color: var(--u6m-ink);
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-family: var(--font-ui, "Plus Jakarta Sans", "Noto Sans Bengali", sans-serif);
}
.u6-jamal-modal-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px 24px;
  display: grid;
  gap: 16px;
  align-content: start;
  background: transparent;
}
.u6-jamal-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(28, 28, 30, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.34));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.u6-jamal-modal-dialog--mission .u6-jamal-mission-head {
  align-items: flex-start;
  padding: 24px 56px 18px 24px;
  border-bottom: 1px solid rgba(28, 28, 30, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}
.u6-jamal-mission-head-copy { min-width: 0; flex: 1; }
.u6-jamal-mission-head-copy h3 { margin: 0; }
.u6-jamal-mission-kicker {
  margin: 0 0 4px;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--u6m-teal);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-modal-dialog--mission .u6-jamal-modal-x {
  top: 16px;
  right: 16px;
  color: var(--u6m-muted);
  background: rgba(120, 120, 128, 0.14);
  border: 0;
  box-shadow: none;
}
.u6-jamal-modal-dialog--mission .u6-jamal-modal-x:hover {
  color: var(--u6m-ink);
  background: rgba(120, 120, 128, 0.22);
  border: 0;
}
.u6-jamal-modal-dialog--mission .u6-jamal-modal-scroll {
  position: relative;
  z-index: 1;
  padding: 20px 24px 10px;
  gap: 18px;
  background: transparent;
}
.u6-jamal-modal-dialog--mission .u6-jamal-modal-foot {
  position: relative;
  z-index: 1;
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(28, 28, 30, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.32));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.u6-jamal-mission-head { padding-right: 52px; position: relative; z-index: 1; }
.u6-jamal-mission-ico {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--u6j-brand);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.u6-jamal-mission-brief {
  --flow-y: 18px;
  list-style: none;
  margin: 0;
  padding: 18px 2px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 28px;
  position: relative;
  isolation: isolate;
}
.u6-jamal-mission-brief::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: var(--flow-y);
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(28, 28, 30, 0.16) 0 7px,
    transparent 7px 13px
  );
  background-size: 20px 2px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: u6JamalFlowDash 1.6s linear infinite;
}
@keyframes u6JamalFlowDash {
  to { background-position: 20px 0; }
}
.u6-jamal-mission-brief li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  min-height: 0;
  padding: 32px 14px 18px;
  border-radius: var(--u6j-r);
  background: var(--u6j-card-glass);
  border: 1px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  animation: none;
}
.u6-jamal-mission-brief li:nth-child(2) {
  animation: none;
  box-shadow: var(--u6j-glass-shadow);
}
@keyframes u6JamalCardShine {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--glow) 22%, transparent),
      0 0 12px color-mix(in srgb, var(--glow) 28%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 10px 22px rgba(6, 16, 28, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--glow) 42%, transparent),
      0 0 26px color-mix(in srgb, var(--glow) 52%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 10px 22px rgba(6, 16, 28, 0.28);
  }
}
.u6-jamal-mission-brief li em {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--u6j-brand);
  border: 3px solid rgba(247, 245, 241, 0.9);
  box-shadow: 0 8px 16px rgba(15, 25, 40, 0.12);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-mission-brief li:nth-child(1) em,
.u6-jamal-mission-brief li:nth-child(3) em {
  color: #fff;
  border-color: #eef1f4;
  box-shadow: none;
}
.u6-jamal-mission-brief li:not(:last-child)::after {
  content: "›";
  position: absolute;
  z-index: 2;
  top: -6px;
  right: -22px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--u6j-muted);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.u6-jamal-mission-flow-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--u6j-brand);
  background: var(--u6j-card-glass);
  border: 1px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
}
.u6-jamal-mission-brief li:nth-child(1) .u6-jamal-mission-flow-ico { color: var(--u6j-amber); background: color-mix(in srgb, var(--u6j-amber) 12%, #fff); }
.u6-jamal-mission-brief li:nth-child(3) .u6-jamal-mission-flow-ico { color: var(--u6j-ok); background: color-mix(in srgb, var(--u6j-ok) 12%, #fff); }
.u6-jamal-mission-brief li span:last-child {
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--u6j-ink);
  font-family: var(--font-ui, "Plus Jakarta Sans", "Noto Sans Bengali", sans-serif);
}
.u6-jamal-mission-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.u6-jamal-mission-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  min-height: 100%;
  padding: 16px;
  border-radius: var(--u6j-r);
  background: var(--u6j-card-glass);
  border: 1px solid var(--u6j-glass-border);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--u6m-ink);
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
}
.u6-jamal-mission-chip-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.u6-jamal-mission-chip-meta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-mission-chip-copy strong {
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--u6m-ink);
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
}
.u6-jamal-mission-chip.is-time {
  background: var(--u6j-glass);
  border-color: var(--u6j-glass-border);
}
.u6-jamal-mission-chip.is-time .u6-jamal-mission-chip-meta { color: var(--u6j-blue); }
.u6-jamal-mission-chip.is-ok {
  background: var(--u6j-glass);
  border-color: var(--u6j-glass-border);
}
.u6-jamal-mission-chip.is-ok .u6-jamal-mission-chip-meta { color: var(--u6j-ok); }
.u6-jamal-mission-chip-ico {
  flex: none;
  width: 38px;
  height: 38px;
  margin-top: 1px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 16px rgba(15, 25, 40, 0.1);
}
.u6-jamal-mission-chip.is-time .u6-jamal-mission-chip-ico {
  background: var(--u6j-blue);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.u6-jamal-mission-chip.is-ok .u6-jamal-mission-chip-ico {
  background: var(--u6j-ok);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.u6-jamal-mission-chip-ico--time { background: var(--u6j-amber); }
.u6-jamal-mission-chip-ico--ok { background: var(--u6j-brand); }
.u6-jamal-mission-start {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple) 92%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 8px 20px color-mix(in srgb, var(--u6j-purple) 22%, transparent) !important;
  border-radius: var(--u6j-r-btn) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  text-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}
.u6-jamal-mission-start:hover:not(:disabled) {
  filter: none;
  transform: none;
  border-color: rgba(255, 255, 255, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple-deep) 96%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 10px 22px color-mix(in srgb, var(--u6j-purple) 26%, transparent) !important;
}
.u6-jamal-mission-start:active:not(:disabled) {
  transform: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 10px color-mix(in srgb, var(--u6j-purple) 16%, transparent) !important;
}

.u6-jamal-modal-dialog--unlock {
  width: min(100%, 440px);
  max-height: min(86vh, 480px);
}
.u6-jamal-unlock-lead {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--u6m-ink);
  font-family: "Noto Sans Bengali", "Plus Jakarta Sans", sans-serif;
}
.u6-jamal-unlock-chip {
  width: 100%;
}

/* Light modal: nested panels stay soft and readable */
.u6-jamal-modal-dialog .u6-jamal-evidence-lab,
.u6-jamal-modal-dialog .u6-jamal-mission-lab,
.u6-jamal-modal-dialog .u6-sim-q {
  color: var(--u6m-ink);
}
.u6-jamal-modal-dialog .u6-jamal-link {
  color: var(--u6m-teal);
  border-bottom-color: rgba(15, 127, 118, 0.35);
}
.u6-jamal-modal-dialog .u6-jamal-mission,
.u6-jamal-modal-dialog .u6-jamal-mission--compact,
.u6-jamal-modal-dialog .u6-jamal-qblock {
  background: var(--u6j-card-glass);
  border-color: var(--u6j-glass-border);
  color: var(--u6m-ink);
}
.u6-jamal-modal-dialog .u6-jamal-mission {
  background: var(--u6j-glass);
  border-color: var(--u6j-glass-border);
}
.u6-jamal-modal-dialog .u6-jamal-mission > p,
.u6-jamal-modal-dialog .u6-jamal-mission--compact > p {
  color: var(--u6m-muted);
}
.u6-jamal-modal-dialog .u6-jamal-mission-lab {
  color: var(--u6m-gold);
}
.u6-jamal-modal-dialog .u6-jamal-timer {
  background: var(--u6j-glass);
  border-color: var(--u6j-glass-border);
  color: var(--u6m-ink);
  box-shadow: var(--u6j-glass-shadow);
}
.u6-jamal-modal-dialog .u6-btn--ghost {
  background: rgba(255, 255, 255, 0.42);
  color: var(--u6m-ink);
  border-color: rgba(255, 255, 255, 0.7);
}
.u6-jamal-modal-dialog .u6-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.62);
  border-color: color-mix(in srgb, var(--u6j-purple) 18%, rgba(255, 255, 255, 0.7));
}
.u6-jamal-modal-dialog .u6-btn--primary:not(.u6-jamal-mission-start) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple) 92%, transparent);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 8px 20px color-mix(in srgb, var(--u6j-purple) 22%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.u6-jamal-modal-dialog .u6-btn--primary:not(.u6-jamal-mission-start):hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple-deep) 96%, transparent);
}
.u6-jamal-modal-dialog .u6-fb {
  color: var(--u6m-ink);
}
.u6-jamal-modal-dialog .u6-jamal-score {
  max-width: none;
  margin-top: 4px;
  gap: 10px;
}
.u6-jamal-modal-dialog .u6-jamal-score > div {
  background: var(--u6j-card-glass);
  border-color: var(--u6j-glass-border);
}
.u6-jamal-modal-dialog .u6-jamal-score span { color: var(--u6m-muted); }
.u6-jamal-modal-dialog .u6-jamal-score strong { color: var(--u6m-ink); }
.u6-jamal-modal-dialog .u6-jamal-score .is-total {
  background: var(--u6j-card-glass);
  border-color: var(--u6j-glass-border);
}
.u6-jamal-modal-dialog .u6-jamal-score .is-total strong { color: var(--u6m-gold); }

@media (max-width: 560px) {
  .u6-jamal-mission-levels { grid-template-columns: 1fr; }
  .u6-jamal-modal-dialog--play { width: min(100%, 100%); }
  .u6-jamal-modal-head { padding: 18px 46px 14px 18px; }
  .u6-jamal-modal-scroll { padding: 16px 18px; gap: 14px; }
  .u6-jamal-modal-dialog--mission .u6-jamal-mission-head { padding: 18px 46px 14px 18px; }
  .u6-jamal-modal-dialog--mission .u6-jamal-modal-scroll { padding: 14px 16px 6px; gap: 12px; }
  .u6-jamal-modal-dialog--mission .u6-jamal-modal-foot { padding: 14px 16px 16px; }
  .u6-jamal-mission-brief {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 8px;
  }
  .u6-jamal-mission-brief::before {
    left: 50%;
    right: auto;
    top: 12%;
    bottom: 12%;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      180deg,
      rgba(28, 28, 30, 0.16) 0 7px,
      transparent 7px 13px
    );
    background-size: 2px 20px;
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  }
  .u6-jamal-mission-brief li { min-height: 0; padding: 26px 12px 14px; }
  .u6-jamal-mission-brief li span:last-child { font-size: 0.82rem; }
  .u6-jamal-mission-brief li:not(:last-child)::after {
    top: auto;
    bottom: -19px;
    right: 50%;
    margin-right: -8px;
    transform: rotate(90deg);
  }
  .u6-jamal-scoreboard { padding: 0; }
  .u6-jamal-score { gap: 0 16px; }
  .u6-jamal-score > div { padding: 12px 6px 10px; }
  .u6-jamal-score > div:not(:last-child)::after { right: -14px; }
  .u6-jamal-case { padding: 16px 12px 14px; }
  .u6-jamal--play .u6-opts { gap: 10px; }
  .u6-jamal--play .u6-opt { min-height: 62px; padding: 12px; gap: 10px; }
}

.u6-jamal-cta {
  justify-content: stretch;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}
.u6-jamal--intro,
.u6-jamal--play,
.u6-jamal--win {
  overflow: hidden;
  color: var(--u6j-ink);
  background: var(--u6j-stage);
  border-color: var(--u6j-stage-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 36px rgba(15, 25, 40, 0.06);
}
.u6-jamal--intro::before,
.u6-jamal--play::before,
.u6-jamal--win::before {
  display: block;
  opacity: 0.34;
}
.u6-jamal--intro::after,
.u6-jamal--play::after,
.u6-jamal--win::after {
  display: block;
}
.u6-jamal--intro .u6-jamal-steps span,
.u6-jamal--play .u6-jamal-steps span,
.u6-jamal--win .u6-jamal-steps span {
  background: var(--u6j-fill);
  border-color: rgba(28, 28, 30, 0.08);
  color: var(--u6j-muted);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.u6-jamal--intro .u6-jamal-steps span.is-done,
.u6-jamal--play .u6-jamal-steps span.is-done,
.u6-jamal--win .u6-jamal-steps span.is-done {
  color: var(--u6j-brand);
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  border-color: color-mix(in srgb, var(--u6j-brand) 16%, transparent);
}
.u6-jamal--intro .u6-jamal-steps span.is-on,
.u6-jamal--play .u6-jamal-steps span.is-on,
.u6-jamal--win .u6-jamal-steps span.is-on {
  color: #fff;
  background: var(--u6j-brand);
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.u6-jamal--intro .u6-jamal-fstep p {
  color: var(--u6j-muted);
}
.u6-jamal--intro .u6-jamal-cta {
  animation: u6JamalIn 0.5s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.u6-jamal--intro .u6-jamal-cta .u6-btn--game {
  width: 100%;
  justify-content: center;
  min-height: 48px;
}
.u6-jamal-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0.5px solid color-mix(in srgb, var(--u6j-brand) 18%, transparent);
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  color: var(--u6j-brand);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.u6-jamal-badge--teal {
  border-color: color-mix(in srgb, var(--u6j-brand) 18%, transparent);
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  color: var(--u6j-brand);
}
.u6-jamal-det {
  flex: none;
  width: 88px;
  height: 88px;
  object-fit: contain;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 0.5px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: u6DetIdle 4.8s ease-in-out infinite;
}
.u6-jamal--win .u6-jamal-det {
  width: 96px;
  height: 96px;
  margin: 0 0 16px;
  border-color: var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  animation: u6DetBounce 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.u6-jamal-det--bounce { animation: u6DetBounce 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes u6DetBounce {
  0% { transform: translateY(14px) scale(0.86); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes u6DetIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.u6-jamal-level {
  padding: 4px 2px 0;
  display: grid;
  gap: 14px;
}
.u6-jamal-level h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  color: var(--u6j-ink);
}
.u6-jamal--play .u6-jamal-level h3 {
  color: var(--u6j-ink);
}
.u6-jamal-level-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.u6-jamal-pts {
  flex: none;
  font-size: 0.76rem;
  font-weight: 650;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--u6j-amber) 10%, #fff);
  color: #8a5a12;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  border: 0.5px solid color-mix(in srgb, var(--u6j-amber) 22%, transparent);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}

.u6-jamal-timer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--u6j-r-sm);
  background: var(--u6j-glass);
  border: 0.5px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  color: var(--u6j-ink);
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.u6-jamal-timer.is-warn {
  color: var(--u6j-warn);
  border-color: color-mix(in srgb, var(--u6j-amber) 28%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--u6j-amber) 8%, transparent), transparent 70%),
    var(--u6j-glass);
}
.u6-jamal-timer.is-critical,
.u6-jamal-timer.is-dead {
  color: var(--u6j-bad);
  border-color: color-mix(in srgb, var(--u6j-bad) 24%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--u6j-bad) 8%, transparent), transparent 70%),
    var(--u6j-glass);
}
.u6-jamal-timer.is-critical { animation: u6TimerBlink 0.85s ease infinite; }
.u6-jamal-timer.is-done { opacity: 0.7; }
@keyframes u6TimerBlink {
  50% { opacity: 0.78; }
}
.u6-jamal-timer-ring {
  --pct: 100;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 0;
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(var(--u6j-brand) calc(var(--pct) * 1%), rgba(28, 28, 30, 0.08) 0);
  border: 0;
  box-shadow: 0 0 0 0.5px rgba(28, 28, 30, 0.08);
  transition: background 0.95s linear;
}
.u6-jamal-timer.is-warn .u6-jamal-timer-ring {
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(var(--u6j-amber) calc(var(--pct) * 1%), rgba(28, 28, 30, 0.08) 0);
}
.u6-jamal-timer.is-critical .u6-jamal-timer-ring,
.u6-jamal-timer.is-dead .u6-jamal-timer-ring {
  background:
    radial-gradient(circle at center, #fff 56%, transparent 57%),
    conic-gradient(var(--u6j-bad) calc(var(--pct) * 1%), rgba(28, 28, 30, 0.08) 0);
}
.u6-jamal-timer-ring strong {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  line-height: 1;
  color: var(--u6j-ink);
}
.u6-jamal-timer-ring em {
  font-style: normal;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  font-weight: 650;
  color: var(--u6j-muted);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-timer-side { display: grid; gap: 8px; min-width: 0; }
.u6-jamal-timer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 650;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  color: inherit;
}
.u6-jamal-timer-meta strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
  color: var(--u6j-ink);
}
.u6-jamal-timer-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.08);
  overflow: hidden;
}
.u6-jamal-timer-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--u6j-brand-deep), var(--u6j-brand));
  transition: width 0.95s linear, background 0.25s;
}
.u6-jamal-timer.is-warn .u6-jamal-timer-track > i {
  background: linear-gradient(90deg, #c48a2a, var(--u6j-warn));
}
.u6-jamal-timer.is-critical .u6-jamal-timer-track > i,
.u6-jamal-timer.is-dead .u6-jamal-timer-track > i {
  background: linear-gradient(90deg, #c4453c, var(--u6j-bad));
}

.u6-jamal-pickbar {
  display: flex;
  gap: 6px;
  padding: 0 2px;
}
.u6-jamal-pickbar i {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.08);
  transition: background 0.2s;
}
.u6-jamal-pickbar i.is-on {
  background: #22a06b;
}

.u6-jamal-evhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 0;
}
.u6-jamal-evidence-lab {
  margin: 0;
  font-weight: 650;
  font-size: 0.92rem;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  color: var(--u6j-ink);
}
.u6-jamal-link {
  border: 0;
  background: none;
  color: var(--u6j-brand);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--u6j-brand) 28%, transparent);
  padding: 0 0 1px;
  transition: border-color 0.15s, color 0.15s;
}
.u6-jamal-link:hover {
  color: var(--u6j-brand-deep);
  border-bottom-color: currentColor;
}
.u6-jamal-evgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 820px) {
  .u6-jamal-evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.u6-jamal-ev {
  position: relative;
  padding: 14px 12px 12px;
  border-radius: var(--u6j-r-sm);
  background: var(--u6j-glass);
  border: 0.5px solid var(--u6j-glass-border);
  display: grid;
  gap: 8px;
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  transition: transform 0.18s, box-shadow 0.18s;
  animation: u6JamalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.05s + var(--i, 0) * 0.05s);
}
.u6-jamal-ev:hover {
  transform: translateY(-2px);
  border-color: var(--u6j-glass-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 0.5px rgba(28, 28, 30, 0.08),
    0 14px 28px rgba(15, 25, 40, 0.1);
}
.u6-jamal-ev-tag {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--u6j-muted);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-ev--ok {
  border-color: color-mix(in srgb, var(--u6j-ok) 22%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--u6j-ok) 8%, transparent), transparent 72%),
    var(--u6j-glass);
}
.u6-jamal-ev--bad {
  border-color: color-mix(in srgb, var(--u6j-bad) 20%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--u6j-bad) 8%, transparent), transparent 72%),
    var(--u6j-glass);
}
.u6-jamal-ev-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.u6-jamal-ev-top strong {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--u6j-ink);
}
.u6-jamal-ev-top span { opacity: 0.7; color: var(--u6j-muted); }
.u6-jamal-ev--ok .u6-jamal-ev-top strong { color: var(--u6j-ok); }
.u6-jamal-ev--bad .u6-jamal-ev-top strong { color: var(--u6j-bad); }
.u6-jamal-ev--ok .u6-jamal-ev-top span { color: var(--u6j-ok); opacity: 1; }
.u6-jamal-ev--bad .u6-jamal-ev-top span { color: var(--u6j-bad); opacity: 1; }
.u6-jamal-ev p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--u6j-muted);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}

.u6-jamal-qblock {
  padding: 0 2px 4px;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.u6-jamal-qblock-kicker {
  margin: 0 0 6px;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--u6j-muted);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-case {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: var(--u6j-r);
  overflow: hidden;
  isolation: isolate;
  background: var(--u6j-glass);
  border: 0.5px solid var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
}
.u6-jamal-case::before,
.u6-jamal-case::after { display: none; }
.u6-jamal-case > * { position: relative; z-index: 1; }
.u6-jamal--play .u6-sim-q {
  margin: 0;
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--u6j-ink);
}
.u6-jamal--play .u6-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.u6-jamal--play .u6-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 0.5px solid var(--u6j-glass-border);
  background: var(--u6j-glass);
  color: var(--u6j-ink);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s;
}
.u6-jamal--play .u6-opt:hover:not(:disabled) {
  border-color: var(--u6j-glass-border);
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 22px rgba(15, 25, 40, 0.08);
}
.u6-jamal--play .u6-opt:active:not(:disabled) { transform: none; }
.u6-jamal--play .u6-opt.is-ok {
  border-color: color-mix(in srgb, var(--u6j-ok) 28%, transparent);
  background: color-mix(in srgb, var(--u6j-ok) 8%, #fff);
  box-shadow: var(--u6j-glass-shadow);
  animation: u6JamalOkPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.u6-jamal--play .u6-opt.is-dim {
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}
.u6-jamal--play .u6-opt-check {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  color: #fff;
  border: 0;
  background: var(--u6j-brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.u6-jamal--play .u6-opt.is-ok .u6-opt-check {
  color: #fff;
  border: 0;
  background: var(--u6j-ok);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.u6-jamal--play .u6-opt-copy {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--u6j-ink);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal--play .u6-opt-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--u6j-brand);
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  border: 0;
  box-shadow: none;
}
.u6-jamal--play .u6-opt.is-ok .u6-opt-ico {
  color: var(--u6j-ok);
  border: 0;
}
.u6-jamal-case .u6-fb {
  margin: 0;
  text-align: center;
  font-weight: 550;
  color: var(--u6j-ink);
  background: rgba(255, 255, 255, 0.55);
  border: 0.5px solid var(--u6j-glass-border);
}
.u6-jamal--play .u6-jamal-case .u6-fb.is-ok {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
    color-mix(in srgb, var(--u6j-ok) 88%, #0b3d1c);
  border-color: rgba(255, 255, 255, 0.38);
}
.u6-jamal--play .u6-jamal-case .u6-fb.is-bad {
  color: var(--u6j-bad);
  background: color-mix(in srgb, var(--u6j-bad) 8%, #fff);
  border-color: color-mix(in srgb, var(--u6j-bad) 20%, transparent);
}
.u6-jamal--play .u6-jamal-case .u6-fb.is-reveal {
  color: var(--u6j-ink) !important;
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  border-color: color-mix(in srgb, var(--u6j-brand) 18%, transparent);
}

.u6-jamal-decisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .u6-jamal-decisions { grid-template-columns: 1fr; }
  .u6-jamal-timer { grid-template-columns: 1fr; }
  .u6-jamal-timer-ring { justify-self: start; }
}
.u6-jamal-dec {
  --dec: var(--tone, var(--u6j-brand));
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 74px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--u6j-r-sm);
  border: 0.5px solid var(--u6j-glass-border);
  background: var(--u6j-glass);
  color: var(--u6j-ink);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
  transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
  animation: u6JamalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.u6-jamal-dec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dec);
  opacity: 0.9;
  box-shadow: none;
}
.u6-jamal-dec:hover {
  border-color: color-mix(in srgb, var(--dec) 28%, var(--u6j-glass-border));
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 24px rgba(15, 25, 40, 0.08);
}
.u6-jamal-dec.is-on {
  border-color: color-mix(in srgb, var(--dec) 36%, transparent);
  background: color-mix(in srgb, var(--dec) 8%, #fff);
  box-shadow: var(--u6j-glass-shadow);
}
.u6-jamal-dec.is-ok {
  --dec: var(--u6j-ok);
  border-color: color-mix(in srgb, var(--u6j-ok) 28%, transparent);
  background: color-mix(in srgb, var(--u6j-ok) 8%, #fff);
  animation: u6JamalOkPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.u6-jamal-dec.is-bad {
  --dec: var(--u6j-bad);
  border-color: color-mix(in srgb, var(--u6j-bad) 24%, transparent);
  background: color-mix(in srgb, var(--u6j-bad) 8%, #fff);
}
.u6-jamal-dec-ico {
  flex: none;
  width: 38px;
  height: 38px;
  margin-top: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--dec);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
  opacity: 1;
}
.u6-jamal-dec.is-on .u6-jamal-dec-ico {
  color: #fff;
  background: var(--dec);
  border: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.u6-jamal-dec-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  align-content: center;
}
.u6-jamal-dec-cat {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dec);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  line-height: 1.3;
}
.u6-jamal-dec-en {
  font-size: 0.86rem;
  font-weight: 550;
  color: var(--u6j-ink);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.u6-jamal-dec-bn {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--u6j-muted);
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  line-height: 1.4;
}
.u6-jamal-dec-mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  background: rgba(120, 120, 128, 0.12);
  border: 1.5px solid rgba(28, 28, 30, 0.12);
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.u6-jamal-dec.is-on .u6-jamal-dec-mark {
  color: #fff;
  background: var(--dec);
  border-color: var(--dec);
}

.u6-jamal--win {
  gap: 14px;
}
.u6-jamal-winhero {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 0;
  padding: 22px 18px 10px;
  position: relative;
  overflow: visible;
  border-radius: var(--u6j-r);
  background: transparent;
  color: var(--u6j-ink);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: u6JamalIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.u6-jamal-win-rays {
  position: absolute;
  inset: -18% -8% auto;
  height: 64%;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(15, 107, 107, 0.1), transparent 70%);
  opacity: 1;
  animation: none;
  pointer-events: none;
}
@keyframes u6JamalRays {
  to { transform: rotate(360deg); }
}
@keyframes u6JamalLightPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.u6-jamal-winhero::before { display: none; }
.u6-jamal-win-burst { display: none; }
.u6-jamal-win-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--u6j-brand);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 20px rgba(15, 25, 40, 0.06);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  animation: u6JamalIn 0.4s ease both;
}
.u6-jamal-win-badge span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  background: var(--u6j-brand);
}
.u6-jamal-winhero .u6-jamal-kicker {
  color: var(--u6j-brand);
  margin: 0 0 8px;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.u6-jamal-win {
  margin: 0 0 18px;
  font-size: clamp(1.18rem, 2.6vw, 1.52rem);
  font-weight: 650;
  letter-spacing: -0.022em;
  line-height: 1.4;
  color: var(--u6j-ink);
  font-family: var(--font-display, "Noto Serif Bengali", serif);
  position: relative;
  max-width: 24ch;
}
.u6-jamal-scoreboard {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  margin-top: 8px;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.u6-jamal-scoreboard::before,
.u6-jamal-scoreboard::after { display: none; }
.u6-jamal-score {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
  width: 100%;
  margin: 0 0 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.u6-jamal-score > div {
  position: relative;
  padding: 14px 10px 12px;
  border-radius: var(--u6j-r-sm);
  background: var(--u6j-card-glass);
  border: 1px solid var(--u6j-glass-border);
  display: grid;
  gap: 4px;
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
}
.u6-jamal-score > div:not(:last-child)::after {
  content: "›";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--u6j-muted);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.u6-jamal-score span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 1;
  color: var(--u6j-muted);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-score strong {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  color: var(--u6j-ink);
}
.u6-jamal-score .is-total {
  background: var(--u6j-card-glass);
  border-color: var(--u6j-glass-border);
  box-shadow: var(--u6j-glass-shadow);
}
.u6-jamal-score .is-total span { color: var(--u6j-brand); }
.u6-jamal-score .is-total strong { color: var(--u6j-brand); }
.u6-jamal--win .u6-jamal-scoreboard .u6-fb {
  position: relative;
  z-index: 1;
  margin-top: 0;
  width: 100%;
  text-align: center;
  font-weight: 650;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
    color-mix(in srgb, var(--u6j-ok) 88%, #0b3d1c);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 8px 18px color-mix(in srgb, var(--u6j-ok) 22%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.u6-jamal--win .u6-jamal-scoreboard .u6-fb.is-ok {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
    color-mix(in srgb, var(--u6j-ok) 88%, #0b3d1c);
  border-color: rgba(255, 255, 255, 0.38);
}
.u6-jamal-take {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.u6-jamal-take li {
  padding: 13px 14px 13px 16px;
  border-radius: var(--u6j-r-sm);
  background: var(--u6j-glass);
  border: 0.5px solid var(--u6j-glass-border);
  border-left: 3px solid var(--u6j-brand);
  font-size: 0.84rem;
  line-height: 1.5;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  color: var(--u6j-muted);
  box-shadow: var(--u6j-glass-shadow);
  backdrop-filter: var(--u6j-glass-blur);
  -webkit-backdrop-filter: var(--u6j-glass-blur);
}
.u6-jamal-take li strong {
  color: var(--u6j-ink);
  font-weight: 650;
}

.u6-jamal-store {
  position: absolute;
  inset: 12px;
  z-index: 30;
  margin-top: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 0.5px solid var(--u6j-glass-border);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    0 0 0 200vmax rgba(28, 28, 30, 0.28),
    0 24px 56px rgba(15, 25, 40, 0.16);
  animation: u6JamalIn 0.28s ease;
}
.u6-jamal-store-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(246, 246, 247, 0.82);
  border-bottom: 0.5px solid rgba(28, 28, 30, 0.08);
}
.u6-jamal-store-dots { display: flex; gap: 5px; }
.u6-jamal-store-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(26, 42, 58, 0.2);
}
.u6-jamal-store-dots i:nth-child(1) { background: #ff7a6a; }
.u6-jamal-store-dots i:nth-child(2) { background: #f0b429; }
.u6-jamal-store-dots i:nth-child(3) { background: #4ad19a; }
.u6-jamal-store-url {
  flex: 1;
  min-width: 0;
  font-size: 0.7rem;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--u6j-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 9px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--u6j-line);
}
.u6-jamal-store-x {
  border: 0;
  background: transparent;
  color: var(--u6j-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.u6-jamal-store-x:hover {
  color: var(--u6j-ink);
  background: rgba(26, 42, 58, 0.06);
}
.u6-jamal-store-body { padding: 14px; color: var(--u6j-ink); }
.u6-jamal-store-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 650;
  margin-bottom: 12px;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  color: var(--u6j-ink);
}
.u6-jamal-store-brand span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--u6j-brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
}
.u6-jamal-store-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fcfb, #fff);
  border: 1px solid var(--u6j-line);
  margin-bottom: 12px;
}
.u6-jamal-store-art {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--u6j-brand);
  background: rgba(15, 155, 142, 0.1);
  border: 1px solid rgba(15, 155, 142, 0.18);
}
.u6-jamal-store-name {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 650;
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  color: var(--u6j-ink);
}
.u6-jamal-store-price {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--u6j-brand);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-variant-numeric: tabular-nums;
}
.u6-jamal-store-note {
  margin: 0 0 12px;
  font-size: 0.78rem;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
}
.u6-jamal-store-note.is-ok {
  color: var(--u6j-ok);
  background: rgba(31, 154, 100, 0.08);
  border: 1px solid rgba(31, 154, 100, 0.22);
}
.u6-jamal-store-load,
.u6-jamal-store-broken {
  text-align: center;
  padding: 20px 10px;
  display: grid;
  gap: 8px;
  justify-items: center;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  color: var(--u6j-muted);
}
.u6-jamal-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(15, 155, 142, 0.2);
  border-top-color: var(--u6j-brand);
  animation: u6Spin 0.75s linear infinite;
}
@keyframes u6Spin { to { transform: rotate(360deg); } }
.u6-jamal-store-sub {
  margin: 0;
  font-size: 0.75rem;
  color: var(--u6j-warn);
}
.u6-jamal-store-fail {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--u6j-bad);
  font-family: var(--font-ui, "Plus Jakarta Sans", sans-serif);
  font-size: 0.88rem;
}

.u6-jamal .u6-actions {
  gap: 10px;
  padding-top: 2px;
}
.u6-jamal .u6-fb {
  border-radius: 12px;
  font-family: var(--font-body, "Noto Sans Bengali", sans-serif);
  border-color: var(--u6j-line);
  background: #fff;
  color: var(--u6j-ink);
}
.u6-jamal .u6-fb.is-ok {
  background: rgba(31, 154, 100, 0.1);
  border-color: rgba(31, 154, 100, 0.3);
  color: var(--u6j-ok);
}
.u6-jamal .u6-fb.is-bad {
  background: rgba(226, 85, 74, 0.08);
  border-color: rgba(226, 85, 74, 0.3);
  color: var(--u6j-bad);
}
.u6-jamal .u6-fb.is-reveal {
  background: rgba(15, 107, 107, 0.12);
  border-color: rgba(15, 107, 107, 0.28);
  color: #0F4F4F;
}
.u6-jamal.u6-jamal--intro .u6-fb,
.u6-jamal.u6-jamal--play .u6-fb,
.u6-jamal.u6-jamal--win .u6-fb {
  background: rgba(255, 255, 255, 0.62);
  border: 0.5px solid var(--u6j-glass-border);
  color: var(--u6j-ink);
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.55;
  padding: 12px 14px;
  text-shadow: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.u6-jamal.u6-jamal--intro .u6-fb.is-ok,
.u6-jamal.u6-jamal--play .u6-fb.is-ok,
.u6-jamal.u6-jamal--win .u6-fb.is-ok {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
    color-mix(in srgb, var(--u6j-ok) 88%, #0b3d1c);
  border-color: rgba(255, 255, 255, 0.38);
}
.u6-jamal.u6-jamal--win .u6-jamal-scoreboard .u6-fb,
.u6-jamal.u6-jamal--win .u6-jamal-scoreboard .u6-fb.is-ok {
  color: #fff;
  font-weight: 650;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%),
    color-mix(in srgb, var(--u6j-ok) 88%, #0b3d1c);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 8px 18px color-mix(in srgb, var(--u6j-ok) 22%, transparent);
}
.u6-jamal.u6-jamal--intro .u6-fb.is-bad,
.u6-jamal.u6-jamal--play .u6-fb.is-bad,
.u6-jamal.u6-jamal--win .u6-fb.is-bad {
  color: var(--u6j-bad);
  background: color-mix(in srgb, var(--u6j-bad) 8%, #fff);
  border-color: color-mix(in srgb, var(--u6j-bad) 20%, transparent);
}
.u6-jamal.u6-jamal--intro .u6-fb.is-reveal,
.u6-jamal.u6-jamal--play .u6-fb.is-reveal,
.u6-jamal.u6-jamal--win .u6-fb.is-reveal,
.u6-jamal .u6-jamal-ans {
  color: var(--u6j-ink) !important;
  background: color-mix(in srgb, var(--u6j-brand) 8%, #fff);
  border-color: color-mix(in srgb, var(--u6j-brand) 18%, transparent);
  font-weight: 650;
}
.u6-jamal.u6-jamal--play .u6-fb-wrong,
.u6-jamal.u6-jamal--intro .u6-fb-wrong,
.u6-jamal.u6-jamal--win .u6-fb-wrong {
  color: var(--u6j-bad);
}
.u6-opt.is-shake { animation: u6Shake 0.4s ease; }
.u6-btn--game {
  position: relative;
  isolation: isolate;
  letter-spacing: -0.01em;
  border-radius: var(--u6j-r-btn, 14px);
  padding: 12px 20px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple, #5B4FC9) 92%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 8px 20px color-mix(in srgb, var(--u6j-purple, #5B4FC9) 22%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  text-shadow: none;
  transform: none;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.u6-btn--game:hover:not(:disabled) {
  transform: none;
  filter: none;
  border-color: rgba(255, 255, 255, 0.5) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple-deep, #4A40B0) 96%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 10px 22px color-mix(in srgb, var(--u6j-purple, #5B4FC9) 26%, transparent);
}
.u6-btn--game:active:not(:disabled) {
  transform: none;
  filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 10px color-mix(in srgb, var(--u6j-purple, #5B4FC9) 16%, transparent);
}
.u6-btn--game:disabled,
.u6-jamal .u6-btn--primary.u6-btn--game:disabled {
  opacity: 0.42;
  cursor: default;
  color: rgba(255, 255, 255, 0.88) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple, #5B4FC9) 38%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset;
  text-shadow: none;
  filter: none;
  transform: none;
}
.u6-jamal .u6-btn--primary.u6-btn--game {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 8px 20px color-mix(in srgb, var(--u6j-purple) 22%, transparent);
}
.u6-jamal .u6-btn--primary.u6-btn--game:hover:not(:disabled) {
  transform: none;
  filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42) inset,
    0 10px 22px color-mix(in srgb, var(--u6j-purple) 26%, transparent);
}
.u6-jamal .u6-btn--primary.u6-btn--game:active:not(:disabled) {
  transform: none;
  filter: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 4px 10px color-mix(in srgb, var(--u6j-purple) 16%, transparent);
}
.u6-jamal-cta-go {
  display: inline-grid;
  place-items: center;
  margin-left: 2px;
  opacity: 0.9;
}
.u6-jamal .u6-btn--primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple) 92%, transparent);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 8px 20px color-mix(in srgb, var(--u6j-purple) 22%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.u6-jamal .u6-btn--primary:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 100%),
    color-mix(in srgb, var(--u6j-purple-deep) 96%, transparent);
  filter: none;
}
.u6-jamal .u6-btn--primary:focus-visible,
.u6-jamal-dec:focus-visible,
.u6-jamal--play .u6-opt:focus-visible,
.u6-jamal-link:focus-visible {
  outline: 2px solid var(--secondary, #2F6FAD);
  outline-offset: 2px;
}
.u6-jamal .u6-btn--primary:disabled {
  opacity: 0.4;
  box-shadow: none;
}
.u6-jamal .u6-btn--ghost {
  border-radius: var(--u6j-r-btn);
  background: rgba(255, 255, 255, 0.42);
  color: var(--u6j-ink);
  border: 0.5px solid rgba(255, 255, 255, 0.7);
  min-height: 44px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.u6-jamal .u6-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.62);
  border-color: color-mix(in srgb, var(--u6j-brand) 22%, rgba(255, 255, 255, 0.7));
}
.u6-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

@keyframes u6JamalIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes u6JamalAlertIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes u6JamalLiveRing {
  0% { opacity: 0.7; transform: scale(0.96); }
  70% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes u6JamalWarnPulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(194, 65, 12, 0.12), 0 0 0 0 rgba(234, 88, 12, 0); }
  50% { box-shadow: 0 4px 10px rgba(194, 65, 12, 0.12), 0 0 0 6px rgba(234, 88, 12, 0.14); }
}
@keyframes u6JamalOkPop {
  0% { transform: scale(0.98); }
  42% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes u6JamalFill {
  from { width: 0; }
  to { width: var(--fill, 95%); }
}
@keyframes u6JamalCrowd {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes u6JamalDrip {
  0% { transform: translateY(0); opacity: 0.9; }
  70% { transform: translateY(12px); opacity: 0.35; }
  100% { transform: translateY(16px); opacity: 0; }
}
@keyframes u6JamalTravel {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
@keyframes u6JamalTravelY {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}
@keyframes u6JamalDropPulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--u6j-bad) 14%, transparent),
      0 10px 18px color-mix(in srgb, var(--u6j-bad) 22%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 9px color-mix(in srgb, var(--u6j-bad) 22%, transparent),
      0 10px 18px color-mix(in srgb, var(--u6j-bad) 22%, transparent);
  }
}

.u6-sim-host { position: relative; }
.u6-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 8;
}
.u6-confetti-p {
  position: absolute;
  top: -12px;
  left: var(--x, 50%);
  width: var(--s, 8px);
  height: calc(var(--s, 8px) * 0.55);
  border-radius: 2px;
  background: var(--c, #0F6B6B);
  opacity: 0;
  animation: u6ConfettiFall var(--dur, 1.2s) ease-in var(--d, 0s) forwards;
}
.u6-confetti--burst .u6-confetti-p {
  animation-name: u6ConfettiBurst;
}
@keyframes u6ConfettiFall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), 110%, 0) rotate(var(--rot, 180deg)); }
}
@keyframes u6ConfettiBurst {
  0% { opacity: 1; transform: translate3d(0, 40%, 0) scale(0.6) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx, 40px), -30%, 0) scale(1) rotate(var(--rot, 220deg)); }
}
@keyframes u6Shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.u6-tools-drag { gap: 12px; position: relative; }
.u6-tools-drag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.u6-tools-drag-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: "Noto Serif Bengali", serif;
}
.u6-tools-drag-hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper, #fff) 88%, #0F6B6B 12%);
}
.u6-tools-drag-hud-lab {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-tools-drag-hud-n {
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0F6B6B;
}
.u6-tools-drag-hud-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.u6-tools-drag-hud-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  transition: width 0.28s ease;
}
.u6-tools-drag.is-done .u6-tools-drag-hud {
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
  background: color-mix(in srgb, #2F8F5B 12%, var(--paper, #fff));
}
.u6-tools-drag-cats.ts-buckets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 16px;
  align-items: stretch;
  justify-items: center;
}
@media (max-width: 900px) {
  .u6-tools-drag-cats.ts-buckets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .u6-tools-drag-cats.ts-buckets { grid-template-columns: 1fr; }
  .u6-tools-drag-head { flex-direction: column; align-items: stretch; }
  .u6-tools-drag-hud { width: 100%; min-width: 0; }
}
.u6-tools-drag-cat.ts-bucket {
  width: 100%;
  max-width: 200px;
  height: 100%;
  min-height: 220px;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.u6-tools-drag-cat.ts-bucket.is-over {
  transform: translateY(-2px) scale(1.02);
  border: none;
  box-shadow: none;
}
.u6-tools-drag-cat.ts-bucket.is-ready .ts-bucket-head {
  color: #2F8F5B;
}
.u6-tools-drag-cat.ts-bucket.is-miss .ts-bucket-head {
  color: #C45C4A;
}
.u6-tools-drag-cat .ts-bucket-head {
  margin-bottom: 10px;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 2.75rem;
  gap: 6px;
}
.u6-tools-drag-cat .ts-bucket-ico {
  flex-shrink: 0;
  align-self: center;
}
.u6-tools-drag-cat .ts-bucket-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.u6-tools-drag-cat .ts-bucket-rim {
  border-width: 2.5px;
  border-color: var(--bk, #0F6B6B);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 0 color-mix(in srgb, var(--bk, #0F6B6B) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 3px 6px rgba(20, 35, 50, 0.08),
    inset 0 -2px 3px rgba(255, 255, 255, 0.55);
}
.u6-tools-drag-cat .ts-bucket-vessel {
  flex: 1 1 auto;
  min-height: 128px;
  height: 100%;
  border-color: color-mix(in srgb, var(--bk, #0F6B6B) 55%, transparent);
  border-width: 2px;
}
.u6-tools-drag-cat.is-ready .ts-bucket-rim {
  border-color: #2F8F5B;
}
.u6-tools-drag-cat.is-ready .ts-bucket-vessel {
  border-color: color-mix(in srgb, #2F8F5B 50%, transparent);
}
.u6-tools-drag-cat.is-miss .ts-bucket-rim {
  border-color: #C45C4A;
}
.u6-tools-drag-cat.is-miss .ts-bucket-vessel {
  border-color: color-mix(in srgb, #C45C4A 50%, transparent);
}
.u6-tools-drag-cat.is-over .ts-bucket-rim {
  border-color: var(--bk, #0F6B6B);
  transform: scaleX(1.02);
}
.u6-tools-drag-cat.is-over .ts-bucket-vessel {
  border-color: color-mix(in srgb, var(--bk, #0F6B6B) 72%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bk, #0F6B6B) 8%, #f7f8f9) 0%,
      var(--surface-2) 40%,
      #f5f6f8 100%
    );
}
.u6-tools-drag-cat .u6-tools-drag-badge {
  margin-left: auto;
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #2F8F5B 16%, #fff);
  color: #2F8F5B;
}
.u6-tools-drag-drop.ts-bucket-drop,
.u6-tools-drag .ts-bucket-drop.u6-tools-drag-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex: 1;
  min-height: 96px;
  padding: 10px 8px 12px;
  overflow: hidden;
}
.u6-tools-drag-pool.ts-pool {
  margin-bottom: 16px;
  min-height: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.u6-tools-drag-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}
.u6-tools-drag .u6-tools-chip.ts-app {
  width: auto;
  min-width: 84px;
  max-width: 112px;
  padding: 6px 4px;
}
.u6-tools-drag .u6-tools-chip .ts-app-ico {
  background: color-mix(in srgb, var(--app, #0F6B6B) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--app, #0F6B6B) 14%, transparent);
}
.u6-tools-drag .u6-tools-chip .ts-app-name {
  font-size: 0.66rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.u6-tools-drag .u6-tools-chip.is-selected .ts-app-ico {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px color-mix(in srgb, var(--app, #0F6B6B) 55%, transparent);
}
.u6-tools-drag .u6-tools-chip.is-dragging { opacity: 0.4; }
.u6-tools-placed.ts-placed {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  gap: 0;
  padding: 0;
  border-radius: 11px;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.u6-tools-placed-name {
  display: none;
}
.u6-tools-placed.is-ok {
  box-shadow: 0 0 0 2px color-mix(in srgb, #2F8F5B 18%, transparent);
}
.u6-tools-placed.is-bad {
  box-shadow:
    0 0 0 2px color-mix(in srgb, #C45C4A 35%, transparent),
    0 0 0 5px color-mix(in srgb, #C45C4A 12%, transparent);
}
.u6-tools-drag-cat.is-snap {
  animation: u6MatchSnap 0.5s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.u6-tools-drag-cat.is-soft {
  animation: u6MatchSoft 0.35s ease;
}
.u6-tools-drag-cat.is-reject,
.u6-tools-drag.is-shake {
  animation: u6Shake 0.45s ease;
}
.u6-tools-drag-cat-lab {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 650;
  background: color-mix(in srgb, #0F6B6B 10%, var(--paper));
  color: #0F6B6B;
  font-family: "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.u6-tools-drag-cat.is-ready .u6-tools-drag-cat-lab {
  background: color-mix(in srgb, #2F8F5B 12%, var(--paper));
}
.u6-tools-drag-cat.is-miss .u6-tools-drag-cat-lab {
  background: color-mix(in srgb, #C45C4A 10%, var(--paper));
  color: #C45C4A;
}
.u6-tools-drag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, #2F8F5B 18%, transparent);
  color: #2F8F5B;
  flex: 0 0 auto;
}
.u6-tools-drag-drop {
  min-height: 72px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-content: flex-start;
}
.u6-tools-drag-drop.is-over {
  outline: 2px dashed var(--bk, #0F6B6B);
  background: color-mix(in srgb, var(--bk, #0F6B6B) 10%, transparent);
}
.u6-tools-drag-ph {
  width: 100%;
  text-align: center;
  padding: 10px 0;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  font-size: 0.78rem;
  font-weight: 550;
}
.u6-tools-drag .u6-chip.is-dragging { opacity: 0.45; }
.u6-tools-drag .u6-chip.is-placed.is-ok {
  border-color: color-mix(in srgb, #2F8F5B 40%, transparent);
  background: color-mix(in srgb, #2F8F5B 10%, var(--paper, #fff));
}
.u6-tools-drag .u6-chip.is-placed.is-bad {
  border-color: color-mix(in srgb, #C45C4A 40%, transparent);
  background: color-mix(in srgb, #C45C4A 8%, var(--paper, #fff));
}
.u6-tools-drag-rule {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-family: "Noto Sans Bengali", sans-serif;
}

/* Content publishing platform matching assessment */
.u6-plat-match { gap: 14px; position: relative; }
.u6-plat-match-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.u6-plat-match-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-plat-match-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: "Noto Serif Bengali", serif;
  color: var(--ink);
}
.u6-plat-match-hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper, #fff) 88%, #0F6B6B 12%);
}
.u6-plat-match-hud-lab {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-plat-match-hud-n {
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0F6B6B;
}
.u6-plat-match-hud-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.u6-plat-match-hud-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  transition: width 0.28s ease;
}
.u6-plat-match.is-done .u6-plat-match-hud {
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
  background: color-mix(in srgb, #2F8F5B 12%, var(--paper, #fff));
}

/* Left targets + right chip pool */
.u6-plat-match-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(148px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}
.u6-plat-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.u6-plat-match-col-lab {
  margin: 0;
  padding: 0 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.u6-plat-match-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.u6-plat-match-cat {
  display: grid;
  grid-template-columns: minmax(158px, 176px) minmax(0, 1fr);
  gap: 0;
  flex: 1 1 0;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pc, #0F6B6B) 22%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pc, #0F6B6B) 12%, var(--paper, #fff)) 0 4px, var(--surface) 4px);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.u6-plat-match-cat.is-over {
  border-color: color-mix(in srgb, var(--pc, #0F6B6B) 58%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #0F6B6B) 14%, transparent);
  transform: translateY(-1px);
}
.u6-plat-match-cat.is-filled {
  border-color: color-mix(in srgb, var(--pc, #0F6B6B) 34%, transparent);
}
.u6-plat-match-cat.is-miss {
  border-color: color-mix(in srgb, #C45C4A 48%, transparent);
}
.u6-plat-match-cat.is-snap { animation: u6MatchSnap 0.5s cubic-bezier(0.22, 1.2, 0.36, 1); }
.u6-plat-match-cat.is-soft { animation: u6MatchSoft 0.35s ease; }
.u6-plat-match-cat.is-reject,
.u6-plat-match.is-shake,
.u6-plat-match .u6-chip.is-reject { animation: u6Shake 0.45s ease; }
.u6-plat-match-cat-lab {
  margin: 0;
  padding: 12px 10px 12px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--pc, #0F6B6B) 9%, var(--paper, #fff));
  color: var(--pc, #0F6B6B);
  font-family: "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid color-mix(in srgb, var(--pc, #0F6B6B) 14%, transparent);
}
.u6-plat-match-cat-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--pc, #0F6B6B) 14%, var(--paper, #fff));
  color: var(--pc, #0F6B6B);
}
.u6-plat-match-cat-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.u6-plat-match-badge {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, #22c55e 35%, transparent);
  line-height: 0;
}
.u6-plat-match-badge svg {
  display: block;
  color: #fff;
}
.u6-plat-match-drop {
  min-height: 56px;
  height: 100%;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-self: stretch;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 7px,
      color-mix(in srgb, var(--pc, #0F6B6B) 4%, transparent) 7px,
      color-mix(in srgb, var(--pc, #0F6B6B) 4%, transparent) 8px
    );
  transition: background 0.2s ease, outline-color 0.2s ease;
}
.u6-plat-match-drop.is-over {
  outline: 2px dashed var(--pc, #0F6B6B);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--pc, #0F6B6B) 10%, var(--paper, #fff));
}
.u6-plat-match-ph {
  width: 100%;
  text-align: left;
  padding: 4px 2px;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-size: 0.76rem;
  font-weight: 550;
  font-family: "Noto Sans Bengali", sans-serif;
}
.u6-plat-match-col--targets,
.u6-plat-match-col--pool {
  height: 100%;
}
.u6-plat-match-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #0F6B6B 7%, var(--paper, #fff)), color-mix(in srgb, var(--ink) 3%, var(--paper, #fff)));
  border: none;
  box-shadow: none;
}
.u6-plat-match-chip.u6-chip,
.u6-plat-match-pool .u6-chip {
  width: 100%;
  flex: 1 1 0;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 12px;
  border-radius: 11px;
  font-weight: 650;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.u6-plat-match-chip-ico.u6-chip-ico {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--secondary, #2F6FAD) 12%, transparent);
  color: var(--secondary, #2F6FAD);
}
.u6-plat-match .u6-chip.is-placed {
  justify-content: flex-start;
  width: 100%;
  border-color: transparent;
  box-shadow: none;
}
.u6-plat-match .u6-chip.is-placed .u6-plat-match-chip-ico {
  width: 22px;
  height: 22px;
}
.u6-plat-match-pool .u6-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ink) 10%, transparent);
}
.u6-plat-match-pool .u6-chip.is-selected {
  border-color: color-mix(in srgb, #0F6B6B 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #0F6B6B 18%, transparent);
}
.u6-plat-match-pool-empty {
  margin: auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-family: "Noto Sans Bengali", sans-serif;
}
.u6-plat-match .u6-chip.is-placed.is-ok {
  border-color: transparent;
  background: var(--surface);
  box-shadow: none;
}
.u6-plat-match .u6-chip.is-placed.is-bad {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 8%, var(--paper, #fff));
}
.u6-plat-match-rule {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-family: "Noto Sans Bengali", sans-serif;
}
.vl-act-host .u6-plat-match-title { font-size: 1.02rem; }

@media (max-width: 820px) {
  .u6-plat-match-board {
    grid-template-columns: 1fr;
  }
  .u6-plat-match-col--pool { order: -1; }
  .u6-plat-match-cat { flex: 0 0 auto; }
  .u6-plat-match-pool {
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
  }
  .u6-plat-match-chip.u6-chip,
  .u6-plat-match-pool .u6-chip {
    width: auto;
    flex: 1 1 calc(50% - 8px);
  }
}
@media (max-width: 560px) {
  .u6-plat-match-head { flex-direction: column; align-items: stretch; }
  .u6-plat-match-hud { width: 100%; min-width: 0; }
  .u6-plat-match-cat {
    grid-template-columns: 1fr;
  }
  .u6-plat-match-cat-lab {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pc, #0F6B6B) 14%, transparent);
    padding: 10px 12px;
  }
  .u6-plat-match-drop { min-height: 52px; }
}

/* Analytics match — same left/right board shell as platform match */
.u6-analytics { gap: 14px; position: relative; }
.u6-analytics-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.u6-analytics-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-analytics-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: "Noto Serif Bengali", serif;
  color: var(--ink);
}
.u6-analytics-hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper, #fff) 88%, #0F6B6B 12%);
}
.u6-analytics-hud-lab {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-analytics-hud-n {
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0F6B6B;
}
.u6-analytics-hud-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.u6-analytics-hud-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  transition: width 0.28s ease;
}
.u6-analytics.is-done .u6-analytics-hud {
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
  background: color-mix(in srgb, #2F8F5B 12%, var(--paper, #fff));
}
.u6-analytics-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(148px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}
.u6-analytics-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.u6-analytics-col-lab {
  margin: 0;
  padding: 0 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 46%, transparent);
  font-family: "Plus Jakarta Sans", sans-serif;
}
.u6-analytics-cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.u6-analytics-cat {
  display: grid;
  grid-template-columns: minmax(158px, 176px) minmax(0, 1fr);
  gap: 0;
  flex: 1 1 0;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pc, #0F6B6B) 22%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pc, #0F6B6B) 12%, var(--paper, #fff)) 0 4px, var(--surface) 4px);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.u6-analytics-cat.is-over {
  border-color: color-mix(in srgb, var(--pc, #0F6B6B) 58%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #0F6B6B) 14%, transparent);
  transform: translateY(-1px);
}
.u6-analytics-cat.is-filled {
  border-color: color-mix(in srgb, var(--pc, #0F6B6B) 34%, transparent);
}
.u6-analytics-cat.is-miss {
  border-color: color-mix(in srgb, #C45C4A 48%, transparent);
}
.u6-analytics-cat.is-snap { animation: u6MatchSnap 0.5s cubic-bezier(0.22, 1.2, 0.36, 1); }
.u6-analytics-cat.is-soft { animation: u6MatchSoft 0.35s ease; }
.u6-analytics-cat.is-reject,
.u6-analytics.is-shake,
.u6-analytics .u6-chip.is-reject { animation: u6Shake 0.45s ease; }
.u6-analytics-cat-lab {
  margin: 0;
  padding: 12px 10px 12px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--pc, #0F6B6B) 9%, var(--paper, #fff));
  color: var(--pc, #0F6B6B);
  font-family: "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid color-mix(in srgb, var(--pc, #0F6B6B) 14%, transparent);
}
.u6-analytics-cat-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--pc, #0F6B6B) 14%, var(--paper, #fff));
  color: var(--pc, #0F6B6B);
}
.u6-analytics-cat-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.u6-analytics-badge {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, #22c55e 35%, transparent);
  line-height: 0;
}
.u6-analytics-badge svg {
  display: block;
  color: #fff;
}
.u6-analytics-drop {
  min-height: 56px;
  height: 100%;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-self: stretch;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 7px,
      color-mix(in srgb, var(--pc, #0F6B6B) 4%, transparent) 7px,
      color-mix(in srgb, var(--pc, #0F6B6B) 4%, transparent) 8px
    );
  transition: background 0.2s ease, outline-color 0.2s ease;
}
.u6-analytics-drop.is-over {
  outline: 2px dashed var(--pc, #0F6B6B);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--pc, #0F6B6B) 10%, var(--paper, #fff));
}
.u6-analytics-ph {
  width: 100%;
  text-align: left;
  padding: 4px 2px;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-size: 0.76rem;
  font-weight: 550;
  font-family: "Noto Sans Bengali", sans-serif;
}
.u6-analytics-col--targets,
.u6-analytics-col--pool {
  height: 100%;
}
.u6-analytics-pool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #0F6B6B 7%, var(--paper, #fff)), color-mix(in srgb, var(--ink) 3%, var(--paper, #fff)));
  border: 1px solid color-mix(in srgb, #0F6B6B 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
.u6-analytics-chip.u6-chip,
.u6-analytics-pool .u6-chip {
  width: 100%;
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  border-radius: 11px;
  font-weight: 650;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.u6-analytics-pool .u6-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--ink) 10%, transparent);
}
.u6-analytics-pool .u6-chip.is-selected {
  border-color: color-mix(in srgb, #0F6B6B 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, #0F6B6B 18%, transparent);
}
.u6-analytics-pool-empty {
  margin: auto 0;
  text-align: center;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-family: "Noto Sans Bengali", sans-serif;
}
.u6-analytics .u6-chip.is-placed.is-ok {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--surface);
}
.u6-analytics .u6-chip.is-placed.is-bad {
  border-color: color-mix(in srgb, #C45C4A 40%, transparent);
  background: color-mix(in srgb, #C45C4A 8%, var(--paper, #fff));
}
.u6-analytics-rule {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-family: "Noto Sans Bengali", sans-serif;
}
.vl-act-host .u6-analytics-title { font-size: 1.02rem; }

@media (max-width: 820px) {
  .u6-analytics-board {
    grid-template-columns: 1fr;
  }
  .u6-analytics-col--pool { order: -1; }
  .u6-analytics-cat { flex: 0 0 auto; }
  .u6-analytics-pool {
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
  }
  .u6-analytics-chip.u6-chip,
  .u6-analytics-pool .u6-chip {
    width: auto;
    flex: 1 1 calc(50% - 8px);
  }
}
@media (max-width: 560px) {
  .u6-analytics-head { flex-direction: column; align-items: stretch; }
  .u6-analytics-hud { width: 100%; min-width: 0; }
  .u6-analytics-cat {
    grid-template-columns: 1fr;
  }
  .u6-analytics-cat-lab {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--pc, #0F6B6B) 14%, transparent);
    padding: 10px 12px;
  }
  .u6-analytics-drop { min-height: 52px; }
}

.u6-res { gap: 12px; }
.u6-res-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: "Noto Serif Bengali", serif;
}
.u6-res-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: min(58vh, 520px);
  overflow: auto;
}
.u6-res-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #C48A2A 22%, transparent);
  background: color-mix(in srgb, #C48A2A 6%, var(--surface));
  opacity: 0;
  transform: translateY(6px);
  animation: u6CardIn 0.4s ease forwards;
  animation-delay: var(--d, 0ms);
}
.u6-res-n {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, #C48A2A 18%, transparent);
  color: #8A5A12;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.u6-res-name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  font-family: "Noto Sans Bengali", sans-serif;
}
.u6-res-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .u6-seo-card-chip,
  .u6-res-item,
  .u6-jamal-dec,
  .u6-jamal-sim-person,
  .u6-jamal-evidence li { animation: none; opacity: 1; transform: none; }
  .u6-opt.is-shake,
  .u6-jamal-det,
  .u6-jamal-det--bounce,
  .u6-jamal-timer.is-critical,
  .u6-jamal-spinner,
  .u6-jamal-shell-beam,
  .u6-jamal-shell-blob,
  .u6-jamal-hud-live i,
  .u6-jamal-pulse,
  .u6-jamal-alertico,
  .u6-jamal-alertico--bounce,
  .u6-jamal-live,
  .u6-jamal-pill--bad,
  .u6-jamal-win-rays,
  .u6-jamal-win-burst,
  .u6-jamal-modal-dialog--mission::after,
  .u6-jamal--intro::before,
  .u6-jamal--play::before,
  .u6-jamal--win::before,
  .u6-jamal-funnel-join.is-break,
  .u6-jamal-fjoin,
  .u6-jamal-fstep.is-bad .u6-jamal-fstep-tag,
  .u6-jamal-alertcard,
  .u6-jamal-data,
  .u6-jamal-dataline span,
  .u6-jamal-funnel,
  .u6-jamal-fstep,
  .u6-jamal-mission,
  .u6-jamal-modal,
  .u6-jamal-modal-dialog,
  .u6-jamal-cta,
  .u6-jamal-ev,
  .u6-jamal-store,
  .u6-jamal-winhero,
  .u6-jamal--play .u6-opt.is-ok,
  .u6-jamal-dec.is-ok { animation: none; opacity: 1; transform: none; }
  .u6-jamal-fstep-meter > b,
  .u6-jamal-fjoin-dots i,
  .u6-jamal-fjoin-leak i,
  .u6-jamal-fstep.is-bad .u6-jamal-fstep-ico { animation: none; }
  .u6-jamal-dec:hover,
  .u6-jamal-ev:hover,
  .u6-jamal-fstep:hover,
  .u6-jamal-fstep:active,
  .u6-jamal--play .u6-opt:hover,
  .u6-jamal .u6-btn--primary:hover:not(:disabled),
  .u6-jamal .u6-btn--primary.u6-btn--game:hover:not(:disabled),
  .u6-jamal .u6-btn--primary.u6-btn--game:active:not(:disabled),
  .u6-jamal-mission-start:hover:not(:disabled),
  .u6-jamal-mission-start:active:not(:disabled) { transform: none; }
  .u6-jamal-mission-brief::before { animation: none; }
  .u6-jamal-mission-brief li { animation: none; }
  .u6-confetti { display: none; }
  .u6-match-drums .u1-drum.is-snap,
  .u6-match-drums .u1-drum.is-soft,
  .u6-match-drums .u1-drum.is-reject,
  .u6-match-drums .u1-drum-chip.is-reject,
  .u6-match-drums.is-shake,
  .u6-match-drums .ts-placed.is-land,
  .u6-match-fb.is-pop { animation: none; }
  .u6-match-hud-bar > i { transition: none; }
  .u6-tools-drag-cat.is-snap,
  .u6-tools-drag-cat.is-soft,
  .u6-tools-drag-cat.is-reject,
  .u6-tools-drag.is-shake { animation: none; }
  .u6-tools-drag-hud-bar > i { transition: none; }
  .u6-plat-match-cat.is-snap,
  .u6-plat-match-cat.is-soft,
  .u6-plat-match-cat.is-reject,
  .u6-plat-match.is-shake,
  .u6-plat-match .u6-chip.is-reject { animation: none; }
  .u6-plat-match-hud-bar > i { transition: none; }
  .u6-plat-match-cat,
  .u6-plat-match-pool .u6-chip { transition: none; transform: none; }
  .u6-analytics-cat.is-snap,
  .u6-analytics-cat.is-soft,
  .u6-analytics-cat.is-reject,
  .u6-analytics.is-shake,
  .u6-analytics .u6-chip.is-reject { animation: none; }
  .u6-analytics-hud-bar > i { transition: none; }
  .u6-analytics-cat,
  .u6-analytics-pool .u6-chip { transition: none; transform: none; }
  .u6-camp-seq.is-shake,
  .u6-camp-slot.is-snap,
  .u6-aud.is-shake,
  .u6-aud-cat.is-snap,
  .u6-aud-cat.is-soft,
  .u6-aud-cat.is-reject { animation: none; }
  .u6-camp-hud-bar > i,
  .u6-aud-hud-bar > i { transition: none; }
}
@media (max-width: 520px) {
  .u6-jamal { padding: 14px; gap: 12px; }
  .u6-jamal-hero,
  .u6-jamal-det { width: 76px; height: 76px; }
  .u6-jamal-alertico { width: 34px; height: 34px; border-radius: 10px; }
  .u6-jamal-alert { font-size: 0.98rem; }
  .u6-jamal-cta .u6-btn--game { min-height: 48px; }
}

/* ---- Unit 6 campaign sequence + audience analysis ---- */
.u6-camp-seq,
.u6-aud {
  gap: 14px;
  position: relative;
}
.u6-camp-head,
.u6-aud-head {
  display: flex;
  justify-content: flex-end;
}
.u6-camp-hud,
.u6-aud-hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  min-width: 92px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: color-mix(in srgb, var(--paper, #fff) 88%, #0F6B6B 12%);
}
.u6-camp-hud-lab,
.u6-aud-hud-lab {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}
.u6-camp-hud-n,
.u6-aud-hud-n {
  justify-self: end;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #0F6B6B;
}
.u6-camp-hud-bar,
.u6-aud-hud-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
.u6-camp-hud-bar > i,
.u6-aud-hud-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0F6B6B, #2F8F5B);
  transition: width 0.28s ease;
}
.u6-camp-seq.is-done .u6-camp-hud,
.u6-aud.is-done .u6-aud-hud {
  border-color: color-mix(in srgb, #2F8F5B 35%, transparent);
  background: color-mix(in srgb, #2F8F5B 12%, var(--paper, #fff));
}

.u6-camp-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 14px 12px 16px;
  border-radius: 18px;
  border: 1px solid var(--line-mid);
  background: color-mix(in srgb, var(--paper, #fff) 70%, var(--surface));
}
.u6-camp-flow--vert .u6-camp-slot {
  position: relative;
  width: 100%;
  min-height: 58px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 12px 8px 8px;
}
.u6-camp-flow--vert .u6-camp-chip.is-placed {
  flex: 1;
  justify-content: flex-start;
  min-height: 40px;
  font-size: 0.95rem;
  padding: 8px 12px;
}
.u6-camp-flow--vert .u6-camp-ph {
  font-size: 0.92rem;
}
.u6-camp-slot {
  position: relative;
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 8px 10px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.u6-camp-slot.is-over,
.u6-camp-slot.is-snap {
  border-style: solid;
  border-color: #0F6B6B;
  box-shadow: 0 0 0 3px color-mix(in srgb, #0F6B6B 16%, transparent);
}
.u6-camp-slot.is-filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
}
.u6-camp-slot.is-ok {
  border-color: #2F8F5B;
}
.u6-camp-slot.is-miss {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 8%, var(--surface));
}
.u6-camp-num {
  position: static;
  flex-shrink: 0;
  top: auto;
  left: auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: #0F6B6B;
  background: color-mix(in srgb, #0F6B6B 14%, var(--paper, #fff));
  border: 1.5px solid color-mix(in srgb, #0F6B6B 35%, transparent);
}
.u6-camp-ph {
  font-size: 0.78rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.u6-camp-arrow {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
}
.u6-camp-arrow--s {
  height: 22px;
}
.u6-camp-arrow--s iconify-icon,
.u6-camp-arrow--s svg {
  width: 22px;
  height: 22px;
}
.u6-camp-spacer { width: 1px; height: 8px; }
.u6-camp-pool,
.u6-aud-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: var(--surface);
}
.u6-camp-chip,
.u6-aud-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--secondary, #2F6FAD) 36%, transparent);
  background: color-mix(in srgb, var(--secondary, #2F6FAD) 10%, var(--surface));
  color: var(--secondary, #2F6FAD);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.u6-camp-chip-ico { display: inline-flex; color: var(--secondary, #2F6FAD); }
.u6-camp-chip:hover,
.u6-aud-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--secondary, #2F6FAD) 18%, transparent);
}
.u6-camp-chip.is-selected,
.u6-aud-chip.is-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary, #2F6FAD) 40%, transparent);
}
.u6-camp-chip.is-dragging,
.u6-aud-chip.is-dragging { opacity: 0.55; }
.u6-camp-chip.is-placed,
.u6-aud-chip.is-placed {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.82rem;
}
.u6-camp-chip.is-ok {
  border-color: #2F8F5B;
  background: color-mix(in srgb, #2F8F5B 16%, var(--surface));
}
.u6-aud-chip.is-ok {
  border-color: color-mix(in srgb, var(--chip, var(--ink)) 22%, transparent);
  background: var(--surface);
}
.u6-camp-chip.is-bad,
.u6-aud-chip.is-bad {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 14%, var(--surface));
}
.u6-camp-seq.is-shake,
.u6-aud.is-shake { animation: u6Shake 0.52s ease; }
.u6-camp-slot.is-snap,
.u6-aud-cat.is-snap { animation: u6JamalOkPop 0.45s ease; }
.u6-aud-cat.is-reject { animation: u6Shake 0.48s ease; }

.u6-aud-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 14px 12px 8px;
  border-radius: 18px;
  border: 1px solid var(--line-mid);
  background: color-mix(in srgb, var(--paper, #fff) 70%, var(--surface));
}
.u6-aud-hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid var(--secondary, #2F6FAD);
  background: var(--secondary, #2F6FAD);
  color: #fff;
  font-weight: 750;
  font-size: 0.98rem;
}
.u6-aud-hub-ico { color: #fff; display: inline-flex; }
.u6-aud-stem {
  width: 2px;
  height: 18px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.u6-aud-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  position: relative;
}
.u6-aud-branches::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.u6-aud-cat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.u6-aud-drop {
  min-height: 92px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--pc, #0F6B6B) 40%, transparent);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.u6-aud-cat.is-over .u6-aud-drop,
.u6-aud-drop.is-over {
  border-style: solid;
  border-color: var(--pc, #0F6B6B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, #0F6B6B) 16%, transparent);
}
.u6-aud-cat.is-ready .u6-aud-drop {
  border-style: solid;
}
.u6-aud-cat.is-miss .u6-aud-drop {
  border-color: #C45C4A;
  background: color-mix(in srgb, #C45C4A 8%, var(--surface));
}
.u6-aud-ph {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  padding: 18px 4px;
}
.u6-aud-cat-label {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--pc, #0F6B6B) 70%, var(--ink));
  opacity: 0.78;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.u6-aud-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, #22c55e 35%, transparent);
  line-height: 0;
}
.u6-aud-badge svg {
  display: block;
  color: #fff;
}

/* Analytics + campaign sequence + audience: one quiet teal system */
.u6-dd-mini,
.u6-plat-match {
  --paper: var(--surface-2);
}
.u6-dd-mini {
  --dd: #0F6B6B;
  --dd-ok: #2F8F5B;
  --dd-line: color-mix(in srgb, var(--ink) 14%, transparent);
}
.u6-dd-mini .u6-fb.is-ok {
  background: transparent;
  border: 1px solid var(--dd-ok);
  color: #1F6B42;
}
.u6-dd-mini.is-done .u6-analytics-hud,
.u6-dd-mini.is-done .u6-camp-hud,
.u6-dd-mini.is-done .u6-aud-hud {
  border-color: var(--dd-line);
  background: var(--surface);
}
.u6-dd-mini .u6-camp-chip,
.u6-dd-mini .u6-aud-chip {
  border: 1px solid color-mix(in srgb, var(--secondary, #2F6FAD) 28%, transparent);
  background: color-mix(in srgb, var(--secondary, #2F6FAD) 8%, var(--surface));
  color: var(--secondary, #2F6FAD);
  box-shadow: none;
  font-weight: 500;
}
.u6-dd-mini .u6-camp-chip:hover,
.u6-dd-mini .u6-aud-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--secondary, #2F6FAD) 42%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--secondary, #2F6FAD) 12%, transparent);
}
.u6-dd-mini .u6-camp-chip.is-selected,
.u6-dd-mini .u6-aud-chip.is-selected {
  border-color: color-mix(in srgb, var(--secondary, #2F6FAD) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary, #2F6FAD) 18%, transparent);
}
.u6-dd-mini .u6-camp-chip-ico { color: var(--secondary, #2F6FAD); }
.u6-dd-mini .u6-camp-chip.is-ok,
.u6-dd-mini .u6-aud-chip.is-ok {
  border-color: var(--dd-ok);
  background: var(--surface);
  color: var(--secondary, #2F6FAD);
}
.u6-dd-mini .u6-camp-chip.is-bad,
.u6-dd-mini .u6-aud-chip.is-bad {
  border-color: #C45C4A;
  background: var(--surface);
}
.u6-dd-mini .u6-camp-flow,
.u6-dd-mini .u6-aud-tree {
  background: var(--surface);
  border-color: var(--dd-line);
}
.u6-dd-mini .u6-camp-slot,
.u6-dd-mini .u6-aud-drop {
  border: 1px dashed var(--dd-line);
  background: var(--paper, #fff);
  box-shadow: none;
}
.u6-dd-mini .u6-camp-slot.is-filled,
.u6-dd-mini .u6-camp-slot.is-ok,
.u6-dd-mini .u6-aud-cat.is-ready .u6-aud-drop {
  border-style: solid;
  background: var(--paper, #fff);
}
.u6-dd-mini .u6-camp-slot.is-ok {
  border-color: var(--dd-ok);
}
.u6-dd-mini .u6-camp-slot.is-miss,
.u6-dd-mini .u6-aud-cat.is-miss .u6-aud-drop {
  border-color: #C45C4A;
  background: var(--paper, #fff);
}
.u6-dd-mini .u6-camp-num {
  width: 36px;
  height: 36px;
  font-size: 1.15rem;
  font-weight: 800;
  background: color-mix(in srgb, #0F6B6B 14%, var(--paper, #fff));
  border: 1.5px solid color-mix(in srgb, #0F6B6B 35%, transparent);
  color: #0F6B6B;
}
.u6-dd-mini .u6-camp-arrow { color: color-mix(in srgb, var(--ink) 28%, transparent); }
.u6-dd-mini .u6-camp-pool,
.u6-dd-mini .u6-aud-pool {
  background: var(--paper, #fff);
  border-color: var(--dd-line);
}
.u6-dd-mini .u6-aud-hub {
  border-color: var(--secondary, #2F6FAD);
  background: var(--secondary, #2F6FAD);
  color: #fff;
  font-weight: 650;
  font-size: 0.92rem;
}
.u6-dd-mini .u6-aud-hub-ico { color: #fff; }
.u6-dd-mini .u6-aud-stem,
.u6-dd-mini .u6-aud-branches::before { display: none; }
.u6-dd-mini .u6-aud-tree { gap: 12px; padding: 14px; }
.u6-dd-mini .u6-aud-cat-label {
  opacity: 1;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-weight: 650;
  font-size: 0.84rem;
}
.u6-dd-mini .u6-analytics-cat {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--pc, var(--dd)) 22%, transparent);
  box-shadow: none;
}
.u6-dd-mini .u6-analytics-cat-lab {
  background: color-mix(in srgb, var(--pc, var(--dd)) 10%, var(--paper, #fff));
  color: var(--pc, var(--dd));
  border-right-color: color-mix(in srgb, var(--pc, var(--dd)) 16%, transparent);
}
.u6-dd-mini .u6-analytics-cat-ico {
  background: color-mix(in srgb, var(--pc, var(--dd)) 14%, var(--paper, #fff));
  color: var(--pc, var(--dd));
}
.u6-dd-mini .u6-analytics-drop {
  background: var(--paper, #fff);
}
.u6-dd-mini .u6-analytics-pool {
  background: var(--paper, #fff);
  border-color: var(--dd-line);
  box-shadow: none;
}
.u6-dd-mini .u6-analytics .u6-chip,
.u6-dd-mini .u6-analytics-chip.u6-chip {
  background: var(--surface);
  border-color: var(--dd-line);
  color: var(--ink);
  box-shadow: none;
}
.u6-dd-mini .u6-analytics .u6-chip.is-placed.is-ok {
  border-color: var(--dd-ok);
  background: var(--surface);
}

.u6-aud.is-revealed .u6-aud-hud,
.u6-camp-seq.is-revealed .u6-camp-hud,
.u6-analytics.is-revealed .u6-analytics-hud,
.u6-plat-match.is-revealed .u6-plat-match-hud {
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--surface);
}
.u6-key {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #0F6B6B 22%, transparent);
  background: var(--surface);
}
.u6-key-lab {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0F6B6B;
}
.u6-key-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.u6-key-list li {
  display: grid;
  grid-template-columns: minmax(7.5rem, 34%) 1fr;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}
.u6-key-k { font-weight: 700; color: var(--ink); }
.u6-key-v { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.u6-aud-pool-note {
  width: 100%;
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

@media (max-width: 720px) {
  .u6-camp-head,
  .u6-aud-head { justify-content: stretch; }
  .u6-camp-hud,
  .u6-aud-hud { width: 100%; min-width: 0; }
  .u6-aud-branches { grid-template-columns: 1fr; }
  .u6-aud-branches::before { display: none; }
}
@media (max-width: 560px) {
  .u6-camp-flow {
    gap: 4px;
    padding: 12px 8px 14px;
  }
  .u6-camp-flow--vert .u6-camp-slot,
  .u6-camp-slot { min-height: 54px; padding: 8px 10px 8px 8px; }
  .u6-camp-num {
    width: 34px;
    height: 34px;
    font-size: 1.08rem;
  }
  .u6-camp-chip.is-placed { font-size: 0.82rem; padding: 6px 10px; }
}

/* ========== Unit 4 feedback (4.1–4.3) — scoped to u4 classes ========== */
.u4-idle-glow {
  animation: u4IdlePulse 1.15s ease-in-out infinite;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand, #0F6B6B) 28%, transparent),
    0 0 18px color-mix(in srgb, var(--brand, #0F6B6B) 38%, transparent) !important;
  position: relative;
  z-index: 2;
}
.u4-idle-glow[data-idle-hint]::after {
  content: attr(data-idle-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--deep, #1A2332);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes u4IdlePulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

.gc-prob-k {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.u4-tools-table-wrap { margin-top: 14px; }
.u4-tools-table-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
}
.u4-tools-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.u4-tools-table-head,
.u4-tools-table-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 1.4fr;
  gap: 8px;
}
.u4-tools-table-head {
  padding: 10px 14px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 8%, var(--surface-2));
  font-weight: 700;
  font-size: 0.86rem;
}
.u4-tools-table-row {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.u4-tools-table-cat { font-weight: 650; color: var(--ink); }
.u4-tools-table-ex { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.u4-tools-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
}
.u4-tools-chips .brand-chip {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.u4-tools-chips .brand-chip-ico,
.u4-tools-chips .brand-chip-ico .ts-brand-mark {
  width: 16px;
  height: 16px;
}
.u4-tools-chips .brand-chip-ico .ts-brand-mark iconify-icon {
  color: var(--app, #0F6B6B) !important;
}
.u4-multimodal-note { margin-top: 14px; }
@media (max-width: 640px) {
  .u4-tools-table-head,
  .u4-tools-table-row { grid-template-columns: 1fr; }
}

.u4-ld-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.u4-ld-pair > .ld-card { margin: 0; height: 100%; }
.u4-ld-pair > .ld-card + .ld-card { margin-top: 0; }
@media (max-width: 820px) {
  .u4-ld-pair { grid-template-columns: 1fr; }
}

.ts-host--compact .u4v-shell { gap: 8px; }
.ts-host--compact .u4v-lab-head { margin-bottom: 4px; padding-bottom: 6px; }
.ts-host--compact .ts-pool {
  margin-bottom: 8px;
  min-height: 64px;
  gap: 6px;
}
.ts-host--compact .ts-app { width: 64px; padding: 4px 2px; gap: 4px; }
.ts-host--compact .ts-app-ico { width: 40px; height: 40px; border-radius: 12px; }
.ts-host--compact .ts-app-name { font-size: 0.62rem; }
.ts-host--compact .ts-buckets { gap: 12px 14px; }
.ts-host--compact .ts-bucket { min-height: 96px; max-width: 170px; }
/* Mobile-only: class is added in JS when primary pointer has no hover. Desktop mouse DnD is untouched. */
.ts-host--compact.ts-touch-dnd .ts-app,
.ts-host--compact.ts-touch-dnd .ts-placed {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Phone-only tap-select / tap-drop (class set in JS). Tablets, laptops, desktops stay on HTML5 drag. */
.sim-tap-dnd .u1-block.is-selected,
.sim-tap-dnd .dr-reorder-item.is-selected,
.sim-tap-dnd .ts-app.is-selected,
.sim-tap-dnd .mtl-chip.is-selected {
  outline: 2px solid color-mix(in srgb, var(--brand, #0F6B6B) 45%, transparent);
  outline-offset: 1px;
}
.sim-tap-dnd .mtl-slot.is-target,
.sim-tap-dnd .ts-bucket.is-target {
  outline: 2px dashed color-mix(in srgb, var(--bk, var(--brand, #0F6B6B)) 40%, transparent);
  outline-offset: 2px;
}
.sim-tap-dnd .u6-tap-hint {
  margin: 0 0 10px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.ts-touch-ghost {
  position: fixed;
  z-index: 9999;
  margin: 0;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 0.96;
  box-shadow: 0 12px 28px rgba(20, 35, 50, 0.2);
}
body.ts-touch-dragging {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.ts-bucket-ok {
  display: none;
  margin-left: auto;
  color: #1F7A4D;
}
.ts-bucket.is-match {
  background: color-mix(in srgb, #2F8F5B 12%, var(--surface));
  border-radius: 14px;
  padding: 6px 6px 8px;
  outline: 2px solid color-mix(in srgb, #2F8F5B 35%, transparent);
}
.ts-bucket.is-match .ts-bucket-ok { display: inline-flex; }

.lp-run--fit {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
}
@media (max-width: 720px) {
  .lp-run--fit .lp-run-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding-bottom: 6px; }
  .lp-run--fit .lp-story { display: grid !important; }
  .lp-mini { gap: 12px; }
}

.u4-prompt-quote {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 7%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--brand, #0F6B6B) 28%, var(--line));
}
.u4-prompt-quote p { margin: 0; font-weight: 550; }
.u4-ws-lesson { max-width: 46rem; }

.u4-rtcft-page {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: center;
}
.u4-rtcft-page > .ld-card { margin: 0; }
.u4-rtcft-diagram {
  position: relative;
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto;
}
.u4-rtcft-diagram img {
  display: block;
  width: 100%;
  height: auto;
}
.u4-rtcft-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 14%, var(--surface));
  border: 2px solid var(--brand, #0F6B6B);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  z-index: 2;
}
.u4-rtcft-sat {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.2;
  background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: 0 6px 16px rgba(15, 40, 50, 0.06);
}
.u4-rtcft-sat b { font-size: 0.85rem; }
.u4-rtcft-sat--r { top: 0; left: 50%; transform: translateX(-50%); }
.u4-rtcft-sat--c { top: 52px; right: 0; }
.u4-rtcft-sat--task { bottom: 18px; right: 18px; }
.u4-rtcft-sat--tone { bottom: 18px; left: 18px; }
.u4-rtcft-sat--f { top: 52px; left: 0; }
@media (max-width: 820px) {
  .u4-rtcft-page { grid-template-columns: 1fr; }
}

.ps-vibe-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ps-type-pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: #1A2332;
  color: #E8EEF2;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.ps-code-play {
  font-weight: 700;
}
.wp-ai-role {
  margin: 4px 0 0;
  font-size: 0.88rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--brand, #0F6B6B) 80%, var(--ink));
}

/* ---------- সমাপনী প্রশ্নোত্তর + certificate + global leaderboard pages ---------- */
.fe-page {
  min-height: 100vh;
  margin: 0;
  overflow: auto;
}

/* সমাপনী প্রশ্নোত্তর only — not shared with leaderboard (.fe-page) */
html:has(body.fe-exam) {
  background-color: #E8F1F2;
}
body.fe-exam {
  --upnext-primary: var(--brand, #0F6B6B);
  --upnext-secondary: var(--secondary, #2F6FAD);
  --upnext-secondary-soft: var(--secondary-soft, #E8F1F8);
  isolation: isolate;
  background-color: #E8F1F2;
}
body.fe-exam::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 62% at 0% -8%, color-mix(in srgb, var(--brand, #0F6B6B) 32%, transparent), transparent 58%),
    radial-gradient(ellipse 64% 52% at 100% -4%, color-mix(in srgb, #01aeed 24%, transparent), transparent 54%),
    radial-gradient(ellipse 58% 48% at 92% 108%, color-mix(in srgb, #7C5CF5 16%, transparent), transparent 56%),
    linear-gradient(165deg, #EEF6F5 0%, #E6EEF4 48%, #E8F0F3 100%);
}
html[data-theme="dark"]:has(body.fe-exam) {
  background-color: #12181C;
}
html[data-theme="dark"] body.fe-exam {
  background-color: #12181C;
}
html[data-theme="dark"] body.fe-exam::before {
  background:
    radial-gradient(ellipse 72% 58% at 6% -12%, rgba(58, 166, 160, 0.22), transparent 58%),
    radial-gradient(ellipse 58% 48% at 98% 0%, rgba(1, 174, 237, 0.12), transparent 54%),
    radial-gradient(ellipse 52% 42% at 86% 108%, rgba(124, 92, 245, 0.12), transparent 56%),
    linear-gradient(180deg, #151D22 0%, #10161A 100%);
}
.fe-exam .fe-top,
.fe-exam .fe-main {
  position: relative;
  z-index: 1;
}
.fe-exam .fe-top {
  background: color-mix(in srgb, var(--surface, #fff) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: color-mix(in srgb, var(--ink) 6%, transparent);
}
.fe-exam .fe-panel:has(.quiz-card) {
  gap: 18px;
  padding: 26px 26px 20px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 88%, transparent), color-mix(in srgb, #F3FBFA 78%, transparent));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--brand, #0F6B6B) 30%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 28px 64px rgba(36, 59, 85, 0.10),
    0 10px 28px color-mix(in srgb, var(--brand, #0F6B6B) 12%, transparent);
}
.fe-exam .quiz-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2px 0 4px;
}
.fe-exam .quiz-opt {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 5%, transparent);
  border-color: color-mix(in srgb, var(--brand, #0F6B6B) 12%, transparent);
  border-radius: 16px;
}
.fe-exam .quiz-opt.is-pick {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 9%, #fff);
}
.fe-exam .upnext-card {
  border-radius: 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 24px 60px rgba(36, 59, 85, 0.08);
}
.fe-exam .upnext-btn-primary {
  background: var(--brand, #0F6B6B);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
}
.fe-exam .upnext-btn-primary:hover:not([disabled]) {
  background: color-mix(in srgb, var(--brand, #0F6B6B) 88%, #000);
  color: #fff;
}
.fe-exam .upnext-btn-ghost {
  background: color-mix(in srgb, #fff 88%, transparent);
  color: var(--brand, #0F6B6B);
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 18%, transparent);
}
.fe-exam .fe-nav {
  margin-top: 4px;
  padding: 16px 2px 2px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.fe-exam .fe-nav .upnext-btn {
  min-height: 48px;
  min-width: 148px;
  padding: 0 20px;
  font-weight: 700;
  border-radius: 14px;
}
.fe-exam .fe-nav .upnext-btn[disabled] {
  opacity: 0.62;
}
html[data-theme="dark"] .fe-exam .fe-top {
  background: color-mix(in srgb, var(--surface, #161D24) 78%, transparent);
}
html[data-theme="dark"] .fe-exam .fe-panel:has(.quiz-card) {
  background: color-mix(in srgb, var(--surface, #161D24) 82%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 60px rgba(0, 0, 0, 0.28);
}
html[data-theme="dark"] .fe-exam .quiz-opt {
  background: color-mix(in srgb, var(--surface-2, #1C252E) 80%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .fe-exam .quiz-opt.is-pick {
  background: color-mix(in srgb, var(--brand, #3AA6A0) 16%, var(--surface, #161D24));
}
html[data-theme="dark"] .fe-exam .upnext-btn-ghost {
  background: color-mix(in srgb, var(--surface, #161D24) 88%, transparent);
  color: var(--brand, #3AA6A0);
}
html[data-theme="dark"] .fe-exam .fe-nav {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.fe-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, rgba(26, 35, 50, 0.08));
  position: sticky;
  top: 0;
  z-index: 20;
}
.fe-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
}
.fe-top-end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.fe-main {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
}
.fe-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fe-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.fe-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.fe-score {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--brand, #0F6B6B);
}
.fe-actions,
.fe-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.fe-page button.upnext-btn {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.fe-nav {
  justify-content: space-between;
}
.fe-nav .upnext-btn[disabled],
.fe-actions .upnext-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.fe-quiz-head {
  display: grid;
  gap: 8px;
}
.fe-progress {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--brand, #0F6B6B);
}
.fe-progress-bar {
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand, #0F6B6B) 12%, var(--surface-2, #eee));
  overflow: hidden;
}
.fe-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand, #0F6B6B);
}
.fe-pass {
  text-align: center;
  align-items: center;
}
.fe-pass .fe-lead,
.fe-pass .fe-actions {
  max-width: 36rem;
}

.cert-sheet {
  margin-top: 28px;
  padding: 8px;
}
.cert-sheet-inner {
  position: relative;
  padding: 36px 40px 32px;
  border-radius: 18px;
  text-align: center;
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, #F5C542 16%, transparent), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--brand, #0F6B6B) 12%, transparent), transparent 50%),
    var(--surface, #fff);
  border: 2px solid color-mix(in srgb, var(--brand, #0F6B6B) 28%, #d4b45a);
  box-shadow: 0 10px 32px rgba(15, 40, 50, 0.08);
}
.cert-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  object-fit: contain;
}
.cert-kicker {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.cert-heading {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--brand, #0F6B6B);
}
.cert-course {
  margin: 4px 0 18px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: #01aeed;
}
.cert-line {
  margin: 0;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.cert-name {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: var(--ink);
}
.cert-body {
  margin: 0 auto;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.cert-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand, #0F6B6B);
}

.fe-main.fe-main--wide {
  width: min(900px, calc(100% - 24px));
}
.cert-v2-capture {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 842px;
  height: 595px;
  overflow: hidden;
  pointer-events: none;
}
.cert-name-modal[hidden] { display: none !important; }
.cert-name-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
}
.cert-name-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 35, 50, 0.38);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.cert-name-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 28px));
  padding: 28px 24px 22px;
  border-radius: 22px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, rgba(26, 35, 50, 0.08));
  box-shadow: 0 24px 56px rgba(26, 35, 50, 0.16);
  text-align: left;
}
.cert-name-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 35, 50, 0.05);
  color: var(--ink);
  cursor: pointer;
}
.cert-name-modal-kicker {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand, #0F6B6B);
}
.cert-name-modal-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  padding-right: 28px;
}
.cert-name-modal-lead {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.cert-name-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  text-align: left;
  margin: 0;
}
.cert-name-label {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--ink);
}
.cert-name-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--brand, #0F6B6B) 22%, transparent);
  background: color-mix(in srgb, #fff 92%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.cert-name-input:focus {
  outline: 2px solid color-mix(in srgb, var(--brand, #0F6B6B) 45%, transparent);
  outline-offset: 1px;
}
.cert-name-input[aria-invalid="true"] {
  border-color: #c45c5c;
}
.cert-name-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #b42318;
}
.cert-name-submit {
  margin-top: 8px;
  justify-content: center;
  width: 100%;
}
body.cert-name-modal-open {
  overflow: hidden;
}

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }
  html,
  body {
    background: #fff !important;
  }
  .fe-top,
  .fe-main > .fe-panel,
  .fe-main > .upnext-card,
  .cert-name-form,
  .cert-name-modal {
    display: none !important;
  }
  .fe-main,
  .fe-main.fe-main--wide {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .cert-v2-capture {
    position: static;
    left: auto;
    overflow: visible;
    pointer-events: auto;
  }
  .cert-v2 {
    margin: 0 auto;
  }
  .cert-sheet {
    margin: 0;
    padding: 0;
  }
  .cert-sheet-inner {
    box-shadow: none;
    min-height: 160mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .fe-top {
    padding: 10px 12px;
  }
  .fe-top .layout-top-partner {
    display: none;
  }
  .fe-main {
    width: calc(100% - 24px);
    padding-top: 18px;
  }
  .fe-exam .fe-panel:has(.quiz-card) {
    padding: 18px 16px 14px;
    border-radius: 22px;
  }
  .fe-nav,
  .fe-actions {
    flex-direction: column;
  }
  .fe-nav .upnext-btn,
  .fe-actions .upnext-btn {
    width: 100%;
  }
  .cert-sheet-inner {
    padding: 24px 16px;
  }
}

/* ============================================================
   Mobile / tablet pass — do not change ≥1024px (laptop / PC).
   All rules below are max-width only.
   ============================================================ */

@media (max-width: 1023px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
  }
  body {
    max-width: 100%;
  }

  .app-shell,
  .layout-body,
  .content-column,
  .stage-wrap,
  .stage-root,
  #stage,
  .stage-shell,
  .stage-scroll,
  .sidebar,
  .header-titles,
  .header-actions {
    min-width: 0;
  }

  body[data-layout="2"] {
    --l2-sticky-top: 60px;
    --l2-sticky-gap: 8px;
    --l2-footer-h: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  body[data-layout="2"] #layoutTop,
  body[data-layout="2"] .layout-top {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  .layout-top-brand { min-width: 0; }
  .nu-logo--top { width: 44px; height: 44px; }
  .layout-top-partner {
    height: 32px;
    max-width: min(110px, 28vw);
  }

  .layout-banner { min-height: 132px; }
  body[data-layout="2"] #layoutBanner { min-height: 132px; }
  .layout-banner-inner { padding: 12px 14px; }
  .layout-banner-title {
    font-size: clamp(1.12rem, 4.2vw, 1.45rem);
    max-width: 100%;
  }

  body[data-layout="2"] #appHeader {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  .header-actions { gap: 4px; }
  .header-icon-btn,
  .theme-toggle {
    width: 34px;
    height: 34px;
  }
  .font-scale,
  .font-scale-trigger {
    height: 34px;
  }
  .font-scale-trigger { min-width: 48px; }
  .points-counter {
    max-width: none;
    width: max-content;
    height: 34px;
    padding: 0 8px 0 6px;
    gap: 4px;
  }
  .points-counter-label { display: none; }
  .app-header .header-progress {
    min-width: 48px;
    max-width: 64px;
  }

  body[data-layout="2"] #layoutBody {
    padding: 8px 12px 0;
    gap: 8px;
  }

  #sidebar.sidebar {
    width: min(320px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px);
  }

  body[data-layout="2"] #contentColumn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .stage-shell {
    padding: 14px 14px 18px;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .stage-scroll {
    min-width: 0;
    overflow-wrap: break-word;
  }

  body[data-layout="2"] #contentColumn > footer,
  body[data-layout="2"] #contentColumn > .content-nav-foot {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .footer-nav-inner {
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 52px;
  }
  .footer-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
  #beatDots {
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 36px;
    overflow: hidden;
  }

  .ai-chat-panel {
    right: 12px;
    width: min(380px, calc(100vw - 24px));
    bottom: calc(var(--l2-footer-h, 56px) + 12px);
    height: min(560px, calc(100dvh - var(--l2-footer-h, 56px) - 24px));
  }
  .ai-tutor-fab {
    bottom: calc(var(--l2-footer-h, 56px) + 12px);
  }

  .summary-modal,
  .guide-modal {
    padding: 12px;
  }

  .stage-scroll img,
  .ld-media img,
  .ps-img-frame img {
    max-width: 100%;
    height: auto;
  }
  .vl-frame video,
  .cinema-frame video,
  .lp-cinema-frame video {
    max-width: 100%;
  }
  .stage-scroll pre,
  .stage-scroll table,
  .sim-code-editor {
    max-width: 100%;
    overflow-x: auto;
  }

  .loop-ring-stage {
    width: min(280px, 100%);
    height: auto;
    aspect-ratio: 1;
  }
  .obj-orbit-wrap {
    width: min(300px, 100%);
    height: auto;
    aspect-ratio: 1;
  }
  .u4v-host,
  .u6-sim-host,
  .gc-compare,
  .ld-card,
  .quiz-card,
  .sim-pair {
    max-width: 100%;
    min-width: 0;
  }

  .fe-top {
    padding: 10px 14px;
    gap: 8px;
    min-width: 0;
  }
  .fe-brand { min-width: 0; }
  .fe-top .layout-top-partner {
    max-width: 120px;
    height: 32px;
  }
  .fe-main {
    width: min(760px, calc(100% - 24px));
  }
}

@media (max-width: 1023px) and (max-height: 500px) {
  .layout-banner,
  body[data-layout="2"] #layoutBanner { min-height: 72px; }
  body[data-layout="2"] { --l2-sticky-top: 48px; }
  .ai-chat-panel {
    height: min(420px, calc(100dvh - var(--l2-footer-h, 56px) - 16px));
  }
}

@media (max-width: 720px) {
  .header-crumb-unit,
  .header-crumb-unit + .header-crumb-sep { display: none; }

  .dg-lens-split,
  .rtcft-cloud-grid,
  .u2-li-feat-rail,
  .u2-pfl-areas,
  .u6-smm-plats,
  .u6-smm-contrast-row,
  .u6-jamal-mission-levels,
  .u6-jamal--play .u6-opts,
  .u6-aud-branches,
  .u6-tools-mock--dash,
  .et-cats,
  .rw-gen-grid,
  .rw-mini-grid {
    grid-template-columns: 1fr;
  }
  .u6-smm-plats {
    grid-template-rows: none;
    min-height: 0;
  }
  .u6-aud-branches::before { display: none; }

  .cinema-frame {
    min-height: min(280px, calc(100dvh - 160px));
  }
  .obj-cinema {
    min-height: 0;
  }
  .welcome-visual { width: min(78vw, 260px); }
}

@media (max-width: 639px) {
  body[data-layout="2"] #layoutTop,
  body[data-layout="2"] .layout-top {
    padding-left: 10px;
    padding-right: 10px;
  }
  .nu-logo--top { width: 36px; height: 36px; }
  .layout-top-partner { display: none; }

  .layout-banner,
  body[data-layout="2"] #layoutBanner { min-height: 108px; }

  .header-icon-btn,
  .theme-toggle {
    width: 32px;
    height: 32px;
  }
  .font-scale { height: 32px; }
  .points-counter {
    max-width: none;
    width: max-content;
    height: 32px;
    padding: 0 8px 0 6px;
  }
  .app-header .header-progress {
    min-width: 40px;
    max-width: 48px;
  }
  .header-progress-track { display: none; }

  body[data-layout="2"] #layoutBody {
    padding: 6px 8px 0;
  }
  .stage-shell {
    padding: 12px 12px 16px;
  }

  .footer-nav-inner {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .footer-btn {
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 12px;
  }

  .ai-chat-panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: calc(var(--l2-footer-h, 56px) + 8px);
  }

  html[data-font-scale="xl"] .header-actions .header-icon-btn,
  html[data-font-scale="lg"] .header-actions .header-icon-btn {
    width: 32px;
    height: 32px;
  }

  .quiz-opt { min-height: 44px; }
  .u6-opt { min-height: 44px; }

  .cert-sheet-inner { padding: 20px 14px; }
  .lb-cols,
  .lb-row {
    grid-template-columns: 36px minmax(0, 1fr) 72px;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 480px) {
  #btnBack {
    font-size: 0;
    gap: 0;
    min-width: 44px;
    padding-inline: 12px;
  }
  #btnBack iconify-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .twin-tab { padding: 10px 12px; gap: 8px; }
  .loop-ring-node { width: 72px; padding: 6px 4px; }
  .loop-ring-txt { font-size: 9px; }

  .u6-hub {
    width: 100%;
    min-height: 0;
  }
}

@media (max-width: 400px) {
  .header-crumb-home span { display: none; }
  .app-header .header-progress { display: none; }
}