/* Per-screen layout (spec §4). Shared component classes live in components.css. */

/* --- entry / phase full-bleed screens --- */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#app.entry {
  position: relative;
  overflow: hidden;
  background: #fff;
}
#app.entry::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 22%, rgba(224, 225, 255, 0.82), transparent 42%),
    radial-gradient(circle at 14% 94%, rgba(255, 255, 255, 0.68), transparent 42%),
    linear-gradient(180deg, #e0e1ff 0%, #ffffff 58%, #ffffff 100%);
  animation: entry-bg-hue 3s ease-in-out infinite alternate;
}
#app.entry::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 360 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
:root.dark #app.entry {
  background: #000;
}
:root.dark #app.entry::before {
  background:
    radial-gradient(circle at 76% 24%, rgba(0, 11, 66, 0.92), transparent 38%),
    radial-gradient(circle at 20% 96%, rgba(0, 0, 0, 0.72), transparent 36%),
    linear-gradient(180deg, #000b42 0%, #000000 60%, #000000 100%);
}
:root.dark #app.entry::after {
  opacity: 0.16;
  mix-blend-mode: screen;
}
#app.entry > * {
  position: relative;
  z-index: 1;
}
#app.entry .body {
  background: transparent;
}
#app.entry .tg-bottom {
  background: transparent;
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#app.entry-cold-app .tg-bottom {
  padding: 10px 38px;
  padding-bottom: calc(28px + var(--safe-bottom));
}
#app.entry-cold-app .body {
  padding-bottom: 12px;
}
#app.entry-cold-app .mainbtn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 68px;
  border: none;
  border-radius: 30px;
  corner-shape: squircle;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600% 600%;
  box-shadow: none;
  font: 500 20px/1.35 -apple-system, 'Onest', system-ui;
  animation: entry-cta-gradient 10.67s linear infinite;
}
#app.entry-cold-app .mainbtn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}
#app.entry-cold-app .mainbtn span {
  position: relative;
  z-index: 1;
}
:root.dark #app.entry-cold-app .mainbtn::after {
  background: rgba(0, 0, 0, 0.22);
}

.hero h1 {
  font: 700 32px/1.1 -apple-system, 'Onest', system-ui;
  letter-spacing: -0.02em;
  margin: 0 2px 10px;
  text-align: center;
}
.hero p {
  font: 400 17px/1.5 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  margin: 0 2px 14px;
}
.disclaimer {
  background: var(--surface-grouped);
  border-radius: var(--r-card);
  padding: 14px 16px;
  font: 400 14px/1.45 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  margin: 6px 0 16px;
}
.phase-icon-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--phase-accent) 16%, transparent);
  color: var(--phase-accent);
  margin: 8px 2px 18px;
}
.phase-icon-lg i {
  width: 30px;
  height: 30px;
}
/* Quiz verdict (owner #6): glyph + Верно/Неверно on ONE line; a wrong verdict tints the glyph red
   (var(--system-red)) while a correct one keeps the default green --phase-accent. Only the glyph is
   tinted — the heading text stays neutral. */
.verdict-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
}
.verdict-row .phase-icon-lg,
.verdict-row h1 {
  margin: 0;
}
.verdict-row.wrong {
  --phase-accent: var(--system-red);
}
/* entry hero head (D055): the monogram + course title on ONE line (mirrors the quiz .verdict-row / the
   offer .offer-head), with the monogram scaled down from its stacked 72px to sit inline. */
.hero-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 16px;
  text-align: center;
}
.hero-head .mono {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--phase-accent), #0a84ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.hero-head .mono i {
  width: 26px;
  height: 26px;
}
.hero-head h1 {
  margin: 0;
}

.big-title {
  text-align: center;
}

.entry-hero {
  text-align: center;
}
.entry-cold {
  justify-content: flex-end;
  gap: 176px;
  padding-bottom: 2px;
}
.entry-cold .entry-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.entry-lottie {
  width: 112px;
  height: 112px;
  margin-bottom: 2px;
  color: #fff;
}
.entry-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.entry-cold h1 {
  font-size: 38px;
  line-height: 1.07;
  margin: 0;
  letter-spacing: -0.03em;
}
.entry-cold .entry-title-fit {
  font-size: 32px;
  line-height: 1.07;
  white-space: nowrap;
}
.entry-cold .entry-sub {
  color: var(--text);
  font: 500 20px/1.35 -apple-system, 'Onest', system-ui;
  margin: 0;
}
.entry-cold .entry-note {
  color: var(--text);
  font: 500 20px/1.35 -apple-system, 'Onest', system-ui;
  margin: 0;
  opacity: 0.4;
}
.entry-cold .entry-note-empty {
  visibility: hidden;
}

/* --- entry: the ordered path into the course ---------------------------------------------------
   The entry hero is bottom-anchored with a 176px void between the title and the note. That void was
   fine when the screen said one line; it cannot hold the three rungs that now say WHERE the course
   starts, so a hero carrying them trades the void for real content. */
.entry-cold.entry-with-steps {
  gap: 26px;
}
.entry-cold.entry-with-steps .entry-lottie {
  width: 84px;
  height: 84px;
}
.entry-cold.entry-with-steps h1 {
  font-size: 32px;
}
.entry-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left; /* a sequence reads left-aligned even inside a centred hero */
}
.entry-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
:root.dark .entry-step {
  background: rgba(255, 255, 255, 0.07);
}
/* the rung the user is standing on: opaque and outlined, so "you are here" survives a glance */
.entry-step.on {
  background: var(--bg-elevated);
  box-shadow: 0 0 0 1.5px var(--phase-accent) inset;
}
.entry-step:not(.on):not(.done) {
  opacity: 0.62;
}
.es-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  background: var(--surface-grouped);
}
.entry-step.on .es-num {
  color: #fff;
  background: var(--phase-accent);
}
.entry-step.done .es-num {
  color: #fff;
  background: var(--system-green);
}
.es-text {
  font: 500 15px/1.3 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.es-detail {
  display: block;
  margin-top: 3px;
  font: 500 13px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--phase-accent);
}
/* the note drops to a supporting size once the rungs carry the message */
.entry-cold.entry-with-steps .entry-note {
  font: 500 14px/1.4 -apple-system, 'Onest', system-ui;
  opacity: 0.55;
}

