/* 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;
}

@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: 20px;
  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;
}
/* When the current row is the first/last in the track card, bleed its green fill into the card's 8px
   vertical padding so no card-bg strip peeks above/below; the card's overflow:hidden rounds the fill's
   outer corners to the card radius. Base row padding-top/bottom is 13px, so +8 keeps content in place. */
#app.map-screen .row.current:first-child {
  margin-top: -8px;
  padding-top: 21px;
}
#app.map-screen .row.current:last-child {
  margin-bottom: -8px;
  padding-bottom: 21px;
}
#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: 20px;
  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;
}
#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;
}