@keyframes entry-bg-hue {
  to {
    filter: hue-rotate(34deg);
  }
}
@keyframes entry-cta-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* --- map --- */
#app.map-screen .body {
  padding-top: 36px;
}
.progress-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 4px 9px;
}
#app.map-screen .progress-h {
  justify-content: center;
  gap: 12px;
  margin: 0 0 34px;
  transform: scale(1.1);
  transform-origin: center;
}
.p-count {
  font: 500 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.pips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 2px 18px;
}
#app.map-screen .pips {
  margin: 0;
  gap: 5px;
}
.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface-grouped);
}
.pip.done {
  background: var(--phase-accent);
}
.pip.current {
  background: var(--phase-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--phase-accent) 28%, transparent);
}
#app.map-screen .glist {
  background: #f2f4ff;
  border-radius: 50px;
  corner-shape: squircle;
  padding: 8px 15px;
}
:root.dark #app.map-screen .glist {
  background: var(--surface-grouped);
}
#app.map-screen .row {
  padding-left: 0;
  padding-right: 0;
}
#app.map-screen .row.current {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  overflow: hidden;
  background: transparent;
}
#app.map-screen .row.current::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  border-radius: 0;
  background: linear-gradient(90deg, #92d7fc 0%, #35c759 25%, #92d7fc 50%, #35c759 75%, #92d7fc 100%);
  background-size: 200% 100%;
  animation: map-current-gradient 8.4s linear infinite;
}
#app.map-screen .row.current::before,
#app.map-screen .row.current + .row::before {
  display: none;
}
#app.map-screen .row + .row::before {
  display: none;
}
#app.map-screen .row.current > * {
  position: relative;
  z-index: 1;
}
#app.map-screen .row .ctext .t {
  color: #000;
  font: 500 17px/1.25 -apple-system, 'Onest', system-ui;
}
:root.dark #app.map-screen .row .ctext .t {
  color: var(--text);
}
#app.map-screen .row.done .ctext .t {
  color: #000;
}
:root.dark #app.map-screen .row.done .ctext .t {
  color: var(--text);
}
#app.map-screen .row.quiz.q-passed .ctext .t {
  color: #000;
}
:root.dark #app.map-screen .row.quiz.q-passed .ctext .t {
  color: #fff;
}
#app.map-screen .row.quiz.q-passed .ctext .m {
  display: flex;
  color: #35c759;
  font-size: 14px;
  font-weight: 500;
}
#app.map-screen .row.current .ctext .t {
  color: #fff;
  font-weight: 500;
}
#app.map-screen .row.current .right-now-lottie svg path,
#app.map-screen .row.current .right-now-lottie svg polygon,
#app.map-screen .row.current .right-now-lottie svg rect,
#app.map-screen .row.current .right-now-lottie svg circle {
  fill: #fff !important;
}
#app.map-screen .row.todo .ctext .t {
  color: #000;
  opacity: 0.4;
}
:root.dark #app.map-screen .row.todo .ctext .t {
  color: var(--text);
}
:root.dark #app.map-screen .row.todo .lock-icon {
  filter: brightness(0) invert(1);
  opacity: 0.2;
}
:root.dark #app.map-screen .row.todo .question-lottie.muted {
  opacity: 0.2;
}
:root.dark #app.map-screen .row.todo .question-lottie.muted svg path,
:root.dark #app.map-screen .row.todo .question-lottie.muted svg polygon,
:root.dark #app.map-screen .row.todo .question-lottie.muted svg rect,
:root.dark #app.map-screen .row.todo .question-lottie.muted svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}
.lock-icon {
  display: block;
  width: 18px;
  height: 24px;
  opacity: 0.2;
}
#app.map-screen .row .chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  opacity: 0.2;
}
#app.map-screen .row .chev img {
  display: block;
  width: 8px;
  height: 13px;
}
#app.map-screen .row .chev.lock {
  opacity: 1;
  color: var(--text-tertiary);
}
#app.map-screen .row .chev.lock i {
  width: 18px;
  height: 18px;
}
.check-lottie {
  display: block;
  width: 27px;
  height: 27px;
}
.right-now-lottie {
  display: block;
  width: 28px;
  height: 28px;
}
#app.map-screen .row.current .right-now-lottie {
  filter: brightness(0) invert(1);
}
.right-now-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.question-lottie {
  display: block;
  width: 27px;
  height: 27px;
}
.question-lottie.muted {
  opacity: 0.2;
}
.question-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bonus-lottie {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
  opacity: 0.2;
}
.bonus-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
:root.dark #app.map-screen .bonus-lottie {
  opacity: 0.5;
}
:root.dark #app.map-screen .bonus-lottie svg path,
:root.dark #app.map-screen .bonus-lottie svg polygon,
:root.dark #app.map-screen .bonus-lottie svg rect,
:root.dark #app.map-screen .bonus-lottie svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}
#app.map-screen .map-bonus {
  font: 500 17px/1.25 -apple-system, 'Onest', system-ui;
  border-radius: 50px;
  corner-shape: squircle;
}
:root.dark #app.map-screen .map-bonus {
  border: 1px solid rgb(146 146 146 / 65%);
}

@keyframes map-current-gradient {
  to {
    background-position: 100% 0;
  }
}
.check-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bonus {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: var(--text-tertiary);
  font: 500 13px/1 -apple-system, 'Onest', system-ui;
  padding: 15px;
  border: 1px dashed var(--separator);
  border-radius: var(--r-card);
  margin-top: 12px;
}
.bonus i {
  width: 16px;
  height: 16px;
}

/* --- concept --- */
#app.concept-screen .tg-header,
#app.longread-screen .tg-header {
  border-bottom: 0;
}
#app.concept-screen .tg-bottom,
#app.longread-screen .tg-bottom {
  border-top: 1px solid rgb(60 60 67 / 20%);
}
#app.concept-screen .body,
#app.longread-screen .body {
  padding: 10px 30px;
}
#app.concept-screen .mainbtn,
#app.longread-screen .mainbtn {
  border-radius: 30px;
  corner-shape: squircle;
}
#app.phase-screen .mainbtn {
  border-radius: 30px;
  corner-shape: squircle;
}
#app.phase-screen .body,
#app.settings-screen .body,
#app.system-screen .body {
  padding: 10px 30px;
}
#app.phase-screen .tg-header {
  border-bottom: 0;
}
:root.dark .tg-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root.dark #app.terminal-screen .tg-header,
#app.offer-screen .tg-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#app.phase-screen .hbtn {
  width: auto;
  padding: 0 20px;
  color: var(--phase-accent);
}
#app.phase-screen .back-arrow {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  transform: rotate(180deg);
  filter: brightness(0) saturate(100%) invert(39%) sepia(70%) saturate(1399%) hue-rotate(246deg) brightness(92%) contrast(91%);
}
#app.offer-screen .body {
  display: flex;
  align-items: center;
  justify-content: center;
}
#app.offer-screen {
  --offer-motion-color: #ffa63d;
  position: relative;
  overflow: hidden;
  background: #fff;
  animation: offer-motion-color 10.67s linear infinite;
}
#app.offer-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 12%, rgba(224, 225, 255, 0.82), transparent 38%),
    radial-gradient(circle at 14% 88%, rgba(255, 255, 255, 0.68), transparent 42%),
    linear-gradient(180deg, #e0e1ff 0%, #ffffff 48%, #ffffff 100%);
  animation: entry-bg-hue 3s ease-in-out infinite alternate;
}
:root.dark #app.offer-screen {
  background: #000;
}
:root.dark #app.offer-screen::before {
  background:
    radial-gradient(circle at 76% 16%, rgba(0, 11, 66, 0.92), transparent 34%),
    radial-gradient(circle at 20% 92%, rgba(0, 0, 0, 0.72), transparent 36%),
    linear-gradient(180deg, #000b42 0%, #000000 52%, #000000 100%);
}
#app.offer-screen > * {
  position: relative;
  z-index: 1;
}
#app.offer-screen .back-arrow {
  filter: brightness(0) saturate(100%) invert(53%) sepia(4%) saturate(260%) hue-rotate(202deg) brightness(98%) contrast(88%);
}
:root.dark #app.offer-screen .back-arrow {
  filter: brightness(0) invert(1);
  opacity: 0.5;
}
#app.offer-screen .tg-bottom {
  background: transparent;
  border-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#app.offer-screen .mainbtn:not(.neutral) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 50px;
  border: none;
  border-radius: 30px;
  corner-shape: squircle;
  background:
    linear-gradient(
      -45deg,
      var(--offer-motion-color),
      color-mix(in srgb, var(--offer-motion-color) 64%, #ff3d77),
      color-mix(in srgb, var(--offer-motion-color) 48%, #338aff),
      color-mix(in srgb, var(--offer-motion-color) 52%, #3cf0c5)
    );
  box-shadow: none;
  font: 600 17px/1 -apple-system, 'Onest', system-ui;
}
#app.phase-screen .mainbtn.neutral {
  font-weight: 600;
}
#app.phase-screen .mainbtn.ghost {
  color: var(--phase-accent);
}
#app.phase-screen #pivot-return {
  background: var(--system-green);
  color: #fff;
}
#app.completion-screen {
  position: relative;
  overflow: hidden;
  background: #fff;
}
#app.completion-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 12%, rgba(224, 225, 255, 0.82), transparent 38%),
    radial-gradient(circle at 14% 88%, rgba(255, 255, 255, 0.68), transparent 42%),
    linear-gradient(180deg, #e0e1ff 0%, #ffffff 48%, #ffffff 100%);
  animation: entry-bg-hue 3s ease-in-out infinite alternate;
}
:root.dark #app.completion-screen {
  background: #000;
}
:root.dark #app.completion-screen::before {
  background:
    radial-gradient(circle at 76% 16%, rgba(0, 11, 66, 0.92), transparent 34%),
    radial-gradient(circle at 20% 92%, rgba(0, 0, 0, 0.72), transparent 36%),
    linear-gradient(180deg, #000b42 0%, #000000 52%, #000000 100%);
}
#app.completion-screen .body,
#app.completion-screen .tg-bottom {
  position: relative;
  z-index: 2;
}
#app.completion-screen .body {
  padding-top: 62px;
}
#app.completion-screen .hero {
  position: relative;
  z-index: 2;
}
/* A hub that carries the offer's course rows must NOT stretch its hero to the full viewport (.hero has
   min-height:100%, which is right when the hero is the only content): otherwise the rows render below
   the fold and read as "the app dropped the course links" — the very thing this screen now fixes. */
#app.completion-has-courses .hero {
  min-height: 0;
  margin-bottom: 4px;
}
#app.completion-has-courses .course-list,
#app.completion-has-courses .courses-label {
  position: relative;
  z-index: 2;
}
#app.completion-has-courses .body {
  padding-top: 34px;
}
#app.completion-screen .completion-title {
  font: 700 38px/1.07 -apple-system, 'Onest', system-ui;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-align: center;
}
#app.completion-screen .completion-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -12px 0 16px;
  color: var(--system-purple);
  font: 700 13px/1 -apple-system, 'Onest', system-ui;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#app.completion-screen .hero p {
  color: #000;
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
  margin: 0 2px 15px;
  max-width: 34em;
}
:root.dark #app.completion-screen .hero p {
  color: var(--text);
}
#app.completion-screen .completion-check {
  width: 24px;
  height: 24px;
}
#app.completion-screen .sec-row {
  justify-content: space-around;
  gap: 0;
}
#app.completion-screen .sec {
  color: var(--phase-accent);
  padding: 0 10px;
  border: 0;
  background: transparent;
  font: 600 16px/1 -apple-system, 'Onest', system-ui;
}
#app.completion-screen .sec-svg {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(39%) sepia(70%) saturate(1399%) hue-rotate(246deg) brightness(92%) contrast(91%);
}
#app.completion-screen .sec-lottie {
  display: block;
  width: 19px;
  height: 19px;
  flex: none;
}
#app.completion-screen #c-offer {
  gap: 2px;
}
#app.completion-screen #c-offer .sec-lottie {
  width: 30px;
  height: 30px;
}
#app.completion-screen .sec-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
#app.completion-screen .sec-lottie svg path,
#app.completion-screen .sec-lottie svg polygon,
#app.completion-screen .sec-lottie svg rect,
#app.completion-screen .sec-lottie svg circle {
  fill: var(--phase-accent) !important;
  stroke: var(--phase-accent) !important;
}
#app.completion-screen .completion-check svg path,
#app.completion-screen .completion-check svg polygon,
#app.completion-screen .completion-check svg rect,
#app.completion-screen .completion-check svg circle {
  fill: var(--system-purple) !important;
  stroke: var(--system-purple) !important;
}
#app.phase-screen:not(.completion-screen) .otext,
#app.phase-screen:not(.completion-screen) .hero > p,
#app.system-screen .hero > p {
  color: #000 !important;
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui !important;
}
:root.dark #app.phase-screen:not(.completion-screen) .otext,
:root.dark #app.phase-screen:not(.completion-screen) .hero > p,
:root.dark #app.system-screen .hero > p {
  color: var(--text) !important;
}
#app.phase-screen .phase-title {
  color: #000;
  font: 700 32px/1.12 -apple-system, 'Onest', system-ui;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-align: center;
}
:root.dark #app.phase-screen .phase-title {
  color: var(--text);
}
#app.terminal-screen .card {
  padding: 0;
}
:root.dark #app.terminal-screen .card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#app.terminal-screen .body {
  display: flex;
  align-items: center;
}
#app.terminal-screen .hero {
  width: 100%;
  justify-content: center;
}
#app.terminal-screen .otext,
#app.terminal-screen .hero > p,
#app.system-message-screen .hero h1,
#app.system-message-screen .hero > p {
  text-align: center;
}
#app.system-message-screen .body {
  display: flex;
  align-items: center;
}
#app.system-message-screen .hero {
  width: 100%;
  justify-content: center;
  align-items: center;
}
#app.system-message-screen .phase-icon-lg {
  margin-left: auto;
  margin-right: auto;
  background: transparent;
  border-radius: 0;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
#app.system-message-screen .phase-icon-lg i,
#app.system-message-screen .phase-icon-lg svg {
  width: 40px;
  height: 40px;
}
#app.system-message-screen .hero h1 {
  margin-top: 0;
}
#app.terminal-screen .tg-bottom,
#app.system-message-screen .tg-bottom {
  border-top: 0;
}
:root.dark #app.terminal-screen .tg-bottom {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.terminal-reset-note {
  color: var(--text-tertiary);
  font: 500 14px/1.35 -apple-system, 'Onest', system-ui;
  text-align: center;
  margin-top: 10px;
}
.confetti-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 100%);
}
.confetti-field i {
  position: absolute;
  left: 50%;
  bottom: -28px;
  width: 7px;
  height: 13px;
  border-radius: 2.5px;
  background: var(--c, #35c759);
  opacity: 0;
  transform: translate3d(var(--x0), 0, 0) rotate(var(--r0));
  animation: confetti-rise var(--dur, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.confetti-field i:nth-child(6n + 1) {
  --c: #00c853;
}
.confetti-field i:nth-child(6n + 2) {
  --c: #009dff;
}
.confetti-field i:nth-child(6n + 3) {
  --c: #ffb000;
}
.confetti-field i:nth-child(6n + 4) {
  --c: #ff3b30;
}
.confetti-field i:nth-child(6n + 5) {
  --c: #af00ff;
}
.confetti-field i:nth-child(6n) {
  --c: #0057ff;
}
.confetti-field i:nth-child(1) { --x0: -46vw; --x1: -66vw; --r0: 12deg; --r1: 278deg; --dur: 5.87s; --delay: -1.2s; }
.confetti-field i:nth-child(2) { --x0: -38vw; --x1: -21vw; --r0: 84deg; --r1: 332deg; --dur: 6.4s; --delay: -4.4s; }
.confetti-field i:nth-child(3) { --x0: -30vw; --x1: -44vw; --r0: 37deg; --r1: 301deg; --dur: 5.27s; --delay: -2.7s; }
.confetti-field i:nth-child(4) { --x0: -21vw; --x1: -6vw; --r0: 128deg; --r1: 428deg; --dur: 6.8s; --delay: -6.1s; }
.confetti-field i:nth-child(5) { --x0: -12vw; --x1: -30vw; --r0: 16deg; --r1: 246deg; --dur: 5.6s; --delay: -3.6s; }
.confetti-field i:nth-child(6) { --x0: -4vw; --x1: 10vw; --r0: 53deg; --r1: 389deg; --dur: 6.07s; --delay: -7s; }
.confetti-field i:nth-child(7) { --x0: 6vw; --x1: -12vw; --r0: 145deg; --r1: 511deg; --dur: 7.07s; --delay: -1.8s; }
.confetti-field i:nth-child(8) { --x0: 16vw; --x1: 30vw; --r0: 21deg; --r1: 286deg; --dur: 5.4s; --delay: -5.2s; }
.confetti-field i:nth-child(9) { --x0: 25vw; --x1: 4vw; --r0: 92deg; --r1: 394deg; --dur: 6.6s; --delay: -0.8s; }
.confetti-field i:nth-child(10) { --x0: 35vw; --x1: 50vw; --r0: 63deg; --r1: 422deg; --dur: 5.8s; --delay: -6.8s; }
.confetti-field i:nth-child(11) { --x0: 44vw; --x1: 22vw; --r0: 171deg; --r1: 499deg; --dur: 7.27s; --delay: -3.3s; }
.confetti-field i:nth-child(12) { --x0: -50vw; --x1: -32vw; --r0: 4deg; --r1: 260deg; --dur: 6.27s; --delay: -8.1s; }
.confetti-field i:nth-child(13) { --x0: -42vw; --x1: -55vw; --r0: 120deg; --r1: 460deg; --dur: 7.2s; --delay: -5.6s; }
.confetti-field i:nth-child(14) { --x0: -34vw; --x1: -14vw; --r0: 70deg; --r1: 355deg; --dur: 5.73s; --delay: -2.1s; }
.confetti-field i:nth-child(15) { --x0: -25vw; --x1: -40vw; --r0: 28deg; --r1: 303deg; --dur: 6.47s; --delay: -7.4s; }
.confetti-field i:nth-child(16) { --x0: -15vw; --x1: 2vw; --r0: 156deg; --r1: 520deg; --dur: 5.93s; --delay: -4.7s; }
.confetti-field i:nth-child(17) { --x0: -7vw; --x1: -22vw; --r0: 44deg; --r1: 314deg; --dur: 6.93s; --delay: -1.5s; }
.confetti-field i:nth-child(18) { --x0: 2vw; --x1: 18vw; --r0: 99deg; --r1: 452deg; --dur: 6.13s; --delay: -6.5s; }
.confetti-field i:nth-child(19) { --x0: 11vw; --x1: -2vw; --r0: 11deg; --r1: 257deg; --dur: 5.53s; --delay: -3.9s; }
.confetti-field i:nth-child(20) { --x0: 20vw; --x1: 40vw; --r0: 134deg; --r1: 496deg; --dur: 6.73s; --delay: -0.4s; }
.confetti-field i:nth-child(21) { --x0: 29vw; --x1: 14vw; --r0: 75deg; --r1: 330deg; --dur: 6.33s; --delay: -5.9s; }
.confetti-field i:nth-child(22) { --x0: 39vw; --x1: 58vw; --r0: 19deg; --r1: 375deg; --dur: 5.67s; --delay: -2.9s; }
.confetti-field i:nth-child(23) { --x0: 48vw; --x1: 28vw; --r0: 162deg; --r1: 470deg; --dur: 7.13s; --delay: -7.8s; }
.confetti-field i:nth-child(24) { --x0: -47vw; --x1: -25vw; --r0: 58deg; --r1: 300deg; --dur: 6s; --delay: -4.1s; }
.confetti-field i:nth-child(25) { --x0: -28vw; --x1: -8vw; --r0: 111deg; --r1: 421deg; --dur: 7.33s; --delay: -8.6s; }
.confetti-field i:nth-child(26) { --x0: -18vw; --x1: -35vw; --r0: 7deg; --r1: 271deg; --dur: 5.47s; --delay: -2.4s; }
.confetti-field i:nth-child(27) { --x0: -2vw; --x1: 22vw; --r0: 140deg; --r1: 512deg; --dur: 6.53s; --delay: -6.9s; }
.confetti-field i:nth-child(28) { --x0: 9vw; --x1: -9vw; --r0: 36deg; --r1: 298deg; --dur: 5.73s; --delay: -1.1s; }
.confetti-field i:nth-child(29) { --x0: 18vw; --x1: 36vw; --r0: 88deg; --r1: 360deg; --dur: 6.87s; --delay: -5.5s; }
.confetti-field i:nth-child(30) { --x0: 31vw; --x1: 9vw; --r0: 151deg; --r1: 515deg; --dur: 6.2s; --delay: -3.2s; }
.confetti-field i:nth-child(31) { --x0: 42vw; --x1: 62vw; --r0: 25deg; --r1: 288deg; --dur: 5.6s; --delay: -7.1s; }
.confetti-field i:nth-child(32) { --x0: -39vw; --x1: -18vw; --r0: 130deg; --r1: 486deg; --dur: 7s; --delay: -4.8s; }
.confetti-field i:nth-child(33) { --x0: -23vw; --x1: -48vw; --r0: 65deg; --r1: 358deg; --dur: 6.07s; --delay: -0.7s; }
.confetti-field i:nth-child(34) { --x0: 4vw; --x1: 25vw; --r0: 173deg; --r1: 501deg; --dur: 7.27s; --delay: -6.2s; }
.confetti-field i:nth-child(35) { --x0: 23vw; --x1: 0vw; --r0: 42deg; --r1: 315deg; --dur: 5.8s; --delay: -2.6s; }
.confetti-field i:nth-child(36) { --x0: 46vw; --x1: 33vw; --r0: 106deg; --r1: 452deg; --dur: 6.4s; --delay: -8.9s; }
.confetti-field i:nth-child(37) { --x0: -45vw; --x1: -12vw; --r0: 190deg; --r1: 700deg; --dur: 5.07s; --delay: -3.4s; }
.confetti-field i:nth-child(38) { --x0: -36vw; --x1: -61vw; --r0: 83deg; --r1: 611deg; --dur: 5.4s; --delay: -6.4s; }
.confetti-field i:nth-child(39) { --x0: -19vw; --x1: 6vw; --r0: 30deg; --r1: 575deg; --dur: 6.53s; --delay: -1.9s; }
.confetti-field i:nth-child(40) { --x0: -8vw; --x1: -29vw; --r0: 210deg; --r1: 842deg; --dur: 5.2s; --delay: -5.1s; }
.confetti-field i:nth-child(41) { --x0: 8vw; --x1: 31vw; --r0: 15deg; --r1: 640deg; --dur: 5.93s; --delay: -2.3s; }
.confetti-field i:nth-child(42) { --x0: 19vw; --x1: -4vw; --r0: 122deg; --r1: 766deg; --dur: 4.93s; --delay: -7.3s; }
.confetti-field i:nth-child(43) { --x0: 33vw; --x1: 57vw; --r0: 67deg; --r1: 590deg; --dur: 6.8s; --delay: -4.6s; }
.confetti-field i:nth-child(44) { --x0: 47vw; --x1: 20vw; --r0: 242deg; --r1: 875deg; --dur: 5.33s; --delay: -0.9s; }
.confetti-field i:nth-child(45) { --x0: -52vw; --x1: -35vw; --r0: 9deg; --r1: 514deg; --dur: 6.07s; --delay: -6.7s; }
.confetti-field i:nth-child(46) { --x0: -31vw; --x1: -5vw; --r0: 154deg; --r1: 806deg; --dur: 5.13s; --delay: -2.8s; }
.confetti-field i:nth-child(47) { --x0: -11vw; --x1: 13vw; --r0: 49deg; --r1: 622deg; --dur: 5.67s; --delay: -8.1s; }
.confetti-field i:nth-child(48) { --x0: 13vw; --x1: -17vw; --r0: 201deg; --r1: 910deg; --dur: 4.8s; --delay: -4.3s; }
.confetti-field i:nth-child(49) { --x0: 30vw; --x1: 8vw; --r0: 95deg; --r1: 650deg; --dur: 6.47s; --delay: -1.4s; }
.confetti-field i:nth-child(50) { --x0: 52vw; --x1: 38vw; --r0: 166deg; --r1: 824deg; --dur: 5.53s; --delay: -5.8s; }
.confetti-field i:nth-child(51) { --x0: -56vw; --x1: -44vw; --r0: 33deg; --r1: 392deg; --dur: 6.4s; --delay: -2.2s; }
.confetti-field i:nth-child(52) { --x0: -49vw; --x1: -71vw; --r0: 118deg; --r1: 728deg; --dur: 5.27s; --delay: -7.5s; }
.confetti-field i:nth-child(53) { --x0: -41vw; --x1: -19vw; --r0: 205deg; --r1: 590deg; --dur: 6.93s; --delay: -4.9s; }
.confetti-field i:nth-child(54) { --x0: -33vw; --x1: -52vw; --r0: 61deg; --r1: 335deg; --dur: 5.73s; --delay: -1.6s; }
.confetti-field i:nth-child(55) { --x0: -24vw; --x1: -2vw; --r0: 149deg; --r1: 822deg; --dur: 5s; --delay: -6.6s; }
.confetti-field i:nth-child(56) { --x0: -17vw; --x1: -36vw; --r0: 14deg; --r1: 271deg; --dur: 6.13s; --delay: -3.1s; }
.confetti-field i:nth-child(57) { --x0: -9vw; --x1: 16vw; --r0: 236deg; --r1: 901deg; --dur: 5.13s; --delay: -8.4s; }
.confetti-field i:nth-child(58) { --x0: -1vw; --x1: -23vw; --r0: 76deg; --r1: 430deg; --dur: 6.73s; --delay: -5.3s; }
.confetti-field i:nth-child(59) { --x0: 7vw; --x1: 29vw; --r0: 164deg; --r1: 618deg; --dur: 5.87s; --delay: -0.6s; }
.confetti-field i:nth-child(60) { --x0: 15vw; --x1: -7vw; --r0: 42deg; --r1: 765deg; --dur: 4.93s; --delay: -4.2s; }
.confetti-field i:nth-child(61) { --x0: 22vw; --x1: 45vw; --r0: 126deg; --r1: 512deg; --dur: 6.6s; --delay: -6.9s; }
.confetti-field i:nth-child(62) { --x0: 29vw; --x1: 10vw; --r0: 211deg; --r1: 872deg; --dur: 5.2s; --delay: -2.5s; }
.confetti-field i:nth-child(63) { --x0: 37vw; --x1: 60vw; --r0: 58deg; --r1: 349deg; --dur: 7.13s; --delay: -8.8s; }
.confetti-field i:nth-child(64) { --x0: 45vw; --x1: 24vw; --r0: 181deg; --r1: 695deg; --dur: 5.53s; --delay: -5.7s; }
.confetti-field i:nth-child(65) { --x0: 54vw; --x1: 70vw; --r0: 97deg; --r1: 441deg; --dur: 6.27s; --delay: -1.1s; }
.confetti-field i:nth-child(66) { --x0: -53vw; --x1: -29vw; --r0: 248deg; --r1: 930deg; --dur: 4.87s; --delay: -6.2s; }
.confetti-field i:nth-child(67) { --x0: -44vw; --x1: -64vw; --r0: 27deg; --r1: 384deg; --dur: 6.47s; --delay: -3.8s; }
.confetti-field i:nth-child(68) { --x0: -27vw; --x1: -11vw; --r0: 138deg; --r1: 754deg; --dur: 5.4s; --delay: -7.9s; }
.confetti-field i:nth-child(69) { --x0: -13vw; --x1: 5vw; --r0: 73deg; --r1: 298deg; --dur: 7s; --delay: -4.5s; }
.confetti-field i:nth-child(70) { --x0: 3vw; --x1: -18vw; --r0: 192deg; --r1: 815deg; --dur: 5.07s; --delay: -0.3s; }
.confetti-field i:nth-child(71) { --x0: 18vw; --x1: 39vw; --r0: 52deg; --r1: 498deg; --dur: 6s; --delay: -5.9s; }
.confetti-field i:nth-child(72) { --x0: 34vw; --x1: 15vw; --r0: 154deg; --r1: 660deg; --dur: 5.67s; --delay: -2.7s; }
.confetti-field i:nth-child(73) { --x0: 49vw; --x1: 72vw; --r0: 18deg; --r1: 407deg; --dur: 7.2s; --delay: -7.2s; }
.confetti-field i:nth-child(74) { --x0: 57vw; --x1: 32vw; --r0: 229deg; --r1: 884deg; --dur: 5.27s; --delay: -4s; }
.confetti-field i:nth-child(75) { --x0: 61vw; --x1: 47vw; --r0: 108deg; --r1: 566deg; --dur: 6.2s; --delay: -8.6s; }
@keyframes confetti-rise {
  0% {
    opacity: 1;
    transform: translate3d(var(--x0), 0, 0) rotate(var(--r0));
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0.3;
  }
  56% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--x1), -112vh, 0) rotate(var(--r1));
  }
}
#app.concept-screen .h1 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
#app.concept-screen .def {
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
  color: #000;
}
:root.dark #app.concept-screen .def {
  color: var(--text);
}
#app.concept-screen .seclabel {
  font: 700 13px/1 -apple-system, 'Onest', system-ui;
  letter-spacing: 0.08em;
  padding: 10px 0 0;
}
#app.concept-screen .mentor-label {
  gap: 6px;
}
.mentor-star {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
  opacity: 0.3;
}
.mentor-star svg {
  display: block;
  width: 100%;
  height: 100%;
}
:root.dark .mentor-star {
  opacity: 0.5;
}
:root.dark .mentor-star svg path,
:root.dark .mentor-star svg polygon,
:root.dark .mentor-star svg rect,
:root.dark .mentor-star svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}
#app.concept-screen .vid-cta .vic {
  width: 60px;
  height: 60px;
  background: linear-gradient(90deg, #92d7fc 0%, #35c759 25%, #92d7fc 50%, #35c759 75%, #92d7fc 100%);
  background-size: 200% 100%;
  animation: map-current-gradient 3s linear infinite;
  box-shadow: none;
}
#app.concept-screen .vid-cta {
  padding: 6px 0;
  background: transparent;
}
#app.concept-screen .vid-cta .vmeta,
#app.concept-screen .vid-cta .vchev {
  display: none;
}
.video-now-lottie {
  display: block;
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
.video-now-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
#app.concept-screen .video-now-lottie svg path,
#app.concept-screen .video-now-lottie svg polygon,
#app.concept-screen .video-now-lottie svg rect,
#app.concept-screen .video-now-lottie svg circle {
  fill: #fff !important;
}
#app.concept-screen .nrow {
  border-radius: 30px;
  corner-shape: squircle;
}
#app.concept-screen .nrow .nname {
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
  color: #000;
}
:root.dark #app.concept-screen .nrow .nname {
  color: var(--text);
}
#app.concept-screen .nrow .chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  opacity: 0.2;
}
#app.concept-screen .nrow .chev img {
  display: block;
  width: 8px;
  height: 13px;
}
:root.dark #app.concept-screen .nrow .chev img {
  filter: brightness(0) invert(1);
}
#app.concept-screen .dchip {
  gap: 4px;
  min-height: 44px;
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
}
#app.concept-screen .dchip i {
  display: none;
}
.dchip-star {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
  opacity: 0.8;
}
.dchip-star svg {
  display: block;
  width: 100%;
  height: 100%;
}
:root.dark #app.concept-screen .dchip-star svg path,
:root.dark #app.concept-screen .dchip-star svg polygon,
:root.dark #app.concept-screen .dchip-star svg rect,
:root.dark #app.concept-screen .dchip-star svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}
.pending-mentor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-tertiary);
  font: 500 17px/1.4 -apple-system, 'Onest', system-ui;
}
.pending-mentor i {
  width: 17px;
  height: 17px;
  flex: none;
}
#app.concept-screen .sec-row {
  justify-content: space-around;
  gap: 0;
}
#app.concept-screen .sec,
#app.longread-screen .sec {
  color: var(--phase-accent);
  padding: 0 10px;
  border: 0;
  background: transparent;
  font: 600 16px/1 -apple-system, 'Onest', system-ui;
}
#app.concept-screen .sec-svg {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(54%) sepia(95%) saturate(455%) hue-rotate(84deg) brightness(92%) contrast(91%);
}
#app.concept-screen #sec-quiz .sec-svg {
  width: 19px;
  height: 19px;
}
#app.concept-screen .sec-lottie {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}
#app.concept-screen .sec-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.vid-acc {
  background: var(--surface-grouped);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
}
.vid-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  cursor: pointer;
  min-height: 50px;
}
.vid-head .vi {
  color: var(--phase-accent);
  display: flex;
}
.vid-head .vi i {
  width: 22px;
  height: 22px;
}
.vid-head .vlabel {
  flex: 1;
  font: 500 15px/1.2 -apple-system, 'Onest', system-ui;
}
.vid-head .vmeta {
  font: 400 12px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.vid-body {
  padding: 0 14px 16px;
}
/* video CTA — the reliable "Смотреть видео" row (owner smoke-#5 #1): an inline-SVG play that depends on
   nothing external (unlike the old green placeholder whose Lucide glyph rendered as an empty circle on a
   slow CDN). It is the COLLAPSED state of the inline player (.vplayer below) — one tap expands the video
   stage in place (D052), no popup. */
.vid-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: none;
  border-radius: 16px;
  background: var(--surface-grouped);
  cursor: pointer;
  margin: 0 0 18px;
  text-align: left;
  font: inherit;
}
.vid-cta .vic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--phase-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.vid-cta .vic svg {
  margin-left: 2px;
}
.vid-cta .vtext {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vid-cta .vlabel {
  font: 600 16px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.vid-cta .vmeta {
  font: 400 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.vid-cta .vchev {
  color: var(--text-tertiary);
  display: flex;
}
.vid-cta .vchev i {
  width: 18px;
  height: 18px;
}
/* Inline video player (D052) — replaces the full-bleed theater popup. The .vid-cta row above is the
   collapsed affordance; one tap adds .playing, which hides the row and expands .vstage IN PLACE (no
   popup). The content is portrait 9:16 (720x1280), so the revealed <video> is height-capped and centred
   (object-fit:contain → no crop). The <video preload="auto"> is mounted collapsed so it is already
   buffering before the tap (the lag fix). */
.vplayer {
  margin: 0 0 18px;
}
.vplayer .vid-cta {
  margin: 0;
}
.vplayer .vstage {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.vplayer.playing .vid-cta {
  display: none;
}
.vplayer.playing .vstage {
  max-height: 82vh;
}
.vplayer .vstage video {
  display: block;
  margin: 0 auto;
  height: 72vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 16px;
  background: #000;
}
.vplayer .vfallback {
  display: none; /* shown only on a media error (.vplayer.errored), never on the happy path */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
  color: var(--text-tertiary);
  background: var(--surface-grouped);
  border-radius: 16px;
}
.vplayer .vfallback i {
  width: 40px;
  height: 40px;
}
/* media error → reveal the "watch in chat" plate, drop the row + the broken <video>, in any state */
.vplayer.errored .vid-cta {
  display: none;
}
.vplayer.errored .vstage {
  max-height: none;
  overflow: visible;
}
.vplayer.errored .vstage video {
  display: none;
}
.vplayer.errored .vfallback {
  display: flex;
}
/* collapse control (D055): the .playing stage hides the .vid-cta row, so the only way back was to leave
   the screen. A "Свернуть видео" button under the player removes .playing (and pauses) in place; it shows
   only while playing and never in the errored state. Styled after the .icancel dismiss button. */
.vplayer .vid-collapse {
  display: none;
  width: 100%;
  height: 46px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  border-radius: var(--r-btn);
  background: var(--surface-grouped);
  color: var(--phase-accent);
  font: 600 15px/1 -apple-system, 'Onest', system-ui;
  cursor: pointer;
}
.vplayer .vid-collapse i {
  width: 17px;
  height: 17px;
}
.vplayer.playing .vid-collapse {
  display: flex;
}
.vplayer.errored .vid-collapse {
  display: none;
}
.def {
  font: 400 17px/1.5 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  margin: 0 2px 22px;
}
.text-plate {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-grouped);
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 18px;
  color: var(--text-secondary);
  font: 500 14px/1.3 -apple-system, 'Onest', system-ui;
}
.text-plate i {
  width: 20px;
  height: 20px;
  color: var(--phase-accent);
  flex: none;
}
/* the start CTA lifted above the neutral plates (D055): accent-tinted + bold so «напиши наставнику»
   reads as the primary call, not muted body copy. The accent is mixed into the OPAQUE surface (not
   transparent) so the plate stays visible on the pure-black dark-mode body — a 12% tint over transparent
   composited to near-black there (onboarding accent = #007aff). */
.text-plate.accent {
  background: color-mix(in srgb, var(--phase-accent) 22%, var(--surface-grouped));
  color: var(--text);
  font-weight: 600;
}
/* first-step quote (D055): fills the dead gap between the lock note and the dock on the COLD entry only
   (it auto-disappears once profiling starts — the onboarding hero never renders it). margin-top:auto
   pushes it to the bottom of the .hero flex column, just above the dock. */
.hero-quote {
  margin: auto 2px 4px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--phase-accent);
  color: var(--text-secondary);
  font: 400 16px/1.5 -apple-system, 'Onest', system-ui;
}
.hero-quote .qauthor {
  display: block;
  margin-top: 8px;
  color: var(--text-tertiary);
  font: 400 13px/1.3 -apple-system, 'Onest', system-ui;
}

/* discussion chips ("Разобрать тему" — Class B → chat) */
.dchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.dchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface-grouped);
  color: var(--text);
  font: 500 14px/1 -apple-system, 'Onest', system-ui;
  cursor: pointer;
  transition: opacity 0.15s;
}
.dchip i {
  width: 16px;
  height: 16px;
  color: var(--phase-accent);
}
.dchip.used {
  opacity: 0.4;
  pointer-events: none;
}
.dchip.used i {
  color: var(--text-tertiary);
}

/* neighbor (jump) rows */
.neigh-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.nrow {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface-grouped);
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  min-height: 60px;
}
.nrow .ntext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nrow .nrel {
  font: 600 11px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nrow .nname {
  font: 400 16px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.nrow .chev {
  color: var(--text-tertiary);
}
.nrow .chev i {
  width: 18px;
  height: 18px;
}
.empty-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 32px 16px;
  font: 400 15px/1.4 -apple-system, 'Onest', system-ui;
}
.empty-note i {
  width: 32px;
  height: 32px;
}

/* --- longread --- */
.lr h2 {
  font: 600 26px/1.2 -apple-system, 'Onest', system-ui;
  margin: 0 2px 14px;
  letter-spacing: -0.02em;
}
.lr p {
  font: 400 17px/1.55 -apple-system, 'Onest', system-ui;
  color: var(--text);
  margin: 0 2px 15px;
  max-width: 34em;
}
.lr b {
  font-weight: 600;
}
.lr ul {
  margin: 0 2px 15px;
  padding-left: 22px;
}
.lr li {
  font: 400 17px/1.55 -apple-system, 'Onest', system-ui;
  margin-bottom: 6px;
}
#app.longread-screen .lr h2 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
#app.longread-screen .lr p,
#app.longread-screen .lr li {
  color: #000;
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
}
:root.dark #app.longread-screen .lr p,
:root.dark #app.longread-screen .lr li {
  color: var(--text);
}

/* --- quiz --- */
#app.concept-screen .hbtn,
#app.quiz-screen .hbtn,
#app.longread-screen .hbtn {
  width: auto;
  padding: 0 20px;
  color: var(--phase-accent);
}
#app.concept-screen .back-arrow,
#app.quiz-screen .back-arrow,
#app.longread-screen .back-arrow {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  transform: rotate(180deg);
  filter: brightness(0) saturate(100%) invert(54%) sepia(95%) saturate(455%) hue-rotate(84deg) brightness(92%) contrast(91%);
}
#app.quiz-screen .tg-header {
  border-bottom: 0;
}
#app.quiz-screen .body {
  padding: 10px 30px;
}
#app.quiz-screen .tg-bottom {
  border-top: 1px solid rgb(60 60 67 / 20%);
}
#app.quiz-screen .mainbtn {
  border-radius: 30px;
  corner-shape: squircle;
}
#app.quiz-screen .mainbtn.neutral {
  background: var(--surface-grouped);
  font: 600 17px/1 -apple-system, 'Onest', system-ui;
}
#app.quiz-verdict-screen .seclabel {
  font: 700 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  padding: 10px 0 0;
}
#app.quiz-verdict-screen .def {
  color: #000;
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
}
:root.dark #app.quiz-verdict-screen .def {
  color: var(--text);
}
#app.quiz-verdict-screen .verdict-icon {
  background: var(--phase-accent);
  color: #fff;
  margin: 0;
}
#app.quiz-verdict-screen .verdict-icon.wrong {
  background: #ff7857;
}
#app.quiz-verdict-screen .wrong-icon {
  display: block;
  width: 25px;
  height: 25px;
}
#app.quiz-verdict-screen .verdict-check {
  width: 34px;
  height: 34px;
}
#app.quiz-verdict-screen .verdict-check svg path,
#app.quiz-verdict-screen .verdict-check svg polygon,
#app.quiz-verdict-screen .verdict-check svg rect,
#app.quiz-verdict-screen .verdict-check svg circle {
  fill: #fff !important;
  stroke: #fff !important;
}
#app.quiz-verdict-screen .chat-jump {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 60px;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 0;
  border-radius: 30px;
  corner-shape: squircle;
  background: var(--surface-grouped);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
#app.quiz-verdict-screen .chat-jump .ntext {
  flex: 1;
  min-width: 0;
}
#app.quiz-verdict-screen .chat-jump .nname {
  color: #000;
  font: 500 17px/1.55 -apple-system, 'Onest', system-ui;
}
:root.dark #app.quiz-verdict-screen .chat-jump .nname {
  color: var(--text);
}
#app.quiz-verdict-screen .chat-jump .chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  opacity: 0.2;
}
#app.quiz-verdict-screen .chat-jump .chev img {
  display: block;
  width: 8px;
  height: 13px;
}
:root.dark #app.quiz-verdict-screen .chat-jump .chev img {
  filter: brightness(0) invert(1);
}
#app.quiz-verdict-screen .wrong-note {
  color: var(--text-tertiary);
  font: 400 15px/1.4 -apple-system, 'Onest', system-ui;
  margin: 0;
}
.q-kicker {
  font: 700 13px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.q-kicker i {
  width: 15px;
  height: 15px;
}
#app.quiz-screen .q-kicker {
  justify-content: center;
  padding: 0;
  text-align: center;
}
.q-kicker-lottie {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}
#app.quiz-screen .q-kicker-lottie svg path,
#app.quiz-screen .q-kicker-lottie svg polygon,
#app.quiz-screen .q-kicker-lottie svg rect,
#app.quiz-screen .q-kicker-lottie svg circle {
  fill: var(--system-purple) !important;
  stroke: var(--system-purple) !important;
}
.q-kicker-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.q-text {
  font: 700 23px/1.2 -apple-system, 'Onest', system-ui;
  margin: 0 2px 18px;
  letter-spacing: -0.01em;
}
#app.quiz-screen .q-text {
  margin: 0 0 18px;
  text-align: center;
}
.opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 13px 14px;
  border-radius: var(--r-card);
  background: var(--surface-grouped);
  border: 1.5px solid transparent;
  cursor: pointer;
  font: 400 16px/1.3 -apple-system, 'Onest', system-ui;
}
#app.quiz-screen .opt {
  border-radius: 30px;
  corner-shape: squircle;
  color: #000;
  font: 500 17px/1.4 -apple-system, 'Onest', system-ui;
}
:root.dark #app.quiz-screen .opt {
  color: var(--text);
}
.opt .radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-tertiary);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app.quiz-screen .opt .radio {
  border-color: rgb(65 65 73 / 30%);
}
:root.dark #app.quiz-screen .opt .radio {
  border-color: rgb(255 255 255 / 30%);
}
.opt.multi .radio {
  border-radius: 6px;
}
.opt.sel {
  border-color: var(--phase-accent);
  background: color-mix(in srgb, var(--phase-accent) 12%, transparent);
}
#app.quiz-screen .opt.sel {
  border-width: 2px;
  background: var(--phase-accent);
  color: #fff;
}
.opt.sel .radio {
  border-color: var(--phase-accent);
  background: var(--phase-accent);
}
#app.quiz-screen .opt.sel .radio {
  border-color: #fff;
  background: #fff;
}
.opt.sel .radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
#app.quiz-screen .opt.sel .radio::after {
  background: var(--phase-accent);
}
.opt.multi.sel .radio::after {
  border-radius: 1px;
}
.q-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-tertiary);
  font: 400 14px/1.35 -apple-system, 'Onest', system-ui;
  margin-top: 14px;
  text-align: center;
}
.q-note i,
.q-note svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.opt.correct {
  border-color: var(--system-green);
  background: color-mix(in srgb, var(--system-green) 14%, transparent);
}
.opt.wrong {
  border-color: var(--graphite);
  background: color-mix(in srgb, var(--graphite) 14%, transparent);
}
.q-result {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--r-card);
  display: flex;
  gap: 10px;
}
.q-result.ok {
  background: color-mix(in srgb, var(--system-green) 14%, transparent);
}
.q-result.no {
  background: color-mix(in srgb, var(--graphite) 14%, transparent);
}
.q-result i {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
}
.q-result .qr-t {
  font: 500 15px/1.35 -apple-system, 'Onest', system-ui;
}
.q-result .chat {
  color: var(--text-tertiary);
  font-size: 13px;
  margin-top: 3px;
}

/* --- offer card / settings --- */
.offer-card {
  position: relative;
  background: var(--material-regular);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 8px 0 18px;
}
#app.offer-screen .offer-card {
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  --os1-x: 20%;
  --os1-y: 4%;
  --os1-s: 29px;
  --os2-x: 76%;
  --os2-y: 3%;
  --os2-s: 67px;
  --os3-x: 36%;
  --os3-y: 101%;
  --os3-s: 71px;
  --os4-x: 73%;
  --os4-y: 94%;
  --os4-s: 42px;
  --os5-x: 48%;
  --os5-y: -13%;
  --os5-s: 130px;
  --os6-x: 55%;
  --os6-y: 111%;
  --os6-s: 30px;
  --offer-stars-opacity: 0.8;
}
.offer-card .offer-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
#app.offer-screen .offer-head {
  position: relative;
  z-index: 1;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.offer-card .gift {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--phase-accent) 16%, transparent);
  color: var(--phase-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
#app.offer-screen .gift {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: transparent;
  color: var(--phase-accent);
}
.offer-card .gift-label {
  font: 600 14px/1.1 -apple-system, 'Onest', system-ui;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--phase-accent);
}
.offer-card .gift i {
  width: 26px;
  height: 26px;
}
#app.offer-screen .gift i {
  width: 18px;
  height: 18px;
}
.offer-card .offer-title {
  font: 700 38px/1.07 -apple-system, 'Onest', system-ui;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-align: center;
}
#app.offer-screen .offer-title {
  position: relative;
  z-index: 1;
  font-size: 36px;
  margin-bottom: 18px;
}
#app.offer-screen .offer-title span {
  display: block;
}
.offer-card .otext {
  font: 400 16px/1.5 -apple-system, 'Onest', system-ui;
  color: var(--text);
  white-space: pre-wrap;
}
#app.offer-screen .otext {
  position: relative;
  z-index: 1;
  text-align: center;
}
.offer-stars {
  position: absolute;
  inset: -66px -22px;
  z-index: 0;
  opacity: var(--offer-stars-opacity);
  pointer-events: none;
}
.offer-star {
  position: absolute;
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.offer-star svg {
  display: block;
  width: 100%;
  height: 100%;
}
.offer-star svg path,
.offer-star svg polygon,
.offer-star svg rect,
.offer-star svg circle {
  fill: var(--offer-motion-color) !important;
  stroke: var(--offer-motion-color) !important;
}
.offer-star.os1 {
  width: var(--os1-s);
  height: var(--os1-s);
  left: var(--os1-x);
  top: var(--os1-y);
}
.offer-star.os2 {
  width: var(--os2-s);
  height: var(--os2-s);
  left: var(--os2-x);
  top: var(--os2-y);
}
.offer-star.os3 {
  width: var(--os3-s);
  height: var(--os3-s);
  left: var(--os3-x);
  top: var(--os3-y);
}
.offer-star.os4 {
  width: var(--os4-s);
  height: var(--os4-s);
  left: var(--os4-x);
  top: var(--os4-y);
}
.offer-star.os5 {
  width: var(--os5-s);
  height: var(--os5-s);
  left: var(--os5-x);
  top: var(--os5-y);
}
.offer-star.os6 {
  width: var(--os6-s);
  height: var(--os6-s);
  left: var(--os6-x);
  top: var(--os6-y);
}
@property --offer-motion-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #ffa63d;
}
@keyframes offer-motion-color {
  0% {
    --offer-motion-color: #ffa63d;
  }
  25% {
    --offer-motion-color: #ff3d77;
  }
  50% {
    --offer-motion-color: #338aff;
  }
  75% {
    --offer-motion-color: #3cf0c5;
  }
  100% {
    --offer-motion-color: #ffa63d;
  }
}
.set-group {
  background: var(--surface-grouped);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: 18px;
}
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 48px;
  position: relative;
}
.set-row + .set-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 0.5px;
  background: var(--separator);
}
.set-row .k {
  flex: 1;
  font: 400 16px/1.2 -apple-system, 'Onest', system-ui;
}
.set-row .v {
  font: 400 15px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.set-row.tappable {
  cursor: pointer;
}
.set-row.danger .k {
  color: var(--system-red);
}

/* --- profile slots (onboarding) --- */
.slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 18px;
}
.slot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-grouped);
  border-radius: 12px;
  padding: 12px 14px;
}
.slot i {
  width: 18px;
  height: 18px;
  flex: none;
}
.slot.filled i {
  color: var(--phase-accent);
}
.slot.empty i {
  color: var(--text-tertiary);
}
.slot .sname {
  font: 400 15px/1.2 -apple-system, 'Onest', system-ui;
}

/* OFFER with course links (redesign): the offer screen holds an intro card + a list of tappable course
   cards, so the single-card vertical centering is relaxed to a top-aligned scroll when courses are present
   (`#app.offer-has-courses`, set by renderOffer). The animated gradient bg + neutral dock button are the
   base offer-screen styling. */
#app.offer-has-courses .body {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  padding: 20px 18px 16px;
}
#app.offer-has-courses .offer-card-courses {
  text-align: center;
}
.course-stars {
  display: block;
  margin: 2px auto 2px;
}
#app.offer-has-courses .offer-title {
  font-size: 26px;
}
.courses-label {
  font: 600 12px/1 'Onest', system-ui;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 16px 2px 12px;
}
.course-list {
  display: flex;
  flex-direction: column;
}
.course-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--material-thick);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 13px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.course-card:active {
  transform: scale(0.99);
}
.course-card .cc-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px 'Onest', system-ui;
}
.cc-num.cc-green {
  background: var(--system-green);
}
.cc-num.cc-blue {
  background: var(--system-blue);
}
.cc-num.cc-purple {
  background: var(--system-purple);
}
.cc-num.cc-orange {
  background: var(--system-orange);
}
.cc-num.cc-red {
  background: var(--system-red);
}
.course-card .cc-text {
  flex: 1 1 auto;
  min-width: 0;
}
.course-card .cc-title {
  display: block;
  font: 600 15px/1.25 'Onest', system-ui;
  color: var(--text);
}
.course-card .cc-sub {
  display: block;
  font: 400 12.5px/1.3 'Onest', system-ui;
  color: var(--text-secondary);
  margin-top: 3px;
}
.course-card .cc-go {
  flex: 0 0 auto;
  font: 600 13px 'Onest', system-ui;
  color: var(--system-blue);
  white-space: nowrap;
}


/* --- S-ANALYTICS: owner-only product dashboard -------------------------------------------------
   Every chart here is a SINGLE-series horizontal magnitude bar, so there is no legend and no
   categorical palette: identity comes from the section heading, magnitude from bar length, and every
   bar is direct-labelled with its absolute value. That direct labelling is deliberate — it is the
   relief that lets a fill sit near the 3:1 contrast line, and it means a colour-blind reader never has
   to distinguish two hues to read the chart (the two funnels never share a surface).
   Fills are the darker steps of the phase hues so they clear 3:1 on the light surface; dark mode uses
   its own lighter steps chosen against #1c1c1e rather than an automatic flip. */
#app.analytics-screen .body {
  padding-bottom: 24px;
}
.an-windows {
  display: flex;
  gap: 6px;
  margin: 2px 2px 16px;
}
.an-win {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 9px 0;
  font: 600 14px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
  background: var(--surface-grouped);
}
.an-win.on {
  background: var(--text);
  color: var(--bg);
}
.an-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.an-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface-grouped);
}
.an-tile-l {
  font: 500 12px/1.2 -apple-system, 'Onest', system-ui;
  color: var(--text-secondary);
}
.an-tile-v {
  font: 700 26px/1.1 -apple-system, 'Onest', system-ui;
  letter-spacing: -0.02em;
  color: var(--text);
}
.an-tile-s {
  font: 400 11px/1.3 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.an-chart {
  margin: 0 2px 20px;
}
.an-row {
  margin-bottom: 12px;
}
.an-rowhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.an-label {
  font: 500 14px/1.25 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.an-lost {
  flex: none;
  font: 600 12px/1 -apple-system, 'Onest', system-ui;
  color: var(--system-red);
}
/* the track is the 100% reference; without it a short bar reads as "no data" rather than "few" */
.an-track {
  height: 10px;
  border-radius: 5px;
  background: var(--surface-grouped);
  overflow: hidden;
}
.an-fill {
  display: block;
  height: 100%;
  border-radius: 5px; /* rounded data-end, anchored to the baseline */
  transition: width 260ms ease-out;
}
.an-learn {
  background: #248a3d;
}
.an-offer {
  background: #0a68c9;
}
.an-drop {
  background: #8944ab;
}
:root.dark .an-learn {
  background: #4cc76a;
}
:root.dark .an-offer {
  background: #5ba9f5;
}
:root.dark .an-drop {
  background: #c084e8;
}
/* values wear TEXT tokens, never the series colour */
.an-vals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
}
.an-vals b {
  font: 700 15px/1 -apple-system, 'Onest', system-ui;
  color: var(--text);
}
.an-vals span {
  font: 400 12px/1 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
}
.an-note {
  font: 400 12px/1.45 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
  margin: -6px 2px 12px;
}
.an-empty {
  font: 400 14px/1.4 -apple-system, 'Onest', system-ui;
  color: var(--text-tertiary);
  margin: 0 2px 18px;
}
.an-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font: 400 13px/1.3 -apple-system, 'Onest', system-ui;
}
.an-table th {
  text-align: right;
  font: 600 11px/1 -apple-system, 'Onest', system-ui;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 0 0 8px;
}
.an-table th:first-child,
.an-table td:first-child {
  text-align: left;
}
.an-table td {
  text-align: right;
  padding: 7px 0;
  border-top: 1px solid var(--surface-grouped);
  color: var(--text-secondary);
}
.an-table td b {
  color: var(--text);
}
.an-day {
  position: relative;
  color: var(--text) !important;
}
/* a recessive in-cell sparkline: relative volume per day without a second axis */
.an-spark {
  position: absolute;
  left: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: #248a3d;
  opacity: 0.5;
}
:root.dark .an-spark {
  background: #4cc76a;
}