:root {
  --black: #0b0b0f;
  --ink: #16161f;
  --muted: #666879;
  --line: #dedff0;
  --paper: #ffffff;
  --soft: #f4f5fb;
  --blue: #3d3bff;
  --lime: #d8ff28;
  --coral: #fcaca9;
  --mint: #d7f6e7;
  --shadow: 0 24px 80px rgba(22, 22, 31, 0.15);
  --content-width: 1344px;
  --content-gutter: 128px;
  --screen-height: calc(100vh - 92px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 44%, rgba(61, 59, 255, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(61, 59, 255, 0.07), transparent 34%),
    linear-gradient(315deg, rgba(216, 255, 40, 0.1), transparent 34%),
    #f7f7fb;
  font-family: Graphik, Inter, Arial, sans-serif;
}

button,
input {
  font: inherit;
}

.app {
  width: min(var(--content-width), calc(100% - var(--content-gutter)));
  margin: 0 auto;
  padding: 18px 0 0;
}

body:has(#screen-hero.active) .app {
  width: min(var(--content-width), calc(100% - var(--content-gutter)));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  backdrop-filter: blur(18px);
}

.brand img {
  display: block;
  width: 132px;
  height: auto;
}

.topbar__context {
  justify-self: end;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.progress {
  width: min(520px, 42vw);
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

body:has(#screen-hero.active) .progress {
  display: grid;
  justify-self: end;
  width: min(520px, 42vw);
}

body:has(#screen-hero.active) .topbar__context {
  display: none;
}

.progress__track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(22, 22, 31, 0.12);
}

.progress__track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.35s ease;
}

.stage {
  min-height: var(--screen-height);
}

body:has(#screen-task.active) {
  overflow: hidden;
}

body:has(#screen-task.active) .app {
  width: min(var(--content-width), calc(100% - var(--content-gutter)));
  padding-bottom: 0;
}

body:has(#screen-task.active) .stage {
  min-height: auto;
}

.screen {
  display: none;
  animation: rise 0.35s ease both;
}

.screen.active {
  display: block;
}

.hero {
  min-height: var(--screen-height);
  display: grid;
  grid-template-columns: minmax(420px, 0.78fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  padding: 4px 0 22px;
}

.hero__copy {
  display: grid;
  gap: clamp(20px, 2.7vh, 30px);
  max-width: 590px;
}

.eyebrow {
  margin: 0;
  width: fit-content;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  max-width: 590px;
  font-size: clamp(54px, 5.6vw, 84px);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: 0;
}

h3 {
  font-size: 26px;
  line-height: 1.05;
}

.lead {
  max-width: 570px;
  color: var(--muted);
  font-size: clamp(19px, 1.55vw, 22px);
  line-height: 1.44;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 590px;
}

.hero-points span {
  min-height: 68px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(61, 59, 255, 0.12);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.28;
  box-shadow: 0 10px 30px rgba(22, 22, 31, 0.045);
}

.hero-points i {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(61, 59, 255, 0.1);
  flex: 0 0 auto;
}

.hero-points i::before,
.hero-points i::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--blue);
}

.hero-points span:nth-child(1) i::before {
  left: 9px;
  top: 9px;
  width: 6px;
  height: 6px;
  box-shadow: 10px 0 0 var(--blue), 5px 10px 0 var(--blue);
}

.hero-points span:nth-child(1) i::after {
  left: 11px;
  top: 11px;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px solid rgba(61, 59, 255, 0.65);
}

.hero-points span:nth-child(2) i::before {
  inset: 9px;
  background: transparent;
  border: 2px solid var(--blue);
  border-radius: 7px;
}

.hero-points span:nth-child(2) i::after {
  left: 15px;
  top: 7px;
  width: 5px;
  height: 5px;
  box-shadow: 0 8px 0 var(--blue), 0 16px 0 var(--blue);
}

.hero-points span:nth-child(3) i::before {
  left: 9px;
  top: 8px;
  width: 16px;
  height: 18px;
  background: transparent;
  border: 2px solid var(--blue);
  border-radius: 6px;
}

.hero-points span:nth-child(3) i::after {
  left: 13px;
  top: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  background: transparent;
  transform: rotate(45deg);
}

.hero__actions > span {
  max-width: 360px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.35;
}

.btn {
  border: 0;
  border-radius: 8px;
  min-height: 56px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta {
  width: min(100%, 310px);
  min-height: 62px;
  padding: 0 26px;
  justify-content: space-between;
  font-size: 17px;
  box-shadow: 0 18px 42px rgba(61, 59, 255, 0.22);
}

.hero-cta span {
  transition: transform 0.2s ease;
}

.hero-cta__arrow {
  position: relative;
  width: 28px;
  height: 16px;
  flex: 0 0 auto;
}

.hero-cta__arrow::before,
.hero-cta__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  background: currentColor;
}

.hero-cta__arrow::before {
  width: 25px;
  height: 2px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.hero-cta__arrow::after {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  background: transparent;
  transform: translateY(-50%) rotate(45deg);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(61, 59, 255, 0.25);
}

.hero-cta:hover span {
  transform: translateX(5px);
}

.btn--primary {
  background: var(--blue);
}

.workdesk {
  position: relative;
  min-height: clamp(560px, 74vh, 700px);
  margin-right: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 42% 18%, rgba(255, 255, 255, 0.9), transparent 28%),
    radial-gradient(circle at 78% 36%, rgba(61, 59, 255, 0.16), transparent 34%),
    #f7f7fb;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(61, 59, 255, 0.13);
}

.workdesk::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 12%;
  background: linear-gradient(90deg, #f7f7fb 0%, rgba(247, 247, 251, 0.48) 36%, rgba(247, 247, 251, 0) 100%);
  pointer-events: none;
}

.workdesk::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 16%;
  background: linear-gradient(0deg, rgba(247, 247, 251, 0.62), rgba(247, 247, 251, 0));
  pointer-events: none;
}

.workdesk__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.03) contrast(1.01);
  transform: scale(1.015);
}

.calc-table div,
.todo-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.panel {
  min-height: var(--screen-height);
  display: grid;
  align-content: center;
  gap: 20px;
}

.panel--narrow {
  max-width: 900px;
  margin: 0 auto;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}

body:has(#screen-situation.active),
body:has(#screen-motivation.active),
body:has(#screen-age.active),
body:has(#screen-barrier.active),
body:has(#screen-processing.active) {
  background:
    radial-gradient(circle at 84% 18%, rgba(61, 59, 255, 0.1), transparent 25%),
    radial-gradient(circle at 16% 82%, rgba(216, 255, 40, 0.13), transparent 24%),
    var(--bg);
}

.processing-card {
  width: min(100%, 900px);
  min-height: var(--screen-height);
  margin: 0 auto;
  padding: clamp(24px, 4vh, 42px) 0 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.processing-card__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 54px;
}

.processing-card__kicker {
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--lime);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.processing-card h2 {
  margin-top: 18px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.02;
}

.processing-card__lead {
  max-width: 680px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
}

.processing-orbit {
  --processing-value: 0deg;
  position: relative;
  width: 176px;
  height: 176px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--blue) var(--processing-value), rgba(61, 59, 255, 0.1) 0);
  box-shadow: 0 20px 55px rgba(61, 59, 255, 0.16);
}

.processing-orbit::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: #fff;
}

.processing-orbit__core {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.processing-orbit__core strong {
  font-size: 34px;
  line-height: 1;
}

.processing-orbit__core span {
  color: var(--muted);
  font-size: 13px;
}

.processing-orbit__dot {
  position: absolute;
  z-index: 2;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 5px 14px rgba(22, 22, 31, 0.15);
  animation: orbitPulse 1.4s ease-in-out infinite alternate;
}

.processing-orbit__dot--one { top: 3px; left: 36px; }
.processing-orbit__dot--two { right: -1px; bottom: 49px; animation-delay: 0.35s; }
.processing-orbit__dot--three { left: 7px; bottom: 22px; animation-delay: 0.7s; }

.processing-card__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.processing-step {
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
  opacity: 0.46;
  transform: translateY(5px);
  transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.processing-step__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: rgba(61, 59, 255, 0.09);
  font-size: 19px;
  font-weight: 700;
}

.processing-step i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: rgba(61, 59, 255, 0.08);
  font-style: normal;
  font-weight: 900;
  transition: color 0.2s ease, background 0.2s ease;
}

.processing-step.is-ready {
  border-color: rgba(164, 196, 0, 0.28);
  color: var(--ink);
  background: rgba(216, 255, 40, 0.09);
  opacity: 1;
  transform: translateY(0);
}

.processing-step.is-ready .processing-step__icon {
  color: var(--ink);
  background: rgba(216, 255, 40, 0.75);
}

.processing-step.is-ready i {
  color: var(--ink);
  background: var(--lime);
}

.processing-card__status {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.processing-track {
  width: 100%;
  height: 7px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(61, 59, 255, 0.1);
}

.processing-track i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #8e8cff 58%, var(--lime));
  transition: width 0.08s linear;
}

.processing-card__status.is-complete {
  color: var(--ink);
}

@keyframes orbitPulse {
  from { transform: scale(0.82); opacity: 0.55; }
  to { transform: scale(1.15); opacity: 1; }
}

body:has(#screen-name.active),
body:has(#screen-email.active) {
  background:
    radial-gradient(circle at 80% 26%, rgba(61, 59, 255, 0.12), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(216, 255, 40, 0.11), transparent 24%),
    var(--bg);
}

.access-screen {
  width: min(100%, 1040px);
  min-height: var(--screen-height);
  margin: 0 auto;
  padding: 30px 0 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;
  gap: clamp(48px, 7vw, 92px);
}

.access-screen__copy {
  min-width: 0;
}

.access-screen__kicker {
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--lime);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.access-screen h2 {
  max-width: 700px;
  margin-top: 18px;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.04;
}

.access-screen__copy > p:not(.access-screen__kicker) {
  max-width: 650px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.42;
}

.access-form {
  max-width: 610px;
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.access-form > label:first-child {
  font-size: 14px;
  font-weight: 700;
}

.access-field {
  min-height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--blue);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.access-field:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(61, 59, 255, 0.12), 0 10px 28px rgba(61, 59, 255, 0.1);
}

.access-field.is-error {
  border-color: #e0202a;
  box-shadow: 0 0 0 3px rgba(224, 32, 42, 0.08);
}

.access-field > span {
  display: grid;
  place-items: center;
  align-self: stretch;
  color: var(--blue);
  background: rgba(61, 59, 255, 0.06);
  font-size: 16px;
  font-weight: 800;
}

.access-field input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 16px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 17px;
  font-weight: 400;
}

.access-form__error {
  color: #c5222b;
  font-size: 13px;
  line-height: 1.3;
}

.access-form__submit {
  width: 100%;
  min-height: 58px;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 16px;
}

.access-form__submit:disabled {
  opacity: 0.8;
  cursor: default;
}

.access-form .skb-consent__item,
.access-form .skb-consent__note {
  color: var(--muted);
}

.access-form .skb-consent__item.skb-consent--error .skb-consent__label {
  color: #c5222b;
}

.access-screen__visual {
  display: grid;
  place-items: center;
}

.ready-document {
  width: 290px;
  min-height: 350px;
  display: grid;
  align-content: start;
  gap: 13px;
  border: 1px solid rgba(61, 59, 255, 0.13);
  border-radius: 20px;
  padding: 28px 24px;
  background: #fff;
  box-shadow: 0 28px 75px rgba(61, 59, 255, 0.16);
  transform: rotate(3deg);
}

.ready-document > span {
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.ready-document > i {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 18px auto 22px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  font-style: normal;
  font-size: 28px;
  font-weight: 900;
}

.ready-document > b {
  border-top: 1px solid var(--line);
  padding: 13px 0 0;
  font-size: 16px;
  font-weight: 500;
}

.access-lock {
  width: 300px;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 59, 255, 0.12);
  border-radius: 50% 50% 24px 24px;
  padding: 30px 24px;
  background: linear-gradient(180deg, rgba(61, 59, 255, 0.08), #fff 62%);
  box-shadow: 0 28px 75px rgba(61, 59, 255, 0.15);
  text-align: center;
}

.access-lock > i {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: #fff;
  font-style: normal;
  font-size: 34px;
  box-shadow: 0 12px 30px rgba(61, 59, 255, 0.14);
}

.access-lock > strong { margin-top: 24px; font-size: 20px; }
.access-lock > span { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.access-lock > div { display: flex; gap: 7px; margin-top: 24px; }
.access-lock > div b { width: 34px; height: 6px; border-radius: 99px; background: rgba(61, 59, 255, 0.13); }
.access-lock > div b:first-child { background: var(--lime); }

.acquaintance {
  width: min(100%, 820px);
  min-height: var(--screen-height);
  margin: 0 auto;
  padding: clamp(22px, 3vh, 34px) 0 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.acquaintance__progress {
  width: 100%;
  margin-bottom: clamp(18px, 2.5vh, 26px);
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
}

.acquaintance__progress span {
  display: block;
  margin-bottom: 0;
}

.acquaintance__progress::after {
  content: none;
}

.acquaintance__progress i {
  display: none;
}

.acquaintance > .eyebrow {
  border-color: transparent;
  background: var(--lime);
}

.acquaintance h2 {
  max-width: 820px;
  margin-top: 16px;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.1;
  font-weight: 800;
}

.acquaintance > .lead {
  max-width: 720px;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
}

.acquaintance__choices {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: clamp(20px, 2.8vh, 28px);
}

.acquaintance-choice {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(22, 22, 31, 0.12);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(22, 22, 31, 0.045);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.acquaintance-choice:hover,
.acquaintance-choice:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 16px 40px rgba(61, 59, 255, 0.13);
  transform: translateY(-2px);
}

.acquaintance-choice i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: rgba(61, 59, 255, 0.09);
  font-style: normal;
}

.acquaintance__choices--compact {
  grid-template-columns: 1fr;
}

.answer-modal[hidden] {
  display: none;
}

.answer-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.answer-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 31, 0.56);
  backdrop-filter: blur(7px);
}

.answer-modal__card {
  position: relative;
  z-index: 1;
  width: min(100%, 590px);
  border-radius: 24px;
  padding: clamp(30px, 5vw, 52px);
  background: #fff;
  box-shadow: 0 30px 90px rgba(22, 22, 31, 0.28);
  animation: modalRise 0.3s ease both;
}

.answer-modal__mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  font-size: 22px;
  font-weight: 900;
}

.answer-modal__card h2 {
  margin-top: 22px;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.1;
  font-weight: 800;
}

.answer-modal__card > p:last-of-type {
  margin-top: 16px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
}

.answer-modal__button {
  width: 100%;
  margin-top: 28px;
  justify-content: space-between;
  font-size: 16px;
}

body.has-answer-modal {
  overflow: hidden;
}

@keyframes modalRise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.welcome {
  min-height: var(--screen-height);
  padding: clamp(8px, 1.4vh, 14px) 0 0;
  display: flex;
  align-items: center;
}

.day-app {
  width: 100%;
  max-height: calc(var(--screen-height) - 12px);
  border: 1px solid rgba(22, 22, 31, 0.09);
  border-radius: 8px;
  background: #fdfdff;
  box-shadow: 0 14px 34px rgba(22, 22, 31, 0.07);
  overflow: hidden;
  animation: desktopPop 0.35s ease both;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
}

body:has(#screen-welcome.active) .app {
  width: min(var(--content-width), calc(100% - var(--content-gutter)));
  padding-bottom: 0;
}

body:has(#screen-welcome.active) .stage {
  min-height: auto;
}

.day-app__rail {
  min-height: 100%;
  padding: 26px 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 42px;
  border-right: 1px solid rgba(22, 22, 31, 0.07);
  background: rgba(255, 255, 255, 0.58);
}

.rail-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(70, 74, 95, 0.58);
  font-size: 20px;
  font-weight: 650;
}

.rail-icon--active {
  background: rgba(61, 59, 255, 0.1);
  color: var(--blue);
  box-shadow: none;
}

.rail-icon--settings {
  margin-top: auto;
}

.day-app__workspace {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.9) 46%, #fff 100%),
    radial-gradient(circle at 92% 22%, rgba(167, 193, 168, 0.2), transparent 18%),
    #fdfdff;
}

.day-app__workspace::before {
  content: "";
  position: absolute;
  top: 68px;
  right: -34px;
  width: 150px;
  height: 230px;
  background:
    radial-gradient(ellipse at 42% 18%, rgba(92, 116, 91, 0.12) 0 20%, transparent 22%),
    radial-gradient(ellipse at 60% 42%, rgba(92, 116, 91, 0.1) 0 19%, transparent 21%),
    radial-gradient(ellipse at 34% 64%, rgba(92, 116, 91, 0.09) 0 18%, transparent 20%);
  filter: blur(1px);
  opacity: 0.55;
  pointer-events: none;
}

.day-app__header,
.day-app__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 38px);
  padding: clamp(28px, 4.8vh, 54px) clamp(34px, 5vw, 72px);
}

.day-app__header {
  align-items: flex-start;
  padding-bottom: clamp(16px, 2.6vh, 28px);
  background: rgba(253, 253, 255, 0.72);
}

.day-app__title {
  display: grid;
  gap: 12px;
}

.day-app__kicker {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.day-app h2 {
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: 0.94;
}

.day-app__badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(61, 59, 255, 0.11);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(61, 59, 255, 0.045);
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}

.day-app__badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2bd475;
}

.day-app__body {
  position: relative;
  z-index: 1;
  padding: 0 clamp(34px, 5vw, 72px) clamp(18px, 3vh, 28px);
  display: block;
}

.day-plan {
  border: 1px solid rgba(22, 22, 31, 0.08);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(22, 22, 31, 0.04);
}

.plan-grid {
  padding: 0;
  display: grid;
  gap: 0;
}

.plan-task {
  min-height: clamp(66px, 8.2vh, 82px);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  border: 0;
  border-left: 5px solid transparent;
  border-radius: 0;
  padding: clamp(10px, 1.5vh, 15px) clamp(22px, 3vw, 34px);
  background: #fff;
  box-shadow: none;
  animation: taskSlide 0.42s ease both;
}

.plan-task + .plan-task {
  border-top: 1px solid rgba(22, 22, 31, 0.08);
}

.plan-task:first-child {
  border-left-color: rgba(61, 59, 255, 0.7);
  background: linear-gradient(90deg, rgba(61, 59, 255, 0.035), rgba(255, 255, 255, 0.98) 44%);
}

.plan-task h3 {
  font-size: clamp(18px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.18;
}

.plan-task p {
  margin-top: 7px;
  color: var(--muted);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.32;
}

.task-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: rgba(61, 59, 255, 0.82);
  background: rgba(61, 59, 255, 0.065);
  font-size: 24px;
  font-weight: 650;
}

.task-icon--onec {
  color: rgba(75, 156, 94, 0.82);
  background: rgba(86, 169, 104, 0.11);
  font-size: 21px;
}

.task-icon--calc {
  color: rgba(19, 149, 255, 0.8);
  background: rgba(19, 149, 255, 0.09);
}

.task-icon--tax {
  color: rgba(255, 99, 115, 0.82);
  background: rgba(255, 99, 115, 0.1);
}

.task-icon--deadline {
  color: rgba(213, 145, 0, 0.82);
  background: rgba(247, 174, 0, 0.12);
}

.plan-task--docs {
  animation-delay: 0.18s;
}

.plan-task--onec {
  border-left-color: transparent;
  animation-delay: 0.28s;
}

.plan-task--calc {
  border-left-color: transparent;
  animation-delay: 0.48s;
}

.plan-task--tax {
  border-left-color: transparent;
  animation-delay: 0.38s;
}

.plan-task--deadline {
  border-left-color: transparent;
  animation-delay: 0.58s;
}

.work-note {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(22, 22, 31, 0.1);
}

.work-notes {
  width: min(360px, 34vw);
  min-height: 170px;
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
}

.work-note {
  position: absolute;
  min-width: 150px;
  min-height: 118px;
  padding: 30px 18px 18px;
  display: grid;
  align-items: center;
  color: var(--ink);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.18;
  animation: stickyPin 0.35s ease both;
}

.work-note::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #aeb1bf;
  box-shadow: 0 3px 7px rgba(22, 22, 31, 0.24);
  transform: translateX(-50%);
}

.work-note--yellow {
  background: #fff5a8;
  top: 0;
  right: 164px;
  --rotate: -10deg;
  animation-delay: 0.45s;
}

.work-note--green {
  background: #e7f5df;
  top: 34px;
  right: 12px;
  --rotate: 3deg;
  animation-delay: 0.58s;
}

.day-app__footer {
  align-items: center;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  padding-top: clamp(14px, 2.2vh, 22px);
  padding-bottom: clamp(14px, 2.2vh, 22px);
  border-top: 1px solid rgba(22, 22, 31, 0.07);
  background: rgba(253, 253, 255, 0.74);
}

.day-app__footer div {
  display: grid;
  gap: 5px;
}

.footer-icon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(22, 22, 31, 0.08);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(22, 22, 31, 0.64);
  font-size: 20px;
  box-shadow: none;
}

.day-app__footer b {
  color: rgba(22, 22, 31, 0.78);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 500;
}

.day-app__footer span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.role-card,
.answer {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 10px;
  align-content: start;
}

.role-card:hover,
.answer:hover {
  border-color: var(--blue);
  box-shadow: 0 16px 40px rgba(61, 59, 255, 0.14);
}

.role-card strong,
.answer {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.role-card span {
  color: var(--muted);
  line-height: 1.35;
}

.task-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  height: calc(100vh - 86px);
  min-height: 0;
  overflow: hidden;
  padding-top: 22px;
}

.task-card,
.offer,
.lead-form,
.result__main {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.route__item span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--ink);
  font-weight: 800;
  flex: 0 0 auto;
}

.route__item span {
  background: var(--blue);
  color: #fff;
}

.task-card {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr);
  grid-template-areas:
    "head scene"
    "options scene";
  gap: 18px;
  min-height: 0;
  overflow: hidden;
}

.task-card:has(.task-options--doc) {
  grid-template-areas: "head scene";
  grid-template-rows: minmax(0, 1fr);
}

.task-card:has(.task-options--onec) {
  grid-template-areas: "head scene";
  grid-template-rows: minmax(0, 1fr);
}

.task-card__head {
  grid-area: head;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  align-items: center;
  align-self: stretch;
  gap: 24px;
  border-radius: 8px;
  background: var(--soft);
  padding: clamp(22px, 2.3vw, 34px);
}

.task-meta {
  display: grid;
  gap: 18px;
}

.task-meta h2 {
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.1;
  font-weight: 800;
}

.task-pill {
  width: fit-content;
  border-radius: 999px;
  background: var(--lime);
  padding: 10px 18px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
}

.task-text {
  max-width: 820px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.36;
}

.task-hint {
  max-width: 430px;
  border: 1px solid rgba(61, 59, 255, 0.16);
  border-radius: 8px;
  background: rgba(61, 59, 255, 0.045);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.task-hint[hidden] {
  display: none;
}

.task-hint span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
}

.task-hint p {
  margin: 0;
  color: #555869;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.task-scene {
  position: relative;
  grid-area: scene;
  min-height: 0;
  border-radius: 8px;
  background: var(--soft);
  padding: 8px 8px 66px;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: start;
}

.interaction-guide {
  width: min(100%, 920px);
  min-height: 26px;
  margin: 0 auto 4px;
  border-radius: 8px;
  padding: 5px 10px;
  color: #292b1d;
  background: rgba(216, 255, 40, 0.32);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.interaction-guide--active {
  background: rgba(216, 255, 40, 0.46);
}

.interaction-guide p::before {
  content: "•";
  margin-right: 6px;
  color: #667a00;
  font-weight: 900;
}

.task-card:has(.task-options--doc) .task-scene {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 0;
}

.calc-table,
.todo-list {
  max-width: 620px;
  margin: 0 auto;
  border-radius: 8px;
  background: #fff;
  padding: 22px;
  display: grid;
  gap: 14px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
}

.calc-table span {
  color: var(--muted);
}

.doc-review {
  width: min(100%, 920px);
  margin: 0 auto;
  display: grid;
  align-items: start;
  zoom: 0.76;
}

.doc-review__sheet {
  border: 1px solid rgba(22, 22, 31, 0.12);
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
}

.doc-review__top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 7px;
}

.doc-review__top span,
.doc-zone span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.doc-review__top b {
  font-size: 17px;
}

.doc-review__title {
  margin: 0;
  font-size: 23px;
  text-align: center;
}

.doc-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.doc-zone {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  display: grid;
  gap: 3px;
  background: #f7f7fb;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.doc-zone:not(.doc-zone--signature):hover {
  border-color: var(--blue);
  background: rgba(61, 59, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(61, 59, 255, 0.12);
}

.doc-zone.is-selected,
.signature-card.is-selected {
  border-color: var(--blue);
  background: rgba(61, 59, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(61, 59, 255, 0.12);
}

.doc-zone.is-warning,
.signature-card.is-warning {
  border-color: #e99a3b;
  box-shadow: 0 0 0 3px rgba(233, 154, 59, 0.15);
}

.doc-zone small {
  color: var(--muted);
  line-height: 1.25;
  font-size: 12px;
}

.doc-zone--amount {
  margin-left: auto;
  max-width: 420px;
  background: #f3f6ff;
}

.doc-zone--signature {
  border-color: transparent;
  max-width: none;
  min-height: 74px;
  background: #fff;
  box-shadow: none;
  cursor: default;
}

.doc-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.signature-card {
  min-height: 52px;
  border: 1px solid transparent;
  border-top: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 8px 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  display: grid;
  gap: 3px;
  align-content: start;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.signature-card:hover {
  border-color: var(--blue);
  background: rgba(61, 59, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(61, 59, 255, 0.12);
}

.doc-signatures em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.signature-line {
  position: relative;
  min-height: 22px;
  display: block;
}

.signature-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 5px;
  height: 1px;
  background: #aeb1bf;
}

.signature-mark {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #26306d;
  font-family: "Brush Script MT", "Snell Roundhand", cursive;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  transform: rotate(-6deg);
}

.doc-signature-missing {
  color: var(--muted);
}

.doc-signature-missing .signature-line {
  min-height: 22px;
}

.doc-review table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.2;
}

.doc-review th,
.doc-review td {
  border: 1px solid var(--line);
  padding: 5px 7px;
  text-align: left;
  vertical-align: top;
}

.doc-review th {
  background: #f7f7fb;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.doc-hint {
  grid-column: 1 / -1;
  border-radius: 8px;
  background: var(--mint);
  padding: 14px;
  display: grid;
  gap: 4px;
}

.doc-hint b {
  font-size: 18px;
}

.doc-hint span {
  color: var(--muted);
  line-height: 1.35;
}

.onec {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transform-origin: top left;
  overflow: hidden;
  border: 1px solid #b8b18f;
  border-radius: 8px;
  background: #f5f0d1;
  color: #1f2229;
  font-family: Arial, sans-serif;
  box-shadow: 0 18px 46px rgba(67, 61, 34, 0.18);
}

@supports (zoom: 1) {
  .task-card:has(.task-options--onec) .onec {
    width: calc(100% / 0.87);
    zoom: 0.87;
  }
}

.onec-workbench {
  width: 100%;
  min-width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 10px;
  align-items: start;
  align-content: start;
  justify-self: stretch;
}

.onec__chrome {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: linear-gradient(#efe6a9, #d8ca78);
  border-bottom: 1px solid #b7aa66;
  font-size: 13px;
  font-weight: 700;
}

.onec__chrome span {
  margin-right: auto;
}

.onec__chrome i {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(70, 65, 42, 0.38);
  border-radius: 50%;
  background: #fff4ad;
}

.onec__nav {
  display: flex;
  gap: 2px;
  padding: 3px 8px 0;
  background: #ede5bd;
  overflow-x: auto;
}

.onec__nav b {
  flex: 0 0 auto;
  border: 1px solid #c9bf86;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #f8f4dc;
  padding: 4px 10px;
  font-size: 12px;
}

.onec__toolbar {
  display: flex;
  gap: 8px;
  padding: 5px 8px;
  background: #f8f4dc;
  border-top: 1px solid #ded4a2;
  border-bottom: 1px solid #d7c989;
  overflow-x: auto;
}

.onec__toolbar button {
  flex: 0 0 auto;
  border: 1px solid #b8ac78;
  border-radius: 4px;
  padding: 4px 10px;
  background: linear-gradient(#fffdf1, #e9dfaa);
  color: #1f2229;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.onec__toolbar button:hover {
  border-color: #8f843f;
  background: #fff7c6;
}

.onec-post,
.onec-close {
  box-shadow: inset 0 0 0 1px rgba(255, 230, 100, 0.9);
}

.onec__body {
  display: grid;
  gap: 6px;
  background: #fffdf3;
  padding: 7px 8px;
}

.onec__title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e0d9b7;
  padding-bottom: 5px;
}

.onec__title div {
  display: grid;
  gap: 3px;
}

.onec__title span {
  color: #707070;
  font-size: 12px;
  font-weight: 700;
}

.onec__title strong {
  font-size: 17px;
}

.onec__title mark {
  border: 1px solid #d9c77d;
  border-radius: 4px;
  background: #fff1a8;
  padding: 4px 7px;
  color: #5f541a;
  font-size: 12px;
  font-weight: 700;
}

.onec-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
}

.onec-form label,
.onec-field {
  min-height: 40px;
  border: 1px solid #ddd4aa;
  border-radius: 4px;
  background: #fff;
  padding: 5px 9px;
}

.onec-form label,
.onec-field__button {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.onec-form label span,
.onec-field span {
  color: #626262;
  font-size: 12px;
  font-weight: 700;
}

.onec-form label b,
.onec-field b {
  min-width: 0;
  overflow: visible;
  color: #1f2229;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.onec-field {
  position: relative;
  padding: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.onec-field[data-onec-drop="expense"] {
  grid-column: 1 / -1;
}

.onec-field.is-required {
  background: rgba(61, 59, 255, 0.055);
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(61, 59, 255, 0.12), 0 0 0 2px rgba(61, 59, 255, 0.07);
}

.onec-field.is-filled {
  background: #f6fff3;
  border-color: #a7c88c;
}

.onec-field.has-value {
  background: #fff;
  border-color: #ddd4aa;
}

.onec-field.is-wrong {
  background: #fff0ec;
  border-color: #e06d54;
}

.onec-field.is-warning {
  border-color: #d94b4b;
  box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.18);
}

.onec-field.is-open {
  z-index: 3;
  border-color: #7568d9;
  box-shadow: 0 0 0 3px rgba(61, 59, 255, 0.14);
}

.onec-field.is-drag-over {
  border-color: #7568d9;
  background: #eef0ff;
  box-shadow: 0 0 0 3px rgba(61, 59, 255, 0.16);
}

.onec-field__button {
  width: 100%;
  min-height: 38px;
  border: 0;
  background: transparent;
  padding: 5px 9px;
  text-align: left;
  cursor: pointer;
}

.onec-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 10px;
}

.onec-table th,
.onec-table td {
  border: 1px solid #d8d0ab;
  padding: 3px 6px;
  text-align: left;
}

.onec-table th {
  background: #eee7c5;
  color: #5f5b48;
  font-weight: 700;
}

.onec-table td:last-child,
.onec-table td:nth-last-child(2) {
  white-space: nowrap;
}

.onec-total {
  justify-self: end;
  min-width: 220px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #d8d0ab;
  border-radius: 4px;
  background: #fff;
  padding: 6px 10px;
}

.onec-total span {
  color: #626262;
  font-weight: 700;
}

.onec-status {
  min-height: 38px;
  border: 1px solid rgba(61, 59, 255, 0.2);
  border-radius: 8px;
  padding: 9px 12px;
  color: #4f5262;
  background: #fff;
  font-size: 13px;
  line-height: 1.35;
}

.onec-status--error {
  border-color: #d18965;
  background: #fff0e8;
  color: #8b3f18;
}

.onec-status--success {
  border-color: #8ab76e;
  background: #edf9e9;
  color: #315d22;
}

.todo-list div {
  border-radius: 8px;
  background: var(--soft);
  padding: 12px;
}

.task-card:has(.task-options--tax) {
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr);
}

.task-card:has(.task-options--tax) .task-scene {
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
  padding: 8px;
}

.task-card:has(.task-options--payroll),
.task-card:has(.task-options--deadline) {
  grid-template-columns: minmax(300px, 0.34fr) minmax(0, 0.66fr);
}

.task-card:has(.task-options--payroll) {
  grid-template-areas: "head scene";
  grid-template-rows: minmax(0, 1fr);
}

.task-card:has(.task-options--deadline) {
  grid-template-areas: "head scene";
  grid-template-rows: minmax(0, 1fr);
}

.task-card:has(.task-options--tax) .task-card__head,
.task-card:has(.task-options--payroll) .task-card__head,
.task-card:has(.task-options--deadline) .task-card__head {
  gap: 26px;
}

.task-card:has(.task-options--tax) .task-text,
.task-card:has(.task-options--payroll) .task-text,
.task-card:has(.task-options--deadline) .task-text {
  max-width: 430px;
}

.tax-chat {
  width: min(100%, 900px);
  height: 100%;
  max-height: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(22, 22, 31, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)),
    #f4f0e7;
  box-shadow: 0 16px 38px rgba(22, 22, 31, 0.08);
}

.tax-chat__bar {
  min-height: 66px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(22, 22, 31, 0.07);
  backdrop-filter: blur(12px);
}

.tax-chat__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f1e0c8, #d8ff28);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.tax-chat__avatar::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2bd475;
}

.tax-chat__contact {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.tax-message span,
.tax-check span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.tax-chat__bar b {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tax-chat__bar span {
  min-width: 0;
  overflow: hidden;
  color: #777a8b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tax-chat__body {
  min-height: 0;
  display: grid;
  gap: 11px;
  align-content: start;
  padding: 18px;
}

.tax-chat__body--action {
  padding: 0 18px 18px;
}

.tax-message {
  position: relative;
  max-width: 80%;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(168, 151, 118, 0.22);
  border-radius: 18px;
  padding: 11px 14px;
  box-shadow: 0 7px 18px rgba(22, 22, 31, 0.055);
  animation: messageIn 0.34s ease both;
}

.tax-message p {
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}

.tax-chat__footer {
  position: relative;
  border-top: 1px solid rgba(22, 22, 31, 0.06);
  background: rgba(246, 247, 251, 0.96);
  padding: 10px 18px 14px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.tax-input-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px 34px;
  align-items: end;
  gap: 7px;
}

.tax-input-icon {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: #2388e8;
  cursor: default;
  font-size: 27px;
  font-weight: 300;
  line-height: 1;
}

.tax-input-icon--soft {
  border: 1px solid rgba(35, 136, 232, 0.22);
  background: rgba(35, 136, 232, 0.07);
  font-size: 20px;
}

.tax-compose {
  min-height: 46px;
  max-height: 82px;
  overflow: hidden;
  border: 1px solid rgba(22, 22, 31, 0.08);
  border-radius: 24px;
  background: #fff;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 31, 0.025);
  transform-origin: 100% 100%;
  animation: messageIn 0.34s ease both;
  animation-delay: 0.18s;
}

.tax-compose p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.28;
}

.tax-compose p::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 3px;
  background: var(--blue);
  vertical-align: -2px;
  animation: caretBlink 0.9s steps(1) infinite;
}

.tax-compose.is-sending {
  animation: draftSend 0.72s ease both;
}

.tax-compose.is-sending p::after {
  display: none;
}

.tax-typewriter {
  display: inline;
  animation: typingText 1.15s steps(62, end) both;
}

.tax-compose.is-typed .tax-typewriter {
  animation: none;
}

.tax-reply-slot {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 2px 8px;
  color: #6c6e7f;
  font: inherit;
  line-height: 1.25;
  vertical-align: baseline;
}

.tax-reply-slot.is-filled {
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(61, 59, 255, 0.18);
}

.tax-reply-slot.is-filled:hover {
  box-shadow: inset 0 0 0 1px var(--blue), 0 8px 18px rgba(61, 59, 255, 0.12);
}

.tax-reply-slot.is-new {
  will-change: transform, opacity;
  animation: flyToMessage 0.36s ease both;
}

.tax-compose-token {
  display: inline;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--blue);
  font: inherit;
  cursor: pointer;
}

.tax-compose-token:hover {
  text-decoration: underline;
}

.tax-compose-token.is-new {
  will-change: transform, opacity;
  animation: flyToMessage 0.36s ease both;
}

.tax-compose-token.is-warning {
  border-radius: 4px;
  padding: 1px 4px;
  color: #74420f;
  background: #ffe6bd;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.tax-message--client {
  justify-self: start;
  background: #fff;
  border-bottom-left-radius: 6px;
  animation-delay: 0.05s;
}

.tax-message--thanks {
  animation: messageIn 0.34s ease both;
  animation-delay: 0.12s;
}

.tax-message--client::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.tax-message--accountant {
  justify-self: end;
  width: 80%;
  background: #ecebff;
  border: 1px solid rgba(61, 59, 255, 0.12);
  border-bottom-right-radius: 6px;
  animation-delay: 0.18s;
}

.tax-message--accountant::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background: #ecebff;
  border-right: 1px solid rgba(61, 59, 255, 0.14);
  border-bottom: 1px solid rgba(61, 59, 255, 0.14);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.tax-message--sent {
  animation: sendBubbleIn 0.34s ease both;
}

.tax-quick-panel {
  display: grid;
  gap: 0;
  width: 100%;
  animation: messageIn 0.34s ease both;
  animation-delay: 0.32s;
}

.tax-chat--steady .tax-message,
.tax-chat--steady .tax-compose,
.tax-chat--steady .tax-quick-panel {
  animation: none;
}

.tax-chat--steady .tax-compose-token.is-new {
  animation: flyToMessage 0.36s ease both;
}

.tax-quick-title {
  color: #56586a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.tax-reply-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.tax-send-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.flow-hint {
  border-radius: 8px;
  padding: 7px 10px;
  color: #885018;
  background: #fff1dd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.payroll {
  position: static;
  height: 100%;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.payroll-hint {
  align-self: end;
  margin: 0;
  padding: 0 28px 34px;
  color: #77798a;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.payroll-space--top {
  min-height: 0;
}

.payroll-space--middle {
  min-height: clamp(30px, 4vh, 40px);
}

.payroll__sheet {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(22, 22, 31, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 22, 31, 0.055);
  display: grid;
  grid-template-rows: auto minmax(90px, 0.5fr) 0 min-content minmax(30px, 0.16fr) auto;
}

.payroll__top {
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(22, 22, 31, 0.1);
  background: #fdfdff;
}

.payroll__top div {
  display: grid;
  gap: 3px;
}

.payroll__top span,
.payroll-tile span,
.payroll-slot span,
.payroll-total span,
.payroll__result span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.payroll__top b {
  font-size: 17px;
  font-weight: 700;
}

.payroll__top small {
  align-self: center;
  border-radius: 999px;
  background: rgba(216, 255, 40, 0.68);
  padding: 7px 10px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.payroll-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0 28px;
  align-self: start;
}

.payroll-tile {
  min-width: 0;
  height: 62px;
  min-height: 62px;
  border: 1px solid rgba(22, 22, 31, 0.1);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  color: var(--ink);
  text-align: center;
  cursor: grab;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.payroll-tile:hover,
.payroll-tile.is-selected {
  border-color: var(--blue);
  background: rgba(61, 59, 255, 0.045);
  box-shadow: 0 8px 18px rgba(61, 59, 255, 0.1);
}

.payroll-tile:active {
  cursor: grabbing;
}

.payroll-tile.is-used {
  opacity: 0.42;
}

.payroll-tile strong {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 700;
  line-height: 1;
}

.payroll-formula {
  min-width: 0;
  margin: 0 28px 28px;
  border: 1px solid rgba(61, 59, 255, 0.1);
  border-radius: 8px;
  background: #f5f4ff;
  padding: 12px 14px;
  display: grid;
  grid-template-columns:
    minmax(62px, 1fr) 16px
    minmax(62px, 1fr) 16px
    minmax(62px, 1fr) 16px
    minmax(62px, 1fr) 16px
    minmax(62px, 1fr) 16px
    minmax(92px, 1.1fr);
  align-items: center;
  gap: 6px;
}

.payroll-formula i {
  color: var(--blue);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.payroll-slot,
.payroll-total {
  min-height: 50px;
  border: 1px dashed rgba(61, 59, 255, 0.3);
  border-radius: 8px;
  background: #fff;
  padding: 7px;
  display: grid;
  gap: 5px;
  align-content: center;
  text-align: center;
}

.payroll-slot {
  color: var(--ink);
  cursor: pointer;
}

.payroll-slot:hover,
.payroll-slot.is-filled,
.payroll-slot.is-drag-over {
  border-style: solid;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 8px 18px rgba(61, 59, 255, 0.1);
}

.payroll-slot.is-warning {
  border-color: #d94b4b;
  box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.18);
}

.payroll-slot b,
.payroll-total b {
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.payroll-total {
  border-style: solid;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.payroll-total span {
  color: rgba(255, 255, 255, 0.72);
}

.payroll__result {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  min-height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 278px);
  gap: 14px;
  align-items: center;
}

.payroll__result span {
  grid-area: label;
}

.payroll__result strong {
  grid-area: total;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 0.95;
}

.payroll__result p {
  max-width: 520px;
  color: #747687;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.payroll__result p.payroll-action-hint {
  position: relative;
  bottom: 10px;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 7px 11px;
  color: #885018;
  background: #fff1dd;
  font-weight: 700;
}

.payroll-complete {
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: min(278px, calc(100% - 36px));
  min-height: 48px;
}

.payroll-complete:disabled {
  border-color: var(--line);
  background: #d9dae6;
  color: #626575;
  cursor: not-allowed;
  box-shadow: none;
}

.deadline-board {
  position: relative;
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(22, 22, 31, 0.07);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(22, 22, 31, 0.045);
  display: grid;
}

.deadline-board__body {
  height: 100%;
  min-height: 0;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.82fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "instruction instruction"
    "inbox plan";
  gap: clamp(12px, 1.8vw, 22px) clamp(18px, 2.8vw, 34px);
}

.deadline-inbox,
.deadline-plan {
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  display: grid;
  align-content: stretch;
}

.deadline-inbox {
  grid-area: inbox;
  overflow: hidden;
}

.deadline-plan {
  grid-area: plan;
  background: transparent;
  padding: 0;
}

.deadline-instruction {
  grid-area: instruction;
  color: #626575;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.deadline-cards {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.deadline-card {
  --marker: #c8cad7;
  --marker-soft: rgba(200, 202, 215, 0.1);
  --marker-shadow: rgba(61, 59, 255, 0.08);
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 1px solid rgba(22, 22, 31, 0.1);
  border-left: 5px solid var(--marker);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--marker-soft), rgba(255, 255, 255, 0) 44%),
    rgba(255, 255, 255, 0.92);
  padding: 10px 14px;
  color: var(--ink);
  text-align: left;
  cursor: grab;
  display: grid;
  align-content: center;
  gap: 5px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.deadline-card:hover {
  border-color: rgba(61, 59, 255, 0.42);
  border-left-color: var(--marker);
  background: rgba(61, 59, 255, 0.04);
  box-shadow: 0 10px 24px rgba(61, 59, 255, 0.12);
  transform: translateY(-1px);
}

.deadline-card:active {
  cursor: grabbing;
}

.deadline-card--critical,
.deadline-slot--critical {
  --marker: #ff6373;
  --marker-soft: rgba(255, 99, 115, 0.1);
  --marker-shadow: rgba(255, 99, 115, 0.14);
}

.deadline-card--money,
.deadline-slot--money {
  --marker: #f7ae00;
  --marker-soft: rgba(247, 174, 0, 0.12);
  --marker-shadow: rgba(247, 174, 0, 0.16);
}

.deadline-card--client,
.deadline-slot--client {
  --marker: #3d3bff;
  --marker-soft: rgba(61, 59, 255, 0.09);
  --marker-shadow: rgba(61, 59, 255, 0.12);
}

.deadline-card--routine,
.deadline-slot--routine {
  --marker: #7bb982;
  --marker-soft: rgba(123, 185, 130, 0.12);
  --marker-shadow: rgba(123, 185, 130, 0.14);
}

.deadline-card span {
  color: var(--ink);
  font-size: clamp(15px, 1.45vw, 18px);
  font-weight: 500;
  line-height: 1.15;
}

.deadline-card small,
.deadline-slot__hint {
  color: #76798a;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.25;
}

.deadline-empty {
  min-height: 80px;
  border: 1px dashed rgba(22, 22, 31, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  display: grid;
  place-items: center;
  text-align: center;
}

.deadline-slots {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.deadline-slot {
  --marker: var(--blue);
  --marker-shadow: rgba(61, 59, 255, 0.08);
  min-height: 0;
  height: 100%;
  border: 1px dashed rgba(61, 59, 255, 0.3);
  border-radius: 8px;
  background: rgba(61, 59, 255, 0.035);
  padding: 10px 12px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num hint";
  align-items: center;
  gap: 4px 10px;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.deadline-slot:hover,
.deadline-slot.is-drag-over,
.deadline-slot.is-filled {
  border-color: var(--marker);
  background: #fff;
  box-shadow: 0 8px 18px var(--marker-shadow);
}

.deadline-slot.is-filled.is-warning {
  border-color: #d94b4b;
  box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.18);
}

.deadline-slot__num {
  grid-area: num;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(61, 59, 255, 0.1);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
}

.deadline-slot.is-filled .deadline-slot__num {
  background: var(--marker);
  color: #fff;
}

.deadline-slot__task,
.deadline-slot__label {
  grid-area: title;
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 500;
  line-height: 1.05;
}

.deadline-slot__label {
  color: var(--muted);
}

.deadline-slot__hint {
  grid-area: hint;
}

.deadline-complete {
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: min(278px, calc(100% - 36px));
  min-height: 48px;
}

.deadline-complete:disabled {
  border-color: var(--line);
  background: #d9dae6;
  color: #626575;
  cursor: not-allowed;
  box-shadow: none;
}

.task-options {
  grid-area: options;
  align-self: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.task-options--doc {
  grid-template-columns: 1fr;
}

.task-options.is-empty {
  display: none;
}

.task-scene-action {
  display: contents;
  padding-top: 10px;
}

.doc-check-button {
  position: absolute;
  right: 18px;
  bottom: 10px;
  width: min(278px, calc(100% - 36px));
  min-height: 48px;
}

.task-action-hint {
  position: absolute;
  right: 314px;
  bottom: 14px;
  width: min(390px, calc(100% - 350px));
  min-height: 40px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 7px 11px;
  color: #885018;
  background: #fff1dd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.onec-action-hint {
  left: 18px;
  right: 314px;
  bottom: 10px;
  width: auto;
  min-height: 48px;
  white-space: nowrap;
}

.doc-check-button:disabled {
  opacity: 0.46;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.task-options--onec {
  display: none;
}

.task-options--tax {
  gap: 10px;
}

.task-options--payroll {
  gap: 10px;
}

.task-options--deadline {
  gap: 10px;
}

.onec-palette {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-self: start;
  align-content: start;
  padding-bottom: 2px;
}

.onec-palette__head {
  max-width: 460px;
  padding: 0 2px;
}

.onec-palette__head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.onec-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.onec-tile {
  position: relative;
  height: 62px;
  min-height: 62px;
  border: 1px solid rgba(61, 59, 255, 0.18);
  border-radius: 12px;
  background: #fff;
  padding: 17px 10px 7px;
  color: var(--ink);
  text-align: left;
  cursor: grab;
  display: grid;
  align-content: center;
  gap: 6px;
  box-shadow: 0 5px 14px rgba(35, 37, 85, 0.07);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.onec-tile::before {
  content: "•••";
  position: absolute;
  top: 3px;
  left: 50%;
  color: #8587a3;
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 1;
  transform: translateX(-50%);
}

.onec-tile:active {
  cursor: grabbing;
}

.onec-tile:hover,
.onec-tile.is-selected {
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(61, 59, 255, 0.15);
  transform: translateY(-2px);
}

.onec-tile.is-used {
  opacity: 0.7;
}

.onec-tile.is-used::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #4f9a49;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.onec-tile span {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--blue);
  background: rgba(61, 59, 255, 0.08);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.onec-tile b {
  min-width: 0;
  overflow: visible;
  font-size: clamp(10px, 0.78vw, 12px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.onec-complete {
  position: absolute;
  right: 18px;
  bottom: 10px;
  min-height: 48px;
  width: min(278px, calc(100% - 36px));
}

.onec-complete:disabled {
  border-color: var(--line);
  background: #d9dae6;
  color: #626575;
  cursor: not-allowed;
  box-shadow: none;
}

.tax-check {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  padding: 8px 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.24;
  box-shadow: 0 4px 12px rgba(22, 22, 31, 0.045);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.tax-check:hover,
.tax-check.is-selected {
  background: #fff;
  box-shadow: 0 9px 22px rgba(61, 59, 255, 0.14), inset 0 0 0 1px rgba(61, 59, 255, 0.22);
}

.tax-check--placeholder {
  visibility: hidden;
  pointer-events: none;
}

.tax-check span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.tax-check b {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.18;
}

.tax-complete {
  position: static;
  min-height: 46px;
  width: min(278px, calc(100% - 36px));
  margin: 0 auto;
}

.tax-send-message {
  min-height: 46px;
  width: 100%;
  margin: 0 auto;
}

.tax-send-message:disabled {
  background: #c9cad8;
  color: rgba(255, 255, 255, 0.72);
  cursor: not-allowed;
  box-shadow: none;
}

.tax-complete:disabled {
  border-color: var(--line);
  background: #d9dae6;
  color: #626575;
  cursor: not-allowed;
  box-shadow: none;
}

.answer {
  min-height: 118px;
}

body:has(#screen-feedback.active) {
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 18%, rgba(227, 226, 255, 0.58), transparent 34%),
    radial-gradient(circle at 17% 74%, rgba(220, 221, 255, 0.52), transparent 32%),
    linear-gradient(135deg, #fbfbff 0%, #f6f7ff 100%);
}

body:has(#screen-feedback.active) .app {
  width: min(1480px, calc(100% - 88px));
  padding-top: 12px;
}

body:has(#screen-feedback.active) .topbar {
  grid-template-columns: 1fr auto 1fr;
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
}

body:has(#screen-feedback.active) .brand {
  justify-self: start;
}

body:has(#screen-feedback.active) .topbar__context {
  justify-self: center;
  font-size: 18px;
}

body:has(#screen-feedback.active) .progress {
  justify-self: end;
  width: min(380px, 30vw);
  color: #242636;
  font-size: 16px;
}

body:has(#screen-feedback.active) .stage {
  min-height: auto;
}

@media (min-width: 961px) {
  #screen-feedback.active {
    min-height: calc(100vh - 82px);
    display: grid;
    place-items: center;
  }

  #screen-feedback.active .feedback-shell {
    grid-template-rows: 280px 50px 56px;
    align-content: center;
    gap: 18px;
  }

  #screen-feedback.active .feedback-hero {
    height: 280px;
    grid-template-rows: 82px 30px 120px;
    align-content: center;
    gap: 14px;
  }

  #screen-feedback.active .feedback-mark {
    width: 82px;
  }

  #screen-feedback.active .feedback-summary {
    height: 120px;
    margin-top: 0;
    display: grid;
    align-items: center;
  }

  #screen-feedback.active .feedback-skill {
    height: 50px;
  }

  #screen-feedback.active .feedback-skill__content > span {
    font-size: 14px;
  }

  #screen-feedback.active .feedback-tag {
    padding: 4px 9px 5px;
    font-size: 13px;
  }

  #screen-feedback.active .feedback-tags {
    flex-wrap: nowrap;
    gap: 6px;
  }
}

.feedback-shell {
  position: relative;
  width: min(840px, 46vw);
  height: min(500px, calc(100vh - 150px));
  max-height: min(500px, calc(100vh - 150px));
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 38px;
  padding: clamp(28px, 3.1vh, 34px) clamp(24px, 2.2vw, 34px) clamp(24px, 2.6vh, 28px);
  overflow-x: hidden;
  overflow-y: hidden;
  display: grid;
  grid-template-rows: auto auto 60px;
  align-content: space-evenly;
  gap: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 13% 28%, rgba(220, 221, 255, 0.82), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(255, 242, 230, 0.86), transparent 34%),
    radial-gradient(circle at 38% 86%, rgba(238, 232, 255, 0.82), transparent 42%),
    linear-gradient(135deg, #f0efff 0%, #fbfaff 46%, #fff2e6 100%);
  box-shadow: 0 30px 86px rgba(82, 73, 173, 0.16);
  isolation: isolate;
}

.feedback-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 12%, rgba(61, 59, 255, 0.08), transparent 13%);
}

.feedback-shell::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: -18%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 226, 255, 0.54), transparent 62%);
}

.feedback-hero {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(12px, 1.6vh, 16px);
  text-align: center;
}

.feedback-mark {
  position: relative;
  width: clamp(88px, 9.2vh, 100px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #d8ff28;
  box-shadow:
    0 0 0 1px rgba(22, 22, 31, 0.04),
    0 18px 34px rgba(112, 132, 0, 0.18);
}

.feedback-mark__icon {
  width: 42%;
  height: 24%;
  border-left: clamp(12px, 1.5vh, 17px) solid #0b0b0f;
  border-bottom: clamp(12px, 1.5vh, 17px) solid #0b0b0f;
  border-radius: 6px;
  transform: translateY(-2px) rotate(-45deg);
}

.feedback-shell.is-wrong .feedback-mark {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.9), transparent 18%),
    linear-gradient(145deg, #ffe6a4 0%, #ffb35c 100%);
}

.feedback-shell.is-wrong .feedback-mark__icon {
  position: relative;
  width: 14px;
  height: 48%;
  border: 0;
  border-radius: 999px;
  background: #17151f;
  transform: none;
}

.feedback-shell.is-wrong .feedback-mark__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #17151f;
  transform: translateX(-50%);
}

.feedback-status {
  width: fit-content;
  border-radius: 999px;
  padding: 7px 28px;
  color: var(--ink);
  background: #d8ff28;
  box-shadow: 0 8px 18px rgba(151, 181, 0, 0.12);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.feedback-status::before {
  content: none;
}

.feedback-shell.is-wrong .feedback-status {
  color: var(--ink);
  background: #ffe6a4;
}

.feedback-shell.is-wrong .feedback-status::before {
  background: #ffc35c;
  box-shadow: 0 0 16px rgba(255, 195, 92, 0.9);
}

.feedback-summary {
  max-width: 900px;
  margin-top: 8px;
  color: #11121a;
  font-size: clamp(22px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.42;
}

.feedback-work {
  width: min(760px, 100%);
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  align-self: start;
  margin-top: 8px;
  justify-self: center;
  border: 1px solid rgba(153, 154, 186, 0.22);
  border-radius: 24px;
  padding: clamp(26px, 3.2vh, 34px);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 52px rgba(66, 61, 130, 0.1);
}

.feedback-work__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eeebff;
}

.feedback-work__icon span {
  color: #3d3bff;
  font-size: 25px;
  line-height: 1;
}

.feedback-work__copy {
  width: 100%;
  display: grid;
  grid-template-rows: auto;
  align-content: start;
  gap: 12px;
}

.feedback-work h3 {
  width: fit-content;
  margin-bottom: 0;
  border-radius: 999px;
  padding: 6px 12px 7px;
  color: #3d3bff;
  background: #eeebff;
  font-size: 15px;
  line-height: 1;
  font-weight: 850;
}

.feedback-work p {
  max-width: none;
  color: #252737;
  font-size: clamp(18px, 1vw, 20px);
  font-weight: 500;
  line-height: 1.45;
}

.feedback-work p.feedback-work__bridge {
  margin-top: 0;
  color: #3d3bff;
  font-weight: 750;
}

.feedback-illustration {
  position: relative;
  justify-self: end;
  width: min(320px, 100%);
  aspect-ratio: 1.12;
  display: grid;
  place-items: center;
}

.feedback-illustration::before {
  content: "";
  position: absolute;
  inset: 20% 1% 8% -10%;
  border-radius: 50%;
  background: #eeeaff;
}

.feedback-doc-visual {
  position: relative;
  z-index: 1;
  width: 280px;
  min-height: 246px;
  border-radius: 14px;
  padding: 28px 30px 24px;
  display: grid;
  gap: 12px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(28, 28, 66, 0.13);
}

.feedback-doc-visual b {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.2;
}

.feedback-doc-visual > span {
  height: 9px;
  border-radius: 999px;
  background: #e5e4f1;
}

.feedback-doc-visual > span:nth-of-type(2) {
  width: 78%;
}

.feedback-doc-visual > span:nth-of-type(3) {
  width: 58%;
}

.feedback-doc-visual__signatures {
  margin-top: 14px;
  border-top: 1px solid #ecebf4;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 26px;
}

.feedback-doc-visual__signatures small {
  color: #222432;
  font-size: 12px;
  font-weight: 800;
}

.feedback-doc-visual__signatures i {
  width: 78px;
  height: 32px;
  border-bottom: 5px solid #3d3bff;
  border-left: 5px solid #3d3bff;
  border-radius: 50%;
  transform: rotate(-17deg);
}

.feedback-doc-visual__signatures em {
  width: 42px;
  height: 42px;
  justify-self: center;
  border: 2px dashed rgba(252, 172, 169, 0.82);
  border-radius: 50%;
  background: rgba(252, 172, 169, 0.08);
}

.feedback-skill {
  width: min(1100px, 100%);
  height: 100%;
  min-height: 0;
  justify-self: center;
  padding: 0;
  background: transparent;
}

.feedback-skill__content {
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.feedback-skill__content > span {
  color: #252737;
  font-size: 16px;
  font-weight: 850;
}

.feedback-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-tags::before {
  content: none;
}

.feedback-tag {
  border-radius: 999px;
  border: 1px solid rgba(22, 22, 31, 0.1);
  padding: 5px 12px 6px;
  color: var(--ink);
  background: #f7f7fb;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}

.feedback-tag--primary {
  border-color: transparent;
  background: rgba(216, 255, 40, 0.45);
}

.feedback-actions {
  position: relative;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  margin-bottom: 0;
  padding-top: 0;
  background: transparent;
}

.feedback-actions .btn {
  width: min(430px, 100%);
  min-height: 56px;
  border-radius: 8px;
  background: #3d3bff;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(61, 59, 255, 0.2);
  font-size: 16px;
}

.result {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.62fr);
  gap: 18px;
  padding-top: 24px;
}

.result__main,
.offer,
.lead-form {
  padding: clamp(20px, 3vw, 34px);
}

.result__main {
  display: grid;
  gap: 18px;
}

.route {
  display: grid;
  gap: 12px;
}

.route__item {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 8px;
  background: var(--soft);
}

.route__item b {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
}

.route__item p,
.offer p,
.lead-form p,
.lead-form small {
  color: var(--muted);
  line-height: 1.42;
}

.offer {
  display: grid;
  gap: 14px;
  background: var(--ink);
  color: #fff;
}

.offer span {
  color: var(--lime);
  font-weight: 900;
  text-transform: uppercase;
}

.offer p,
.offer li {
  color: rgba(255, 255, 255, 0.72);
}

.offer ul {
  margin: 0;
  padding-left: 18px;
}

.market {
  border-radius: 8px;
  background: rgba(216, 255, 40, 0.12);
  padding: 14px;
  color: #fff;
  line-height: 1.35;
}

.lead-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.lead-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.lead-form input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

.lead-form input:focus {
  border-color: var(--blue);
}

.lead-form small {
  grid-column: 1 / -1;
  font-size: 12px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dev-menu {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  width: min(260px, calc(100vw - 32px));
  border: 1px solid rgba(22, 22, 31, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 54px rgba(22, 22, 31, 0.18);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.dev-menu__toggle {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.dev-menu__body {
  max-height: min(620px, calc(100vh - 96px));
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.dev-menu.collapsed {
  width: 96px;
}

.dev-menu.collapsed .dev-menu__body {
  display: none;
}

.dev-menu__group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dev-menu__group b {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dev-menu__group button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.dev-menu__group button:hover,
.dev-menu__group button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes desktopPop {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(var(--rotate, 0deg)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--rotate, 0deg)) scale(1);
  }
}

@keyframes taskSlide {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes caretBlink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

@keyframes typeInText {
  from {
    opacity: 0;
    filter: blur(2px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes typingText {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes draftSend {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(90px, -26px) scale(0.94);
  }
}

@keyframes sendBubbleIn {
  from {
    opacity: 0;
    transform: translate(18px, 10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes stickyPin {
  from {
    opacity: 0;
    transform: translateY(20px) rotate(0deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--rotate, 0deg)) scale(1);
  }
}

@keyframes flyToMessage {
  from {
    opacity: 0;
    transform: translate(var(--fly-x, 0), var(--fly-y, 28px)) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: minmax(400px, 0.72fr) minmax(500px, 1fr);
    gap: 24px;
  }

  .day-app__header,
  .day-app__body,
  .day-app__footer {
    padding-left: clamp(24px, 4vw, 42px);
    padding-right: clamp(24px, 4vw, 42px);
  }

  .work-notes {
    width: 280px;
  }

  .work-note {
    min-width: 132px;
    min-height: 100px;
    font-size: 18px;
  }

  .work-note--yellow {
    right: 138px;
  }
}

@media (max-width: 960px) {
  .app,
  body:has(#screen-hero.active) .app,
  body:has(#screen-task.active) .app,
  body:has(#screen-feedback.active) .app {
    width: min(100% - 28px, 1180px);
  }

  .hero,
  .task-layout,
  .result,
  .lead-form {
    grid-template-columns: 1fr;
  }

  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body:has(#screen-feedback.active) {
    overflow: auto;
  }

  body:has(#screen-feedback.active) .topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body:has(#screen-feedback.active) .topbar__context {
    justify-self: end;
    font-size: 13px;
  }

  body:has(#screen-feedback.active) .progress {
    width: min(360px, 42vw);
    font-size: 13px;
  }

  .feedback-shell {
    width: 100%;
    height: auto;
    max-height: none;
    padding: 18px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .feedback-hero,
  .feedback-work,
  .feedback-skill,
  .feedback-actions {
    grid-column: 1;
  }

  .feedback-work {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .feedback-work__icon {
    width: 52px;
    height: 52px;
  }

  .topbar__context {
    justify-self: end;
  }

  .workdesk {
    min-height: 560px;
    margin-right: 0;
    border-radius: 8px;
  }

  .workdesk::before {
    width: 16%;
  }

  .workdesk__image {
    object-position: 50% 50%;
  }

  .choice-grid,
  .task-options,
  .task-options--doc {
    grid-template-columns: 1fr;
  }

  .acquaintance { width: min(100%, 760px); }

  .doc-parties,
  .doc-signatures {
    grid-template-columns: 1fr;
  }

  .task-card__head {
    grid-template-columns: 1fr;
  }

  .task-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "scene"
      "options";
  }

  .task-scene {
    padding-bottom: 8px;
  }

  .onec-form {
    grid-template-columns: 1fr;
  }

  .onec-workbench {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .doc-check-button,
  .onec-complete,
  .tax-complete,
  .payroll-complete,
  .deadline-complete {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .task-action-hint {
    position: static;
    width: 100%;
    margin-bottom: 8px;
  }

  .onec-action-hint {
    white-space: normal;
  }

  .onec-table {
    min-width: 650px;
  }

  .onec__body {
    overflow-x: auto;
  }

  .lead-form {
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .access-screen {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 0 38px;
  }

  .access-screen h2 {
    font-size: clamp(30px, 8.5vw, 38px);
  }

  .access-form {
    margin-top: 24px;
  }

  .access-screen__visual {
    display: none;
  }

  .acquaintance {
    min-height: auto;
    padding: 24px 0 40px;
  }

  .acquaintance__progress {
    margin-bottom: 24px;
  }

  .acquaintance h2 {
    font-size: clamp(24px, 7.2vw, 32px);
  }

  .acquaintance > .lead {
    font-size: 17px;
  }

  .acquaintance__choices,
  .acquaintance__choices--compact {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 24px;
  }

  .acquaintance-choice {
    min-height: 54px;
    padding: 11px 14px;
    font-size: 17px;
  }

  .answer-modal {
    padding: 14px;
  }

  .answer-modal__card {
    border-radius: 20px;
    padding: 26px 22px;
  }

  .answer-modal__card > p:last-of-type { font-size: 17px; }

  .processing-card {
    min-height: auto;
    padding: 30px 0 32px;
  }

  .processing-card__intro {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 14px;
  }

  .processing-card h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .processing-card__steps {
    grid-template-columns: 1fr;
    margin-top: 26px;
  }

  .processing-step {
    min-height: 60px;
    padding: 11px 13px;
    font-size: 16px;
  }

  .processing-orbit {
    width: 108px;
    height: 108px;
  }

  .processing-orbit::before { inset: 8px; }
  .processing-orbit__core strong { font-size: 24px; }
  .processing-orbit__dot { width: 11px; height: 11px; border-width: 2px; }
  .processing-orbit__dot--one { top: 1px; left: 24px; }
  .processing-orbit__dot--two { right: -1px; bottom: 29px; }
  .processing-orbit__dot--three { left: 4px; bottom: 13px; }
  .welcome {
    min-height: auto;
    padding: 8px 0 0;
  }

  .day-app {
    max-height: none;
    grid-template-columns: 1fr;
  }

  .day-app__rail {
    display: none;
  }

  .day-app__header,
  .day-app__footer {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .day-app h2 {
    font-size: 38px;
  }

  .day-app__body {
    padding-top: 0;
  }

  .plan-task {
    min-height: 68px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    padding: 13px 18px;
  }

  .plan-task h3 {
    font-size: 19px;
  }

  .plan-task p {
    font-size: 14px;
  }

  .task-icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .work-notes {
    width: 100%;
    min-height: 78px;
  }

  .work-note {
    min-width: 132px;
    min-height: 72px;
    padding: 24px 14px 12px;
    font-size: 14px;
  }

  .work-note--yellow {
    top: 0;
    left: 8px;
    right: auto;
  }

  .work-note--green {
    top: 14px;
    right: 8px;
  }

  .day-app__footer {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .day-app__footer .btn {
    grid-column: 1 / -1;
  }

  .footer-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .onec {
    min-width: 0;
  }

  .onec__title {
    display: grid;
  }

  .onec-form label,
  .onec-field__button {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .onec-total {
    justify-self: stretch;
  }

  .task-card:has(.task-options--tax),
  .task-card:has(.task-options--payroll),
  .task-card:has(.task-options--deadline) {
    grid-template-columns: 1fr;
  }

  .task-card:has(.task-options--tax) .task-text,
  .task-card:has(.task-options--payroll) .task-text,
  .task-card:has(.task-options--deadline) .task-text {
    max-width: none;
  }

  .tax-chat__bar {
    align-items: start;
    display: grid;
  }

  .tax-message,
  .tax-message--accountant {
    width: 100%;
    max-width: none;
  }

  .tax-message p {
    font-size: 15px;
  }

  .tax-reply-options {
    grid-template-columns: 1fr;
  }

  .payroll {
    height: auto;
    padding-bottom: 0;
  }

  .payroll-tiles {
    grid-template-columns: 1fr;
  }

  .payroll__result {
    position: static;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .payroll__result p.payroll-action-hint {
    bottom: 0;
  }

  .payroll-formula {
    grid-template-columns: 1fr;
  }

  .payroll-complete {
    width: 100%;
    min-width: 0;
  }

  .deadline-board {
    height: auto;
  }

  .deadline-board__body {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "instruction"
      "inbox"
      "plan";
  }

  .deadline-cards,
  .deadline-slots {
    height: auto;
    grid-template-rows: repeat(4, minmax(82px, auto));
  }

  .deadline-card,
  .deadline-slot {
    min-height: 82px;
  }

}

@media (max-height: 820px) and (min-width: 761px) {
  .app {
    padding-top: 10px;
  }

  .hero {
    min-height: calc(100vh - 94px);
    gap: 24px;
    padding-bottom: 12px;
  }

  .hero__copy {
    gap: 15px;
  }

  .eyebrow {
    padding: 7px 11px;
    font-size: 12px;
  }

  h1 {
    font-size: clamp(48px, 5vw, 68px);
  }

  .lead {
    font-size: 18px;
    line-height: 1.36;
  }

  .hero-points {
    gap: 10px;
  }

  .hero-points span {
    min-height: 60px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 9px 10px;
    font-size: 12px;
  }

  .hero-points i {
    width: 30px;
    height: 30px;
  }

  .hero-cta {
    min-height: 58px;
  }

  .workdesk {
    min-height: 560px;
  }

  .welcome {
    min-height: calc(100vh - 84px);
    padding-top: 4px;
  }

  .day-app {
    max-height: calc(100vh - 90px);
  }

  .day-app h2 {
    font-size: 46px;
  }

  .day-app__header,
  .day-app__footer {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .day-app__body {
    padding-top: 0;
    padding-bottom: 12px;
  }

  .plan-grid {
    padding-top: 0;
    padding-bottom: 0;
  }

  .plan-task {
    min-height: 62px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .plan-task h3 {
    font-size: 18px;
  }

  .plan-task p {
    margin-top: 4px;
    font-size: 14px;
  }

  .work-notes {
    min-height: 104px;
  }

  .work-note {
    min-width: 126px;
    min-height: 86px;
    padding: 24px 14px 12px;
    font-size: 16px;
  }

  .work-note--yellow {
    right: 126px;
  }

  .task-icon {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .topbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand img {
    width: 120px;
  }

  .hero {
    min-height: calc(100vh - 82px);
  }

  .workdesk {
    min-height: 500px;
  }

  h1 {
    font-size: clamp(44px, 4.5vw, 60px);
  }

  .lead {
    font-size: 17px;
  }

  .work-notes {
    width: 240px;
    min-height: 78px;
  }

  .work-note {
    min-width: 112px;
    min-height: 66px;
    padding: 20px 12px 10px;
    font-size: 13px;
  }

  .work-note::before {
    top: 6px;
    width: 10px;
    height: 10px;
  }

  .work-note--yellow {
    top: 0;
    right: 110px;
  }

  .work-note--green {
    top: 12px;
    right: 0;
  }

  .day-app__header,
  .day-app__footer {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .day-app h2 {
    font-size: 42px;
  }

  .plan-task {
    min-height: 58px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .task-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .day-app__footer {
    grid-template-columns: 46px minmax(0, 1fr) minmax(260px, 340px);
  }

  .footer-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

@media (max-height: 820px) and (min-width: 961px) {
  body:has(#screen-feedback.active) .app {
    padding-top: 8px;
  }

  body:has(#screen-feedback.active) .topbar {
    min-height: 54px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body:has(#screen-feedback.active) .brand img {
    width: 122px;
  }

  body:has(#screen-feedback.active) .topbar__context {
    font-size: 16px;
  }

  body:has(#screen-feedback.active) .progress {
    font-size: 14px;
    gap: 6px;
  }

  body:has(#screen-feedback.active) .progress__track {
    height: 7px;
  }

  .feedback-shell {
    height: min(500px, calc(100vh - 150px));
    min-height: 0;
    max-height: min(500px, calc(100vh - 150px));
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    grid-template-rows: 280px 50px 56px;
    align-content: center;
    gap: 18px;
  }

  .feedback-hero {
    min-height: 0;
    gap: 9px;
    padding-top: 0;
  }

  .feedback-work {
    min-height: 0;
  }

  .feedback-mark {
    width: 82px;
  }

  .feedback-mark::before {
    inset: -7px;
    border-width: 7px;
  }

  .feedback-status {
    padding: 7px 22px;
    font-size: 16px;
  }

  .feedback-summary {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.34;
  }

  .feedback-work {
    width: min(760px, 100%);
    min-height: 0;
    border-radius: 22px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 20px 24px;
    gap: 18px;
  }

  .feedback-work__icon {
    width: 48px;
    height: 48px;
  }

  .feedback-work__copy {
    grid-template-rows: auto;
    gap: 10px;
  }

  .feedback-work h3 {
    margin-bottom: 0;
    font-size: 14px;
  }

  .feedback-work p {
    font-size: 16px;
    line-height: 1.34;
  }

  .feedback-doc-visual {
    width: 154px;
    min-height: 140px;
    border-radius: 10px;
    padding: 16px 16px 12px;
    gap: 6px;
  }

  .feedback-doc-visual b {
    font-size: 11px;
  }

  .feedback-doc-visual > span {
    height: 5px;
  }

  .feedback-doc-visual__signatures {
    margin-top: 7px;
    padding-top: 8px;
    gap: 5px 12px;
  }

  .feedback-doc-visual__signatures small {
    font-size: 7px;
  }

  .feedback-doc-visual__signatures i {
    width: 42px;
    height: 18px;
    border-width: 3px;
  }

  .feedback-doc-visual__signatures em {
    width: 23px;
    height: 23px;
  }

  .feedback-skill {
    width: min(920px, 100%);
    min-height: 0;
    padding: 0;
  }

  .feedback-skill__content > span,
  .feedback-tag {
    font-size: 14px;
  }

  .feedback-tag {
    font-size: 13px;
  }

  .feedback-skill__content {
    gap: 8px;
  }

  .feedback-tags {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .feedback-tag {
    padding: 4px 9px 5px;
  }

  .feedback-actions {
    gap: 6px;
  }

  .feedback-actions .btn {
    width: min(430px, 100%);
    min-height: 56px;
    font-size: 16px;
  }

}

@media (max-width: 640px) {
  #screen-feedback.active {
    min-height: calc(100svh - 82px);
    display: grid;
    place-items: center;
    padding: 18px 0;
  }

  .app {
    width: min(100% - 20px, 1180px);
    padding-top: 8px;
  }

  body:has(#screen-hero.active) .app {
    width: min(100% - 20px, 1180px);
  }

  body:has(#screen-welcome.active) .app {
    width: min(100% - 20px, 1180px);
  }

  body:has(#screen-task.active) .app {
    width: min(100% - 20px, 1180px);
  }

  body:has(#screen-feedback.active) .app {
    width: min(100% - 20px, 1180px);
    padding-top: 8px;
  }

  body:has(#screen-feedback.active) .topbar__context {
    max-width: 190px;
    font-size: 12px;
    line-height: 1.15;
    text-align: right;
  }

  .topbar {
    align-items: center;
  }

  .brand img {
    width: 112px;
  }

  .topbar__context {
    max-width: 190px;
    font-size: 12px;
    line-height: 1.15;
    text-align: right;
  }

  .progress {
    width: 46vw;
  }

  h1 {
    font-size: 42px;
  }

  .hero {
    gap: 22px;
    padding-top: 6px;
  }

  .hero__copy {
    gap: 16px;
  }

  .lead {
    font-size: 17px;
  }

  .hero-points {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .workdesk {
    min-height: 430px;
    margin-inline: -10px;
    border-radius: 0;
  }

  .workdesk::before {
    width: 18%;
  }

  .workdesk__image {
    object-position: 50% 50%;
  }

  .hero__actions,
  .task-card__head {
    align-items: stretch;
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .feedback-shell {
    border-radius: 16px;
    margin: 0 auto;
    padding: 20px 16px;
    gap: 26px;
  }

  .feedback-mark {
    width: 82px;
  }

  .feedback-summary {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.25;
  }

  .feedback-hero {
    gap: 22px;
  }

  .feedback-work p {
    font-size: 16px;
  }

  .feedback-work {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 12px;
  }

  .feedback-skill {
    padding: 0 16px;
  }

  .feedback-skill__content {
    gap: 10px;
  }

  .feedback-tags::before {
    content: none;
  }

  .feedback-skill__content > span {
    font-size: 14px;
    line-height: 1.1;
  }

  .feedback-tags {
    column-gap: 6px;
    row-gap: 5px;
  }

  .feedback-tag {
    padding: 4px 9px 5px;
    font-size: 14px;
    line-height: 1.05;
  }

  .feedback-actions .btn {
    min-height: 56px;
    font-size: 16px;
  }

  .dev-menu {
    right: 10px;
    bottom: 10px;
    width: min(240px, calc(100vw - 20px));
  }

}

@media (max-width: 420px) {
  .day-app__header,
  .day-app__body,
  .day-app__footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .day-app h2 {
    font-size: 34px;
  }

  .day-app__badge {
    font-size: 13px;
    padding: 8px 11px;
  }

  .plan-task {
    min-height: 62px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 14px;
  }

  .task-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .work-notes {
    display: block;
    width: 100%;
    min-height: 62px;
  }

  .work-note {
    min-width: 112px;
    min-height: 54px;
    padding: 18px 10px 8px;
    font-size: 12px;
  }

  .work-note::before {
    top: 6px;
    width: 8px;
    height: 8px;
  }

  .work-note--yellow {
    top: 0;
    left: 0;
    right: auto;
  }

  .work-note--green {
    top: 8px;
    right: 0;
  }

  .day-app__header,
  .day-app__footer {
    gap: 8px;
  }

  .day-app__header p:not(.day-app__kicker) {
    display: none;
  }
}

/* Единая шапка на всех экранах воронки */
.topbar,
body:has(#screen-feedback.active) .topbar {
  left: 50%;
  width: min(var(--content-width), calc(100vw - var(--content-gutter)));
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  transform: translateX(-50%);
}

.topbar__context {
  display: none;
}

.brand,
body:has(#screen-feedback.active) .brand {
  justify-self: start;
}

.brand img,
body:has(#screen-feedback.active) .brand img {
  width: 132px;
}

.progress,
body:has(#screen-hero.active) .progress,
body:has(#screen-feedback.active) .progress {
  justify-self: end;
  width: min(520px, 42vw);
  min-width: 0;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}

.progress__track,
body:has(#screen-feedback.active) .progress__track {
  height: 8px;
}

@media (max-height: 820px) and (min-width: 961px) {
  .topbar,
  body:has(#screen-feedback.active) .topbar {
    min-height: 0;
    padding: 12px 0;
  }

  .brand img,
  body:has(#screen-feedback.active) .brand img {
    width: 132px;
  }

  .progress,
  body:has(#screen-feedback.active) .progress {
    gap: 8px;
    font-size: 13px;
  }

  .progress__track,
  body:has(#screen-feedback.active) .progress__track {
    height: 8px;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .topbar,
  body:has(#screen-feedback.active) .topbar {
    padding: 8px 0;
  }

  .brand img,
  body:has(#screen-feedback.active) .brand img {
    width: 120px;
  }
}

@media (max-width: 640px) {
  .topbar,
  body:has(#screen-feedback.active) .topbar {
    left: 0;
    width: 100%;
    min-height: 72px;
    grid-template-columns: auto minmax(138px, 46vw);
    gap: 12px;
    padding: 8px 0 12px;
    transform: none;
  }

  .brand img,
  body:has(#screen-feedback.active) .brand img {
    width: 112px;
  }

  .progress,
  body:has(#screen-hero.active) .progress,
  body:has(#screen-feedback.active) .progress {
    width: 100%;
    font-size: 12px;
  }
}

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

/* Final screen */
body:has(#screen-result.active) .app { width: min(var(--content-width), calc(100% - var(--content-gutter))); }
#screen-result.active { padding-top: 22px; }
.result-hero { height: calc(100vh - 108px); min-height: 0; display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%); overflow: hidden; border: 1px solid var(--line); border-radius: 36px; background: radial-gradient(circle at 63% 77%, rgba(216, 255, 40, .16), transparent 25%), linear-gradient(112deg, #fff 0%, #fbfaff 57%, #eef1ff 100%); box-shadow: var(--shadow); }
.result-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(34px, 4vh, 48px) clamp(44px, 3.4vw, 66px); }
.result-hero__eyebrow { margin-bottom: clamp(16px, 2vh, 22px); border-radius: 999px; padding: 7px 13px; color: var(--blue); background: #efeeff; font-size: 13px; font-weight: 700; }
.result-hero h2 { position: relative; z-index: 2; width: 100%; max-width: 700px; font-size: clamp(46px, 2.6vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.result-hero__intro { max-width: 650px; margin-top: clamp(18px, 2.2vh, 25px); color: #484a59; font-size: 19px; font-weight: 400; line-height: 1.4; }
.result-summary { width: min(100%, 610px); min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 0; margin-top: clamp(18px, 2.2vh, 24px); border-radius: 18px; padding: 12px 18px; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 32px rgba(61, 59, 255, .045); }
.result-summary h3, .result-strengths h3 { font-size: 18px; font-weight: 700; line-height: 1.15; }
.result-scale { position: relative; width: 100%; height: 9px; display: flex; overflow: hidden; border-radius: 999px; background: #ecebff; }
.result-scale span { display: block; height: 100%; }
.result-scale__solo { background: var(--lime); }
.result-scale__help { background: #b8b1ff; }
.result-scale::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), rgba(247, 247, 251, .96) calc(20% - 2px) 20%); pointer-events: none; }
.result-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; color: #666879; font-size: 14px; line-height: 1.2; }
.result-legend span { display: inline-flex; align-items: center; gap: 8px; }
.result-legend i { width: 7px; height: 7px; border-radius: 50%; }
.result-legend__solo { background: var(--lime); }
.result-legend__help { background: #b8b1ff; }
.result-strengths { margin-top: 2px; }
.result-strengths__list { display: flex; flex-wrap: nowrap; gap: 7px; margin-top: 6px; }
.result-strengths__list span { min-height: 30px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; padding: 5px 14px; color: var(--ink); background: rgba(216, 255, 40, .27); font-size: 15px; font-weight: 400; line-height: 1.1; }
.result-details { margin-top: 36px; color: #bdeeff; font-size: 16px; font-weight: 700; text-decoration: none; }
.result-details:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.result-hero__visual { position: relative; min-width: 0; margin-left: -190px; }
.result-hero__visual::before { content: ""; position: absolute; inset: 5% -8% 0 8%; background: radial-gradient(ellipse at 58% 55%, rgba(216, 255, 40, .045), rgba(184, 177, 255, .025) 42%, transparent 72%); pointer-events: none; }
.result-hero__visual::after { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 -8%; width: 42%; background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 58%, transparent); pointer-events: none; }
.result-hero__visual > img { position: absolute; right: 34px; bottom: -12px; width: calc(100% + 210px); height: 109%; display: block; object-fit: contain; object-position: right bottom; }
.result-sticker { position: absolute; z-index: 2; top: 190px; right: 24px; width: min(250px, calc(100% - 40px)); display: grid; gap: 8px; border-radius: 20px; padding: 22px 20px 22px 58px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 50px rgba(30, 31, 66, .16); line-height: 1.3; transform: rotate(4deg); }
.result-sticker i { position: absolute; top: 21px; left: 21px; width: 20px; height: 20px; border-radius: 7px 7px 7px 2px; background: #b8b1ff; transform: rotate(-7deg); }
.result-sticker strong { font-size: 18px; }
.result-sticker span { color: #666879; font-size: 14px; }

.result-hero--fit { grid-template-columns: minmax(0, 1.18fr) minmax(350px, .82fr); color: #fff; background: radial-gradient(circle at 94% 82%, rgba(92, 207, 255, .48), transparent 29%), radial-gradient(circle at 72% 5%, rgba(113, 100, 239, .5), transparent 34%), linear-gradient(128deg, #211b61 0%, #31277e 56%, #315dba 100%); }
.result-hero--fit .result-hero__content { justify-content: center; padding: clamp(44px, 5vw, 78px); }
.result-hero--fit .result-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; color: #11121b; background: var(--lime); font-size: 14px; font-weight: 800; }
.result-hero--fit .result-hero__eyebrow span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #11121b; font-size: 11px; }
.result-hero--fit h2 { max-width: 760px; color: #fff; font-size: clamp(48px, 4.15vw, 68px); line-height: .98; }
.result-hero--fit h2 strong { color: var(--lime); font-size: 1em; line-height: inherit; }
.result-hero--fit .result-hero__intro { max-width: 720px; margin-top: 38px; color: rgba(255, 255, 255, .72); font-size: 19px; line-height: 1.5; }
.result-hero__note { position: absolute; left: clamp(44px, 5vw, 78px); right: 44px; bottom: 24px; max-width: 700px; color: rgba(255, 255, 255, .5); font-size: 12px; line-height: 1.4; }
.result-proof { align-self: center; position: relative; z-index: 2; display: grid; gap: 0; margin: 56px 64px 56px -12px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 34px; padding: 22px 30px; color: #fff; background: linear-gradient(155deg, rgba(112, 97, 242, .78), rgba(54, 82, 218, .72) 55%, rgba(58, 174, 229, .66)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 64px rgba(17, 20, 89, .2); backdrop-filter: blur(14px); }
.result-proof article { color: inherit; background: transparent; }
.result-proof__fit span { color: var(--blue); font-size: clamp(54px, 5vw, 74px); font-weight: 800; line-height: .9; letter-spacing: -.06em; }
.result-proof h3 { margin-top: 9px; font-size: 24px; line-height: 1.05; letter-spacing: -.025em; }
.result-proof article > p { margin-top: 6px; color: #575969; font-size: 14px; line-height: 1.35; }
.result-proof__tasks h3 { margin-top: 0; }
.result-proof__tasks > p strong { color: var(--blue); }
.result-proof__tasks .result-scale { margin-top: 16px; }
.result-proof__tasks .result-legend { margin-top: 13px; font-size: 12px; }
.result-proof__market { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
.result-proof__market > strong { grid-row: 1 / 3; color: var(--blue); font-size: 54px; line-height: .9; letter-spacing: -.05em; }
.result-proof__market > p { margin-top: 0 !important; color: #2f3140 !important; font-size: 14px !important; }
.result-proof__market small { color: #77798a; font-size: 10px; }
.result-proof--tasks-only { min-height: 360px; align-content: stretch; }
.result-proof--tasks-only article { display: flex; flex-direction: column; justify-content: center; padding: 20px 16px; }
.result-proof__total { min-height: 126px; }
.result-proof__total strong { color: #aeeaff; font-size: clamp(88px, 8vw, 122px); font-weight: 800; line-height: .78; letter-spacing: -.08em; }
.result-proof__total h3 { margin-top: 20px; color: #fff; font-size: clamp(27px, 2.4vw, 36px); }
.result-proof__divider { height: 1px; margin-inline: 16px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.62), rgba(255,255,255,.06)); }
.result-proof__bars { display: grid; gap: 25px; padding: 27px 16px 17px; }
.result-proof__bar { display: grid; gap: 11px; }
.result-proof__bar > span { color: rgba(255, 255, 255, .86); font-size: 17px; font-weight: 600; }
.result-proof__bar > div { position: relative; height: 18px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.result-proof__bar > div::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), rgba(53, 55, 151, .72) calc(20% - 3px) 20%); pointer-events: none; }
.result-proof__bar i { height: 100%; display: block; border-radius: inherit; }
.result-proof__bar--solo i { background: linear-gradient(90deg, #eaff82, var(--lime)); }
.result-proof__bar--help i { background: linear-gradient(90deg, #cfc9ff, #9c91ff); }
.result-proof__chart { min-height: 264px; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 28px; padding: 25px 16px 8px; }
.result-proof__vertical-scale { position: relative; width: 56px; height: 220px; display: flex; flex-direction: column; align-self: center; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.result-proof__vertical-scale span { width: 100%; display: block; }
.result-proof__vertical-solo { background: linear-gradient(#eaff82, var(--lime)); }
.result-proof__vertical-help { background: linear-gradient(#cfc9ff, #9c91ff); }
.result-proof__vertical-scale::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 calc(20% - 3px), rgba(63, 60, 159, .62) calc(20% - 3px) 20%); pointer-events: none; }
.result-proof__labels { display: grid; grid-template-rows: 3fr 2fr; }
.result-proof__count { min-height: 0; position: relative; }
.result-proof__count + .result-proof__count::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: rgba(255, 255, 255, .22); }
.result-proof__count strong { font-size: 54px; line-height: .85; letter-spacing: -.055em; }
.result-proof__count span { margin-top: 13px; color: rgba(255, 255, 255, .84); font-size: 18px; line-height: 1.1; }
.result-proof__count--solo strong { color: var(--lime); }
.result-proof__count--help strong { color: #c9c2ff; }

html { scroll-behavior: smooth; }
body:has(#screen-result.active) { background: #f5f6fb; }
body:has(#screen-result.active) .stage { min-height: auto; }
.result-hero h2 span { color: var(--blue); }
.result-page { display: grid; gap: 28px; padding: 34px 0 72px; }
.result-section { overflow: hidden; border: 1px solid var(--line); border-radius: 32px; padding: clamp(34px, 4vw, 58px); background: #fff; box-shadow: 0 18px 60px rgba(30, 31, 66, .07); }
.result-section__heading { max-width: 760px; }
.result-section__heading--wide { max-width: 940px; }
.result-kicker { margin-bottom: 13px; color: var(--blue); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.result-section__heading h2, .result-support h2, .result-final-cta h2 { font-size: clamp(36px, 3.2vw, 52px); line-height: 1.02; letter-spacing: -.04em; }
.result-section__heading > p:last-child, .result-final-cta > div > p:last-child { margin-top: 17px; color: var(--muted); font-size: 18px; line-height: 1.5; }

.result-demand { position: relative; display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 2.28fr); align-items: stretch; gap: 34px; overflow: hidden; border: 1px solid #e2e4f2; border-radius: 30px; padding: 32px 34px 26px; color: var(--ink); background: radial-gradient(circle at 93% 0%, rgba(108, 209, 255, .25), transparent 31%), radial-gradient(circle at 7% 110%, rgba(216, 255, 40, .2), transparent 27%), #f7f8ff; box-shadow: 0 18px 55px rgba(30, 31, 66, .08); }
.result-demand::after { content: ""; position: absolute; right: -100px; top: -190px; width: 390px; height: 390px; border: 1px solid rgba(61, 59, 255, .12); border-radius: 50%; pointer-events: none; }
.result-demand__lead { position: relative; z-index: 1; align-self: center; }
.result-demand__lead p { width: fit-content; margin-bottom: 13px; border-radius: 999px; padding: 7px 11px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.result-demand__lead h2 { max-width: 270px; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.02; letter-spacing: -.035em; }
.result-demand__facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.result-demand__fact { min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; border: 0; border-radius: 21px; padding: 21px 20px 18px; box-shadow: 0 14px 32px rgba(42, 39, 112, .1); }
.result-demand__fact strong { font-size: clamp(32px, 2.7vw, 44px); line-height: .9; letter-spacing: -.055em; }
.result-demand__fact span { max-width: 230px; font-size: 14px; line-height: 1.3; }
.result-demand__fact--vacancies { color: #171640; background: var(--lime); }
.result-demand__fact--vacancies span { color: rgba(23, 22, 64, .75); }
.result-demand__fact--rank { color: #fff; background: linear-gradient(145deg, #4941ed, #385fd7); }
.result-demand__fact--rank strong { color: #bceeff; }
.result-demand__fact--rank span { color: rgba(255, 255, 255, .8); }
.result-demand__fact--business { color: #25205f; background: linear-gradient(145deg, #c9c5ff, #9edfff); }
.result-demand__fact--business strong { color: #3026a4; }
.result-demand__fact--business span { color: rgba(37, 32, 95, .76); }
.result-demand__source { position: relative; z-index: 1; grid-column: 2; margin: -7px 3px 0; color: #858799; font-size: 10px; line-height: 1.35; }

.result-map { position: relative; background: radial-gradient(circle at 93% 90%, rgba(216, 255, 40, .14), transparent 24%), radial-gradient(circle at 3% 8%, rgba(158, 223, 255, .16), transparent 24%), #fff; }
.result-map .result-section__heading { max-width: none; }
.result-map .result-section__heading h2 { max-width: 850px; }
.result-map .result-section__heading > p:last-child { max-width: 900px; white-space: normal; }
.result-map__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; margin-top: 36px; }
.result-map__card { position: relative; overflow: hidden; border-radius: 26px; padding: 30px; }
.result-map__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.result-map__card--strong { border: 1px solid #cfd5ff; background: linear-gradient(145deg, #e9edff, #e9f7ff); }
.result-map__card--strong::before { background: linear-gradient(90deg, #463cff, #55c7ff); }
.result-map__card--practice { border: 1px solid #e2e7c8; background: rgba(249, 251, 241, .9); }
.result-map__card--practice::before { background: linear-gradient(90deg, var(--lime), #a6eaff); }
.result-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--blue); box-shadow: 0 10px 24px rgba(61, 59, 255, .18); font-size: 22px; font-weight: 800; }
.result-map__card--practice .result-card-icon { color: #232052; background: var(--lime); box-shadow: 0 10px 24px rgba(174, 208, 17, .16); }
.result-map__label { margin-top: 22px; color: #666979; font-size: 12px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.result-map__card h3 { margin-top: 7px; font-size: 27px; letter-spacing: -.025em; }
.result-skill-cards { display: grid; gap: 9px; margin-top: 18px; }
.result-skill-cards details { border: 1px solid rgba(61, 59, 255, .07); border-radius: 16px; padding: 0 16px; background: rgba(255, 255, 255, .88); }
.result-skill-cards summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.result-skill-cards summary::-webkit-details-marker { display: none; }
.result-skill-cards summary b { font-size: 16px; }
.result-skill-cards summary i { position: relative; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: #eeeffa; }
.result-skill-cards summary i::before, .result-skill-cards summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 2px; background: var(--blue); transform: translate(-50%, -50%); }
.result-skill-cards summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.result-skill-cards details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.result-skill-cards details p { margin: -2px 32px 0 0; padding: 0 0 14px; color: #5d6070; font-size: 14px; line-height: 1.48; }
.result-course-bridge { max-width: 900px; margin-top: 28px; padding-left: 18px; color: #343649; font-size: 17px; font-weight: 700; line-height: 1.45; }
.result-course-bridge::before { content: ""; width: 8px; height: 8px; display: inline-block; margin: 0 11px 2px -18px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(216, 255, 40, .2); }

.result-career { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(30px, 3.4vw, 48px); color: #fff; background: radial-gradient(circle at 87% 10%, rgba(93, 211, 255, .4), transparent 27%), linear-gradient(145deg, #31299a 0%, #384bd0 52%, #176fc3 100%); box-shadow: 0 22px 65px rgba(33, 40, 140, .22); }
.result-career::before { content: ""; position: absolute; top: -240px; right: -110px; width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; }
.result-career__heading { position: relative; z-index: 2; max-width: 930px; }
.result-career__heading > p { width: fit-content; margin-bottom: 14px; border-radius: 999px; padding: 7px 12px; color: #201d5c; background: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.result-career__heading h2 { max-width: 820px; font-size: clamp(36px, 3.25vw, 50px); line-height: 1; letter-spacing: -.045em; }
.result-career__heading > span { max-width: 790px; display: block; margin-top: 13px; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.4; }
.result-career__track { position: relative; height: 278px; margin-top: 22px; }
.result-career__track svg { position: absolute; inset: 45px 0 auto; width: 100%; height: 140px; overflow: visible; }
.result-career__track path { fill: none; stroke: #aeeaff; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 8px 12px rgba(93, 211, 255, .24)); }
.result-career__step { position: absolute; width: 22%; min-height: 168px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 19px; padding: 15px 16px; background: rgba(19, 23, 99, .28); backdrop-filter: blur(10px); }
.result-career__step::before { content: ""; position: absolute; top: -20px; left: 20px; width: 15px; height: 15px; border: 5px solid #fff; border-radius: 50%; background: #6cddff; box-shadow: 0 0 0 5px rgba(174, 234, 255, .2); }
.result-career__step i { color: #aeeaff; font-size: 12px; font-style: normal; font-weight: 800; }
.result-career__step-head { min-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.result-career__step-head em { border-radius: 999px; padding: 4px 8px; color: #211e59; background: var(--lime); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.result-career__step h3 { margin-top: 8px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.05; letter-spacing: -.025em; }
.result-career__step p { margin-top: 8px; color: rgba(255, 255, 255, .7); font-size: 12px; line-height: 1.3; }
.result-career__step strong { display: block; margin-top: 11px; color: #bfefff; font-size: clamp(20px, 1.75vw, 26px); line-height: 1; letter-spacing: -.035em; }
.result-career__step strong small { color: rgba(255, 255, 255, .58); font-size: 10px; font-weight: 600; letter-spacing: 0; }
.result-career__step--one { left: 0; bottom: 0; }
.result-career__step--two { left: 26%; bottom: 19px; }
.result-career__step--three { left: 52%; bottom: 47px; }
.result-career__step--four { right: 0; bottom: 78px; border-color: rgba(216, 255, 40, .64); color: #1f1e4c; background: var(--lime); box-shadow: 0 18px 40px rgba(31, 37, 105, .2); }
.result-career__step--four::before { background: var(--lime); }
.result-career__step--four i, .result-career__step--four p, .result-career__step--four strong, .result-career__step--four strong small { color: rgba(31, 30, 76, .74); }
.result-career__step--four h3 { color: #1f1e4c; }
.result-career__formats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.result-career__formats span { border: 1px solid rgba(255, 255, 255, .17); border-radius: 14px; padding: 10px 13px; color: rgba(255, 255, 255, .68); background: rgba(255, 255, 255, .08); font-size: 11px; line-height: 1.3; }
.result-career__formats b { color: #fff; }
.result-career__source { margin-top: 9px; color: rgba(255, 255, 255, .42); font-size: 9px; }

.result-combined-path { position: relative; overflow: hidden; border: 1px solid #e1e4f2; border-radius: 32px; padding: clamp(36px, 4vw, 58px); color: #1d1d31; background: radial-gradient(circle at 91% 5%, rgba(105, 207, 255, .22), transparent 28%), radial-gradient(circle at 7% 105%, rgba(216, 255, 40, .15), transparent 26%), #f7f8ff; box-shadow: 0 18px 58px rgba(30, 31, 66, .09); }
.result-combined-path::after { content: ""; position: absolute; right: -140px; top: -250px; width: 560px; height: 560px; border: 1px solid rgba(61, 59, 255, .1); border-radius: 50%; pointer-events: none; }
.result-combined-path__heading { max-width: 940px; }
.result-combined-path__heading > p { width: fit-content; margin-bottom: 13px; border-radius: 999px; padding: 7px 12px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.result-combined-path__heading h2 { max-width: 840px; font-size: clamp(38px, 3.5vw, 54px); line-height: 1; letter-spacing: -.045em; }
.result-combined-path__rail { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px; margin-top: 18px; padding-top: 76px; }
.result-combined-path__line { position: absolute; top: 2px; left: 0; right: 0; height: 60px; }
.result-combined-path__line svg { width: 100%; height: 100%; overflow: visible; }
.result-combined-path__line path { fill: none; stroke: #5e59e7; stroke-width: 2.5; stroke-linecap: round; opacity: .58; filter: drop-shadow(0 5px 8px rgba(61, 59, 255, .16)); }
.combined-step { position: relative; z-index: 1; height: 360px; min-height: 360px; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .3); border-radius: 23px; padding: 16px; color: #fff; background: linear-gradient(150deg, rgba(58, 54, 178, .9), rgba(43, 91, 190, .84)); box-shadow: 0 16px 38px rgba(29, 38, 130, .2); backdrop-filter: blur(14px); }
.combined-step:nth-of-type(1) { transform: none; }
.combined-step:nth-of-type(2) { transform: translateY(-18px); }
.combined-step:nth-of-type(3) { transform: translateY(-36px); }
.combined-step:nth-of-type(4) { transform: translateY(-54px); }
.combined-step__top { min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.combined-step__top i { width: 42px; height: 42px; display: grid; place-items: center; border: 4px solid rgba(255, 255, 255, .9); border-radius: 50%; color: var(--blue); background: #e4e7ff; font-size: 13px; font-style: normal; font-weight: 800; box-shadow: 0 0 0 1px #dfe2f4; }
.combined-step__top em { margin-top: 6px; border-radius: 999px; padding: 5px 9px; color: #211e59; background: var(--lime); font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.combined-step h3 { margin-top: 8px; color: #fff; font-size: 22px; line-height: 1.08; letter-spacing: -.025em; }
.combined-step__intro { margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 400; line-height: 1.3; }
.combined-step__stage { min-height: 30px; display: flex; align-items: flex-end; margin-top: 13px; color: rgba(255, 255, 255, .58); font-size: 10px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.combined-step__stage + h3 { margin-top: 6px; }
.combined-step__salary { display: block; margin-top: 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 13px; padding: 10px 12px; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: 0 8px 18px rgba(20, 27, 105, .12); font-size: clamp(25px, 2.15vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.combined-step__salary--start { color: #fff; }
.combined-step__learn { margin-top: 17px; color: rgba(255, 255, 255, .55); font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.combined-step__learn + ul { margin-top: 10px; }
.combined-step ul { display: grid; gap: 7px; margin-top: 13px; padding-left: 0; list-style: none; }
.combined-step li { position: relative; padding-left: 16px; color: rgba(255, 255, 255, .74); font-size: 12px; line-height: 1.28; }
.combined-step li::before { content: ""; position: absolute; top: .52em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #aeeaff; }
.combined-step--start li::before { width: 15px; height: 15px; top: .08em; display: grid; place-items: center; color: #242052; background: var(--lime); font-size: 9px; }
.combined-step--start li::after { content: "✓"; position: absolute; top: .04em; left: 3px; color: #242052; font-size: 9px; font-weight: 800; }
.combined-step--start li { padding-left: 23px; color: rgba(255, 255, 255, .78); }
.combined-step--start { border-color: rgba(255, 255, 255, .3); }
.combined-step--start .combined-step__top i { color: #242052; background: var(--lime); }
.combined-step--start .combined-step__learn { color: rgba(255, 255, 255, .55); }
.combined-step--final { color: #fff; border-color: rgba(255, 255, 255, .3); }
.combined-step--final .combined-step__top i { color: #252160; background: #bdeeff; }
.combined-step--final h3 { color: #fff; }
.combined-step--final .combined-step__stage, .combined-step--final .combined-step__learn { color: rgba(255, 255, 255, .56); }
.combined-step--final .combined-step__salary { color: #242052; background: var(--lime); box-shadow: 0 10px 24px rgba(216, 255, 40, .18); }
.combined-step--final li { color: rgba(255, 255, 255, .72); }
.combined-step--final li::before { background: var(--lime); }
.result-combined-path__note { position: relative; z-index: 1; margin-top: 10px; color: #8a8c99; font-size: 10px; line-height: 1.35; }

.result-consultation { position: relative; display: grid; grid-template-columns: minmax(330px, .88fr) minmax(520px, 1.12fr); align-items: center; gap: clamp(34px, 3.5vw, 56px); min-height: 0; border-color: transparent; padding: 34px 38px; color: #fff; background: radial-gradient(circle at 96% 4%, rgba(102, 217, 255, .38), transparent 30%), radial-gradient(circle at 4% 105%, rgba(216, 255, 40, .17), transparent 26%), linear-gradient(145deg, #302895, #3c4ed2 54%, #176fc3); box-shadow: 0 22px 64px rgba(33, 40, 140, .2); }
.result-consultation::before { content: ""; position: absolute; top: -120px; right: -70px; width: 330px; height: 330px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 50%; pointer-events: none; }
.result-consultation__copy { position: relative; z-index: 2; }
.result-consultation__copy .result-kicker { color: var(--lime); }
.result-consultation__copy h2 { max-width: 560px; color: #fff; font-size: clamp(38px, 3vw, 50px); line-height: 1.02; letter-spacing: -.045em; }
.result-consultation__duration { width: fit-content; margin-top: 16px; border: 1px solid rgba(174, 234, 255, .65); border-radius: 999px; padding: 7px 14px; color: #fff; background: rgba(174, 234, 255, .1); font-size: 13px; font-weight: 700; }
.result-consultation__copy ul { display: grid; gap: 12px; margin-top: 21px; padding: 0; list-style: none; }
.result-consultation__copy li { position: relative; padding-left: 34px; color: rgba(255, 255, 255, .9); font-size: 15px; font-weight: 700; line-height: 1.4; }
.result-consultation__copy li::before { content: "✓"; position: absolute; top: -3px; left: 0; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #25205f; background: var(--lime); font-size: 14px; }
.result-consultation__form { position: relative; z-index: 3; overflow: hidden; border: 1px solid rgba(255, 255, 255, .5); border-radius: 26px; padding: 27px 28px 24px; background: rgba(255, 255, 255, .97); box-shadow: 0 26px 60px rgba(16, 22, 100, .28); }
.result-consultation__form::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: linear-gradient(90deg, var(--lime), #8de8ff, #6b63ff); }
.result-consultation__form-title { margin-bottom: 15px; color: #202033; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.result-consultation__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.result-consultation__field { display: grid; gap: 9px; }
.result-consultation__field--wide { grid-column: 1 / -1; }
.result-consultation__field > span { font-size: 14px; font-weight: 700; }
.result-consultation__field input { width: 100%; height: 52px; border: 1px solid #d7d9e8; border-radius: 14px; padding: 0 17px; color: var(--ink); background: #f8f9ff; font: inherit; font-size: 16px; outline: none; }
.result-consultation__field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61, 59, 255, .09); }
.result-consultation__field.is-error input { border-color: #e0202a; }
.result-consultation__form .skb-consent__item { margin-top: 14px; color: #616373; font-size: 12px; }
.result-consultation__form .skb-consent a { color: var(--blue); }
.result-consultation__submit { width: 100%; min-height: 56px; margin-top: 13px; border-radius: 16px; padding-inline: 22px; color: #242052; background: var(--lime); box-shadow: 0 12px 26px rgba(155, 190, 20, .22); font-size: 16px; font-weight: 800; line-height: 1.2; }
.result-consultation__submit:hover { background: #e2ff5b; }
.result-consultation__submit:disabled { cursor: default; opacity: .68; box-shadow: none; }
body.modal-open { overflow: hidden; }
.result-consultation-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 15, 54, .68); backdrop-filter: blur(8px); }
.result-consultation-modal[hidden] { display: none; }
.result-consultation-modal__panel { position: relative; width: min(440px, 100%); display: grid; justify-items: center; border: 1px solid rgba(61, 59, 255, .14); border-radius: 28px; padding: 42px 34px 36px; color: #202033; background: #fff; box-shadow: 0 30px 90px rgba(12, 15, 70, .32); text-align: center; }
.result-consultation-modal__close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #55576a; background: #f0f1fa; font-size: 24px; line-height: 1; cursor: pointer; }
.result-consultation-modal__icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; color: #242052; background: var(--lime); font-size: 27px; font-weight: 900; box-shadow: 0 12px 28px rgba(164, 195, 24, .24); }
.result-consultation-modal__panel strong { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; }
.result-consultation-modal__panel p { margin-top: 10px; color: #656777; font-size: 16px; line-height: 1.45; }

.result-work { padding: clamp(36px, 4vw, 56px) 16px 26px; background: radial-gradient(circle at 50% 42%, rgba(224, 229, 255, .42), transparent 48%), #fbfcff; }
.result-work .result-section__heading { padding: 0 clamp(18px, 2.5vw, 38px); }
.result-work .result-section__heading h2 { max-width: 800px; font-size: clamp(44px, 4vw, 64px); }
.career-map { position: relative; display: grid; grid-template-columns: 1fr 1.12fr 1.12fr 1fr; align-items: stretch; gap: 26px; margin-top: 46px; padding-top: 14px; }
.career-map__path { position: absolute; top: -8px; left: 1.5%; width: 97%; height: 60px; overflow: visible; }
.career-map__path path { fill: none; stroke: #7478ff; stroke-width: 3; opacity: .55; }
.career-step { position: relative; min-width: 0; min-height: 480px; display: flex; flex-direction: column; border-radius: 22px; padding: 48px 24px 24px; background: rgba(255, 255, 255, .9); box-shadow: 0 14px 38px rgba(54, 57, 105, .055); }
.career-step--start { border: 1.5px solid #b8ea42; background: linear-gradient(155deg, #fdfff7, #f7fbef); }
.career-step--finish { color: #fff; background: linear-gradient(145deg, #2348ff, #0a58e9); box-shadow: 0 18px 42px rgba(25, 72, 236, .2); }
.career-step:not(:last-child)::after { content: "→"; position: absolute; z-index: 4; top: -14px; right: -38px; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; color: var(--blue); background: #eff0ff; font-size: 21px; font-weight: 700; box-shadow: 0 5px 14px rgba(54, 57, 105, .09); }
.career-step__number { position: absolute; z-index: 2; top: -20px; left: 24px; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: var(--blue); background: #eff0ff; font-size: 22px; font-weight: 800; box-shadow: 0 4px 13px rgba(54, 57, 105, .1); }
.career-step--start .career-step__number { color: var(--ink); background: var(--lime); }
.career-step--finish .career-step__number { border-color: #2450f8; background: #fff; }
.career-step h3 { min-height: 50px; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.08; letter-spacing: -.035em; white-space: nowrap; }
.career-step ul { display: grid; gap: 11px; margin: auto 0 0; padding: 0; list-style: none; }
.career-step li { position: relative; padding-left: 20px; color: #515468; font-size: 14px; line-height: 1.35; }
.career-step li::before { content: ""; position: absolute; top: .48em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: #8586ff; }
.career-step--start li { padding-left: 30px; }
.career-step--start li::before { content: "✓"; top: -1px; left: 0; width: 20px; height: 20px; display: grid; place-items: center; color: #177f5c; background: #c9f450; font-size: 11px; font-weight: 900; }
.career-step--finish li { color: rgba(255, 255, 255, .88); }
.career-step--finish li::before { background: #fff; }
.career-visual { position: relative; width: 150px; height: 142px; flex: 0 0 auto; margin: 10px auto 20px; filter: drop-shadow(0 14px 12px rgba(59, 69, 148, .16)); }
.career-visual--compass i { position: absolute; top: 8px; left: 9px; width: 108px; height: 108px; border: 12px solid #a9e33f; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff, #dfe7ea); box-shadow: inset 0 0 0 5px #fff; }
.career-visual--compass i::before { content: ""; position: absolute; top: 24px; left: 45px; width: 15px; height: 50px; background: linear-gradient(#252b37 50%, #aab1bc 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: rotate(35deg); }
.career-visual--compass b { position: absolute; top: 56px; left: 56px; width: 17px; height: 17px; border-radius: 50%; background: #65bd58; }
.career-visual--compass span { position: absolute; right: 0; bottom: 12px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px; color: #159477; background: var(--lime); font-size: 28px; font-weight: 900; transform: rotate(-4deg); }
.career-visual--docs i, .career-visual--docs b { position: absolute; width: 86px; height: 105px; border-radius: 10px; }
.career-visual--docs i { top: 8px; right: 16px; background: linear-gradient(145deg, #72a1ff, #4e55df); transform: rotate(5deg); }
.career-visual--docs b { top: 28px; left: 14px; background: #f8faff; box-shadow: inset 0 0 0 2px #e1e6ff; }
.career-visual--docs b::after { content: ""; position: absolute; top: 33px; left: 19px; width: 50px; height: 32px; background: repeating-linear-gradient(#a8aefa 0 5px, transparent 5px 12px); }
.career-visual--docs span { position: absolute; right: 0; bottom: 6px; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #7e83ff, #584be2); font-size: 24px; }
.career-visual--docs-onec b { display: grid; place-items: center; color: #ef3931; font-size: 28px; font-weight: 900; }
.career-visual--docs-onec b::after { display: none; }
.career-visual--onec i { position: absolute; top: 18px; left: 12px; width: 126px; height: 82px; display: grid; place-items: center; border: 7px solid #dbe2ff; border-radius: 10px; color: #f03931; background: #fff; font-style: normal; font-size: 32px; font-weight: 900; box-shadow: inset 0 0 0 2px #b8c5ff; }
.career-visual--onec i::after { content: ""; position: absolute; left: 35px; bottom: -19px; width: 55px; height: 8px; border-radius: 4px; background: #d7ddf1; box-shadow: 0 8px 0 -2px #c3cae4; }
.career-visual--onec b { position: absolute; right: -1px; bottom: 12px; width: 38px; height: 48px; background: linear-gradient(150deg, #5266ff, #818cff); clip-path: polygon(0 0, 100% 65%, 62% 70%, 78% 100%, 58% 100%, 44% 73%, 18% 100%); transform: rotate(-12deg); }
.career-visual--calc i { position: absolute; left: 9px; bottom: 11px; width: 75px; height: 95px; border: 7px solid #9ab5ff; border-radius: 12px; background: repeating-linear-gradient(90deg, #667cf4 0 15px, transparent 15px 22px), repeating-linear-gradient(#7189ff 0 15px, #dbe4ff 15px 22px); box-shadow: inset 0 20px 0 #d7e1ff; }
.career-visual--calc b { position: absolute; top: 4px; right: 8px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #7aa2ff, #4564ee); font-size: 30px; }
.career-visual--calc span { position: absolute; right: 10px; bottom: 7px; width: 62px; height: 45px; border-radius: 50%; background: linear-gradient(#eaf0ff 0 25%, #c9d5f8 25% 34%, #e7edff 34% 59%, #c3cff2 59% 68%, #e4eaff 68%); }
.career-visual--career i { position: absolute; left: 3px; bottom: 14px; width: 92px; height: 69px; border-radius: 12px; background: linear-gradient(145deg, #a8b4ff, #7385f5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.career-visual--career i::before { content: ""; position: absolute; top: -15px; left: 29px; width: 31px; height: 18px; border: 6px solid #8798ff; border-bottom: 0; border-radius: 8px 8px 0 0; }
.career-visual--career b { position: absolute; right: 4px; bottom: 20px; width: 18px; height: 65px; border-radius: 5px 5px 0 0; background: #bdc8ff; box-shadow: -26px 18px 0 #91a6ff, -52px 34px 0 #738df8; }
.career-visual--career b::after { content: "↗"; position: absolute; right: -8px; top: -41px; color: #b8cbff; font-size: 58px; font-weight: 400; transform: rotate(-7deg); }
.career-visual--career span { position: absolute; right: 36px; bottom: 4px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #a8db31; font-size: 22px; font-weight: 900; }

.result-route { background: radial-gradient(circle at 95% 8%, rgba(61, 59, 255, .09), transparent 28%), #fff; }
.result-route__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.result-route__steps article { min-height: 265px; display: flex; flex-direction: column; border-radius: 22px; padding: 24px; background: #f3f3f9; }
.result-route__steps article:nth-child(2) { background: #edeeff; }
.result-route__steps article:nth-child(3) { background: #f2f8d8; }
.result-route__steps article:nth-child(4) { color: #fff; background: var(--blue); }
.result-route__steps article > span { color: var(--blue); font-size: 13px; font-weight: 800; }
.result-route__steps article:nth-child(4) > span { color: var(--lime); }
.result-route__steps h3 { margin-top: auto; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.result-route__steps p { margin-top: 11px; color: #606273; font-size: 14px; line-height: 1.45; }
.result-route__steps article:nth-child(4) p { color: rgba(255, 255, 255, .77); }

.result-support { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); align-items: start; gap: 50px; background: #f0f1ff; }
.result-support__lead { max-width: 470px; margin-top: 18px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.result-support__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.result-support__grid article { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 20px; padding: 22px; background: rgba(255, 255, 255, .78); }
.result-support__grid article.is-priority { grid-column: 1 / -1; min-height: 168px; padding: 26px; background: #fff; box-shadow: 0 16px 38px rgba(61, 59, 255, .08); }
.result-support__grid small { display: none; margin-bottom: auto; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.result-support__grid article.is-priority small { display: block; }
.result-support__grid b { font-size: 20px; }
.result-support__grid article.is-priority b { font-size: 24px; }
.result-support__grid span { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.result-support__grid article.is-priority span { max-width: 620px; font-size: 16px; }

.result-final-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; overflow: hidden; border-radius: 32px; padding: clamp(38px, 5vw, 68px); color: #fff; background: linear-gradient(135deg, #12121c, #262638); }
.result-final-cta > div { max-width: 780px; }
.result-final-cta .result-kicker { color: var(--lime); }
.result-final-cta > div > p:last-child { color: rgba(255, 255, 255, .7); }
.result-final-cta__button { min-width: 310px; min-height: 66px; justify-content: space-between; border-radius: 17px; color: var(--ink); background: var(--lime); text-decoration: none; font-weight: 800; }
.result-final-cta__button:hover { background: #e2ff5b; }

@media (max-width: 960px) {
  .result-hero { min-height: auto; grid-template-columns: 1fr; overflow: visible; }
  .result-hero--fit { grid-template-columns: 1fr; }
  .result-hero__note { position: static; margin-top: 14px; }
  .result-proof { margin: 0 40px 42px; }
  .result-proof--tasks-only { min-height: 0; grid-template-columns: .7fr 1px 1.3fr; align-items: stretch; }
  .result-proof--tasks-only article { min-height: 170px; }
  .result-proof__divider { width: 1px; height: auto; margin-block: 18px; margin-inline: 0; background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.62), rgba(255,255,255,.06)); }
  .result-hero h2 { width: 100%; max-width: 820px; }
  .result-hero__visual { min-height: 520px; }
  .result-map__grid, .result-support { grid-template-columns: 1fr; }
  .result-demand { grid-template-columns: 1fr; }
  .result-demand__lead h2 { max-width: none; }
  .result-demand__source { grid-column: 1; }
  .result-career__track { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .result-career__track svg { display: none; }
  .result-career__step { position: relative; inset: auto; width: auto; min-height: 190px; }
  .result-career__step::before { display: none; }
  .result-career__formats { grid-template-columns: 1fr; }
  .result-combined-path__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .result-combined-path__line { display: none; }
  .combined-step:nth-of-type(n) { transform: none; }
  .result-consultation { grid-template-columns: 1fr; }
  .result-consultation__copy h2 { max-width: 760px; }
  .career-map { grid-template-columns: repeat(4, minmax(230px, 1fr)); overflow-x: auto; margin-inline: -20px; padding: 14px 20px 16px; scroll-snap-type: x proximity; }
  .career-map__path { left: 20px; width: 980px; }
  .career-step { min-height: 470px; scroll-snap-align: start; }
  .result-route__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-final-cta { grid-template-columns: 1fr; align-items: start; }
}

@media (min-width: 961px) and (max-height: 800px) {
  body:has(#screen-result.active) .app { width: min(var(--content-width), calc(100% - var(--content-gutter))); padding-top: 18px; }
  .result-hero { height: calc(100vh - 108px); min-height: 0; border-radius: 36px; }
  .result-hero__content { gap: 23px; padding: 20px 42px; }
  .result-hero__eyebrow { margin-bottom: 0; padding: 6px 12px; }
  .result-hero h2 { width: 700px; max-width: none; font-size: 44px; line-height: .98; }
  .result-hero__intro { max-width: 650px; margin-top: 0; font-size: 18px; line-height: 1.35; }
  .result-summary { width: min(100%, 610px); min-height: 92px; gap: 0; margin-top: 0; padding: 10px 16px; border-radius: 16px; }
  .result-summary h3, .result-strengths h3 { font-size: 20px; }
  .result-scale { height: 9px; }
  .result-legend { font-size: 13px; }
  .result-strengths { margin-top: 2px; }
  .result-strengths__list { margin-top: 7px; }
  .result-strengths__list span { min-height: 30px; padding: 5px 13px; font-size: 14px; }
  .result-details { margin-top: 26px; font-size: 15px; }
  .result-hero__visual { margin-left: -160px; }
  .result-hero__visual > img { right: 26px; bottom: -9px; width: calc(100% + 170px); height: 109%; }
  .result-hero--fit .result-hero__content { gap: 0; padding: 32px 48px; }
  .result-hero--fit .result-hero__eyebrow { margin-bottom: 28px; }
  .result-hero--fit h2 { width: auto; max-width: 660px; font-size: 49px; }
  .result-hero--fit .result-hero__intro { margin-top: 32px; font-size: 16px; }
  .result-hero__note { left: 48px; right: 32px; bottom: 18px; font-size: 11px; }
  .result-proof { margin: 24px 42px 24px 0; padding: 16px 24px; }
  .result-proof--tasks-only { min-height: 330px; }
  .result-proof--tasks-only article { padding: 18px 12px; }
  .result-proof__total { min-height: 150px; }
  .result-proof__total strong { font-size: 82px; }
  .result-proof__total h3 { margin-top: 14px; font-size: 26px; }
  .result-proof__count { min-height: 104px; }
  .result-proof__fit span { font-size: 52px; }
  .result-proof h3 { font-size: 20px; }
  .result-proof__market > strong { font-size: 46px; }
}

@media (max-width: 640px) {
  .result-hero { border-radius: 24px; }
  .result-hero__content { padding: 28px 22px 32px; }
  .result-hero h2 { font-size: clamp(38px, 11vw, 50px); }
  .result-hero__intro { font-size: 17px; }
  .result-work { padding-inline: 20px; }
  .result-work .result-section__heading { padding: 0; }
  .result-work .result-section__heading h2 { font-size: 37px; }
  .career-map { grid-template-columns: 1fr; overflow: visible; margin: 38px 0 0; padding: 12px 0 0; gap: 22px; }
  .career-map__path { display: none; }
  .career-step:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -30px; transform: translateX(50%); }
  .career-step { min-height: 440px; padding: 45px 24px 24px; }
  .career-step h3 { font-size: 20px; white-space: normal; }
  .result-legend { gap: 8px 18px; }
  .result-hero__visual { min-height: 420px; }
  .result-hero--fit .result-hero__content { padding: 30px 22px; }
  .result-hero__note { position: static; margin-top: 14px; font-size: 11px; }
  .result-hero--fit h2 { font-size: 41px; }
  .result-hero--fit .result-hero__intro { margin-top: 22px; font-size: 17px; }
  .result-proof { margin: 0 14px 18px; border-radius: 24px; padding: 12px; }
  .result-proof article { border-radius: 18px; padding: 19px; }
  .result-proof--tasks-only { grid-template-columns: 1fr; }
  .result-proof--tasks-only article { min-height: 120px; }
  .result-proof__divider { width: auto; height: 1px; margin: 0 14px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.62), rgba(255,255,255,.06)); }
  .result-proof__bars { gap: 20px; padding: 22px 14px 12px; }
  .result-page { gap: 16px; padding: 20px 0 40px; }
  .result-demand { gap: 20px; border-radius: 23px; padding: 26px 20px 20px; }
  .result-demand__facts { grid-template-columns: 1fr; }
  .result-demand__fact { min-height: 118px; }
  .result-demand__fact strong { font-size: 40px; }
  .result-career { border-radius: 23px; padding: 30px 20px; }
  .result-career__heading h2 { font-size: 37px; }
  .result-career__heading > span { font-size: 16px; }
  .result-career__track { grid-template-columns: 1fr; margin-top: 30px; }
  .result-career__step { min-height: 165px; }
  .result-combined-path { border-radius: 23px; padding: 30px 20px; }
  .result-combined-path__heading h2 { font-size: 37px; }
  .result-combined-path__rail { grid-template-columns: 1fr; margin-top: 28px; }
  .combined-step { height: auto; min-height: 350px; }
  .result-section, .result-final-cta { border-radius: 23px; padding: 28px 20px; }
  .result-section__heading h2, .result-support h2, .result-final-cta h2 { font-size: 34px; }
  .result-section__heading > p:last-child, .result-final-cta > div > p:last-child { font-size: 16px; }
  .result-map__grid, .result-support__grid, .result-route__steps { grid-template-columns: 1fr; }
  .result-consultation { min-height: 0; }
  .result-consultation__copy h2 { font-size: 34px; }
  .result-consultation__fields { grid-template-columns: 1fr; }
  .result-consultation__field--wide { grid-column: auto; }
  .result-consultation__form { border-radius: 20px; padding: 27px 16px 20px; }
  .result-consultation__form .skb-consent__item { font-size: 14px; line-height: 1.4; }
  .result-map__card { padding: 21px 17px; }
  .result-route__steps article { min-height: 220px; }
  .result-map .result-section__heading > p:last-child { white-space: normal; }
  .result-support { gap: 28px; }
  .result-support__lead { font-size: 16px; }
  .result-support__grid article.is-priority { grid-column: auto; }
  .result-final-cta__button { min-width: 0; width: 100%; }
}

/* Profile spoiler */
body:has(#screen-spoiler.active) { overflow-x: hidden; background: linear-gradient(135deg, #f7f8ff 0%, #eef2ff 54%, #f5f7ff 100%); }
body:has(#screen-spoiler.active) .app { width: min(1440px, calc(100% - 80px)); }
#screen-spoiler.active { padding: 20px 0 44px; }
.spoiler-shell { display: grid; gap: 24px; }
.spoiler-heading { display: grid; gap: 12px; }
.spoiler-heading__eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 14px; color: var(--blue); background: #e3e5ff; font-size: 14px; font-weight: 700; }
.spoiler-heading h2 { max-width: none; white-space: nowrap; font-size: clamp(42px, 3.7vw, 56px); font-weight: 800; line-height: .98; letter-spacing: -.045em; }
.spoiler-heading > p:last-child { max-width: 850px; color: #555869; font-size: 17px; line-height: 1.42; }
.spoiler-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(380px, .8fr); align-items: stretch; gap: 22px; }
.profile-preview { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e0e1ef; border-radius: 28px; padding: 28px 32px; background: rgba(255, 255, 255, .95); box-shadow: 0 24px 70px rgba(43, 45, 90, .10); }
.profile-preview::after { content: ""; position: absolute; right: -80px; bottom: -100px; width: 340px; height: 340px; border-radius: 50%; background: rgba(216, 255, 40, .18); filter: blur(35px); pointer-events: none; }
.profile-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #77798a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.profile-preview__status { display: inline-flex; align-items: center; gap: 7px; }
.profile-preview__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216, 255, 40, .23); }
.profile-preview__intro { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-preview__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; color: #fff; background: var(--blue); font-size: 27px; font-weight: 800; box-shadow: 0 12px 26px rgba(61, 59, 255, .25); }
.profile-preview__intro p { color: var(--blue); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.profile-preview__intro h3 { margin-top: 6px; font-size: clamp(26px, 2.1vw, 34px); line-height: 1.08; letter-spacing: -.025em; }
.profile-preview__intro .profile-preview__start-copy { max-width: 720px; margin-top: 10px; color: #555869; font-size: 14px; font-weight: 400; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.spoiler-blur { display: inline-block; color: transparent; text-shadow: 0 0 11px rgba(22, 22, 31, .75); user-select: none; }
.profile-preview__divider { height: 1px; margin: 24px 0; background: #e5e5ef; }
.profile-preview__divider--heading { margin: 16px 0; }
.profile-preview__note { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; }
.profile-preview__avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #e7e6ff; font-size: 13px; font-weight: 800; }
.profile-preview__note strong { font-size: 16px; }
.profile-preview__note p { max-width: 720px; margin-top: 7px; color: #555869; font-size: 15px; line-height: 1.45; }
.profile-preview__skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.profile-preview__skills strong { display: block; font-size: 15px; line-height: 1.3; }
.profile-preview__skill-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; overflow: hidden; }
.profile-preview__skill-list span { min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; overflow: hidden; border-radius: 999px; padding: 6px 11px; color: #29293a; background: rgba(216, 255, 40, .32); font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.profile-preview__skill-list span.is-blurred { color: transparent; background: #efeff8; text-shadow: 0 0 8px rgba(22, 22, 31, .72); user-select: none; }
.profile-preview__inside-title { display: block; margin-top: 24px; font-size: 16px; }
.profile-preview__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.profile-preview__grid > div { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px; border-radius: 16px; padding: 13px; background: #f5f5fb; }
.profile-preview__grid > div > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: #fff; font-size: 19px; font-weight: 800; }
.profile-preview__grid b { font-size: 14px; }
.profile-preview__grid em { align-self: start; width: fit-content; font-size: 12px; font-style: normal; }
.profile-preview__lock { position: relative; z-index: 1; width: fit-content; margin: 18px auto 0; border: 1px solid #dfe0ed; border-radius: 999px; padding: 9px 14px; color: #666879; background: rgba(255, 255, 255, .9); font-size: 12px; }
.profile-preview__lock span { color: var(--blue); font-weight: 800; }
.spoiler-unlock { border-radius: 28px; padding: 28px; color: #fff; background: linear-gradient(145deg, #3533ec 0%, #4b4aff 100%); box-shadow: 0 24px 70px rgba(61, 59, 255, .24); }
.spoiler-unlock__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; color: var(--blue); background: var(--lime); font-size: 28px; font-weight: 800; transform: rotate(-4deg); }
.spoiler-unlock h3 { max-width: 420px; margin-top: 18px; font-size: clamp(28px, 2.2vw, 36px); line-height: 1.04; letter-spacing: -.025em; }
.spoiler-unlock ul { display: grid; gap: 10px; margin: 18px 0 20px; padding: 0; list-style: none; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.35; }
.spoiler-unlock li { display: flex; gap: 9px; }
.spoiler-unlock li span { color: var(--lime); font-weight: 800; }
.spoiler-form { display: grid; gap: 10px; }
.spoiler-form > label:first-child { font-size: 13px; font-weight: 700; }
.spoiler-phone { height: 58px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: #fff; transition: border-color .2s ease; }
.spoiler-phone.is-error { border-color: #ff736b; }
.spoiler-phone > span { height: 100%; display: grid; place-items: center; border-right: 1px solid #e6e6ee; color: var(--ink); font-weight: 700; }
.spoiler-phone input { width: 100%; height: 100%; border: 0; outline: 0; padding: 0 15px; color: var(--ink); background: transparent; font-size: 17px; }
.spoiler-phone input::placeholder { color: #a9abb7; }
.spoiler-form__submit { min-height: 58px; justify-content: space-between; margin-top: 2px; border: 0; border-radius: 14px; padding: 0 20px; color: var(--ink); background: var(--lime); font-size: 16px; font-weight: 800; cursor: pointer; }
.spoiler-form__submit:hover { background: #e2ff5b; transform: translateY(-1px); }

@media (max-width: 1040px) {
  body:has(#screen-spoiler.active) .app { width: min(100% - 36px, 900px); }
  .spoiler-layout { grid-template-columns: 1fr; }
  .spoiler-unlock { max-width: none; }
}

@media (max-width: 640px) {
  body:has(#screen-spoiler.active) .app { width: calc(100% - 24px); }
  #screen-spoiler.active { padding-top: 8px; }
  .spoiler-heading h2 { white-space: normal; font-size: 40px; }
  .spoiler-heading > p:last-child { font-size: 16px; }
  .profile-preview, .spoiler-unlock { border-radius: 22px; padding: 22px 18px; }
  .profile-preview__top { align-items: flex-start; flex-direction: column; }
  .profile-preview__intro { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; }
  .profile-preview__icon { width: 46px; height: 46px; border-radius: 14px; }
  .profile-preview__intro h3 { font-size: 25px; }
  .profile-preview__skills { grid-template-columns: 1fr; }
  .profile-preview__grid { grid-template-columns: 1fr; }
  .profile-preview__lock { border-radius: 14px; text-align: center; }
}

/* Compact spoiler layout aligned with the final-screen frame */
body:has(#screen-spoiler.active) { overflow: hidden; }
body:has(#screen-spoiler.active) .app { width: min(var(--content-width), calc(100% - var(--content-gutter))); padding-top: 18px; }
#screen-spoiler.active { padding: 22px 0 0; }
.spoiler-shell { height: calc(100vh - 108px); min-height: 0; overflow: hidden; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
.spoiler-heading { gap: 7px; }
.spoiler-heading h2 { font-size: clamp(38px, 3.1vw, 48px); }
.spoiler-heading > p:last-child { max-width: 920px; font-size: 15px; line-height: 1.35; }
.profile-preview .spoiler-heading h2 { font-size: clamp(34px, 2.8vw, 43px); }
.profile-preview .spoiler-heading > p:last-child { max-width: 760px; font-size: 14px; }
.spoiler-layout { min-height: 0; flex: 1; grid-template-columns: minmax(0, 1.55fr) minmax(360px, .78fr); gap: 18px; }
.profile-preview { min-height: 0; overflow: hidden; border-radius: 24px; padding: 20px 24px; box-shadow: 0 14px 40px rgba(43, 45, 90, .08); }
.profile-preview__intro { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
.profile-preview__icon { width: 48px; height: 48px; border-radius: 14px; font-size: 23px; }
.profile-preview__intro h3 { margin-top: 0; font-size: clamp(23px, 1.8vw, 28px); }
.profile-preview__intro .profile-preview__start-copy { margin-top: 6px; font-size: 13px; line-height: 1.35; }
.profile-preview__divider { margin: 15px 0; }
.profile-preview__skills { gap: 14px; }
.profile-preview__skills strong { font-size: 14px; }
.profile-preview__skill-list { margin-top: 7px; }
.profile-preview__skill-list span { min-height: 28px; padding: 5px 9px; font-size: 12px; }
.profile-preview__inside-title { margin-top: 16px; font-size: 14px; }
.profile-preview__grid { gap: 8px; margin-top: 8px; }
.profile-preview__grid > div { min-height: 50px; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; border-radius: 13px; padding: 8px 10px; }
.profile-preview__grid > div > span { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; }
.profile-preview__grid b { font-size: 13px; }
.profile-preview__lock { margin-top: 10px; padding: 6px 11px; font-size: 11px; }
.spoiler-unlock { min-height: 0; overflow: hidden; border-radius: 24px; padding: 20px 22px; }
.spoiler-unlock__icon { width: 44px; height: 44px; border-radius: 13px; font-size: 23px; }
.spoiler-unlock h3 { margin-top: 11px; font-size: clamp(27px, 2.1vw, 32px); }
.spoiler-unlock ul { gap: 7px; margin: 12px 0 13px; font-size: 13px; }
.spoiler-form { gap: 7px; }
.spoiler-form > label:first-child { font-size: 13px; }
.spoiler-phone { height: 48px; grid-template-columns: 48px minmax(0, 1fr); }
.spoiler-phone input { font-size: 16px; }
.spoiler-form__submit { min-height: 50px; padding: 0 17px; font-size: 15px; }
.spoiler-unlock .skb-consent__item { font-size: 11px; line-height: 1.3; }
.spoiler-unlock .skb-consent__box { width: 15px; height: 15px; }
.spoiler-unlock .skb-consent__note { margin-top: 4px; font-size: 10px; line-height: 1.3; }

@media (max-width: 1040px) {
  body:has(#screen-spoiler.active) { overflow: auto; }
  body:has(#screen-spoiler.active) .app { width: min(100% - 36px, 900px); }
  .spoiler-shell { height: auto; min-height: calc(100vh - 108px); overflow: visible; }
  .spoiler-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body:has(#screen-spoiler.active) .app { width: calc(100% - 24px); }
  #screen-spoiler.active { padding-top: 8px; }
  .spoiler-shell { padding: 14px 0 22px; }
  .spoiler-heading h2 { font-size: 36px; }
  .profile-preview, .spoiler-unlock { padding: 22px 18px; }
  .spoiler-unlock .skb-consent__item { font-size: 14px; line-height: 1.4; }
  .spoiler-unlock .skb-consent__box { width: 24px; height: 24px; }
  .spoiler-unlock .skb-consent__note { font-size: 14px; line-height: 1.4; }
}

/* Spoiler matched to the final result page */
body:has(#screen-spoiler.active) {
  overflow: hidden;
  background: #f5f6fb;
}

body:has(#screen-spoiler.active) .app {
  width: min(1120px, calc(100% - 96px));
  padding-top: 18px;
}

#screen-spoiler.active {
  padding: 22px 0 0;
}

#screen-spoiler .spoiler-shell {
  position: relative;
  height: calc(100vh - 108px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 36px;
  padding: clamp(30px, 3.4vw, 52px);
  color: #fff;
  background:
    radial-gradient(circle at 96% 90%, rgba(92, 207, 255, .5), transparent 29%),
    radial-gradient(circle at 73% 3%, rgba(113, 100, 239, .52), transparent 34%),
    linear-gradient(128deg, #211b61 0%, #31277e 56%, #315dba 100%);
  box-shadow: var(--shadow);
}

#screen-spoiler .spoiler-shell::before {
  content: "";
  position: absolute;
  top: -210px;
  right: -105px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  pointer-events: none;
}

#screen-spoiler .spoiler-layout {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(400px, 1.04fr);
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
}

.spoiler-copy {
  min-width: 0;
  height: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.spoiler-eyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 13px;
  color: #16161f;
  background: var(--lime);
  font-size: 13px;
  font-weight: 800;
}

.spoiler-eyebrow span {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #16161f;
  font-size: 10px;
}

.spoiler-copy > h2 {
  max-width: 640px;
  margin-top: 0;
  font-size: clamp(44px, 4vw, 62px);
  line-height: .96;
  letter-spacing: -.048em;
}

.spoiler-fit {
  max-width: 640px;
}

.spoiler-fit .spoiler-blur {
  min-width: 78px;
  height: .76em;
  display: inline-block;
  overflow: hidden;
  border-radius: 999px;
  color: transparent;
  background: #756fd4;
  box-shadow: 0 0 14px 6px rgba(117, 111, 212, .72);
  text-shadow: none;
  vertical-align: -.04em;
}

.spoiler-benefits {
  margin-top: 0;
}

.spoiler-benefits h3 {
  font-size: 18px;
  line-height: 1.2;
}

.spoiler-benefits ul {
  display: grid;
  gap: 9px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.spoiler-benefits li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  line-height: 1.35;
}

.spoiler-benefits li::before {
  content: "✓";
  position: absolute;
  top: -1px;
  left: 0;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #242052;
  background: var(--lime);
  font-size: 11px;
  font-weight: 900;
}

.spoiler-conversion {
  width: min(100%, 590px);
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 22px;
  padding: 17px 19px 15px;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 42px rgba(18, 21, 91, .18);
  backdrop-filter: blur(12px);
}

.spoiler-lead {
  max-width: 590px;
  margin-top: 12px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.42;
}

.spoiler-strength {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  margin-top: 17px;
}

.spoiler-strength > span {
  color: rgba(255, 255, 255, .58);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.spoiler-strength strong {
  border-radius: 999px;
  padding: 7px 12px;
  color: #201d5c;
  background: #bdeeff;
  font-size: 13px;
}

.spoiler-strength p {
  flex-basis: 100%;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

#screen-spoiler .spoiler-form {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 15px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#screen-spoiler .spoiler-form h3 {
  margin-bottom: 2px;
  font-size: 17px;
  line-height: 1.2;
}

#screen-spoiler .spoiler-form > label[for="spoilerPhone"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#screen-spoiler .spoiler-phone {
  height: 50px;
  grid-template-columns: 50px minmax(0, 1fr);
  border-radius: 13px;
}

#screen-spoiler .spoiler-form__submit {
  min-height: 50px;
  border-radius: 13px;
}

#screen-spoiler .skb-consent__item {
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  line-height: 1.28;
}

#screen-spoiler .skb-consent__note {
  display: block;
  color: rgba(255, 255, 255, .5);
  font-size: 8.5px;
  line-height: 1.25;
}

#screen-spoiler .skb-consent a {
  color: #fff;
}

#screen-spoiler .skb-consent__box {
  width: 15px;
  height: 15px;
  border-color: rgba(255, 255, 255, .66);
}

#screen-spoiler .profile-preview {
  position: relative;
  width: min(100%, 570px);
  height: min(100%, 560px);
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 30px;
  padding: 28px;
  color: #202033;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 72px rgba(15, 21, 84, .32);
  transform: none;
}

#screen-spoiler .profile-preview::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(216, 255, 40, .22);
  filter: blur(42px);
  pointer-events: none;
}

.profile-preview__blurred {
  filter: blur(6px);
  opacity: .48;
  user-select: none;
}

#screen-spoiler .profile-preview__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #727585;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

#screen-spoiler .profile-preview__top i {
  color: var(--blue);
  font-size: 25px;
  font-style: normal;
}

.profile-preview__result {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 24px;
  border-radius: 20px;
  padding: 22px;
  background: linear-gradient(145deg, #edf0ff, #edf9ff);
}

.profile-preview__result > span {
  color: #6d7080;
  font-size: 12px;
  font-weight: 700;
}

.profile-preview__result strong {
  width: 126px;
  height: 48px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  color: transparent;
  background: #aaa6ff;
  font-size: 58px;
  line-height: .9;
  letter-spacing: -.06em;
  text-shadow: none;
}

.profile-preview__result .spoiler-blur {
  color: transparent;
  text-shadow: 0 0 13px rgba(61, 59, 255, .7);
}

.profile-preview__content {
  position: relative;
  z-index: 1;
  margin-top: 22px;
}

.profile-preview__line {
  width: 90%;
  height: 11px;
  margin-top: 10px;
  border-radius: 999px;
  background: #d9dbe7;
}

.profile-preview__line--title {
  width: 54%;
  height: 18px;
  background: #b8bbe0;
}

.profile-preview__line--short { width: 72%; }

.profile-preview__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 23px;
}

.profile-preview__cards > div {
  min-height: 66px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  padding: 11px;
  background: #eff0f7;
}

.profile-preview__cards span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--blue);
  background: #fff;
  font-weight: 800;
}

.profile-preview__cards b {
  font-size: 11px;
  line-height: 1.25;
}

#screen-spoiler .profile-preview__lock {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(310px, calc(100% - 48px));
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  border: 0;
  border-radius: 22px;
  padding: 22px;
  color: #202033;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 18px 48px rgba(37, 38, 84, .2);
  text-align: center;
  transform: translate(-50%, -21%);
}

.profile-preview__lock-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--lime);
}

.profile-preview__lock-icon::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 17px;
  width: 16px;
  height: 14px;
  border: 3px solid #242052;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.profile-preview__lock-icon::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 14px;
  width: 24px;
  height: 18px;
  border-radius: 5px;
  background: #242052;
}

#screen-spoiler .profile-preview__lock strong {
  font-size: 20px;
  line-height: 1.08;
}

#screen-spoiler .profile-preview__lock p {
  color: #707282;
  font-size: 12px;
}

@media (min-width: 961px) and (max-height: 760px) {
  #screen-spoiler .spoiler-shell { padding-block: 24px; }
  .spoiler-copy { height: min(100%, 500px); }
  .spoiler-copy > h2 { margin-top: 0; font-size: 42px; }
  .spoiler-conversion { margin-top: 0; padding-block: 15px; }
  .spoiler-benefits ul { gap: 6px; margin-top: 9px; }
  .spoiler-lead { margin-top: 8px; font-size: 13px; }
  .spoiler-strength { margin-top: 11px; }
  #screen-spoiler .spoiler-form { margin-top: 17px; }
  #screen-spoiler .profile-preview { height: 500px; }
}

@media (max-width: 1040px) {
  body:has(#screen-spoiler.active) { overflow: auto; }
  body:has(#screen-spoiler.active) .app { width: min(100% - 36px, 900px); }
  #screen-spoiler .spoiler-shell { height: auto; min-height: calc(100vh - 108px); overflow: visible; }
  #screen-spoiler .spoiler-layout { grid-template-columns: 1fr; }
  .spoiler-copy { height: auto; gap: 22px; }
  #screen-spoiler .profile-preview { width: 100%; height: 520px; justify-self: stretch; transform: none; }
}

@media (max-width: 640px) {
  body:has(#screen-spoiler.active) .app { width: calc(100% - 24px); }
  #screen-spoiler.active { padding-top: 8px; }
  #screen-spoiler .spoiler-shell { border-radius: 24px; padding: 26px 19px; }
  #screen-spoiler .spoiler-layout { gap: 28px; }
  .spoiler-copy > h2 { font-size: 42px; }
  .spoiler-conversion { padding: 16px; }
  #screen-spoiler .skb-consent__item { font-size: 12px; }
  #screen-spoiler .skb-consent__box { width: 20px; height: 20px; }
  #screen-spoiler .profile-preview { height: 490px; border-radius: 23px; padding: 21px; }
  .profile-preview__cards { grid-template-columns: 1fr; }
  .profile-preview__cards > div:nth-child(n+3) { display: none; }
}

/* Mobile layout: keep every funnel screen readable and scrollable. */
@media (max-width: 760px) {
  :root {
    --content-gutter: 20px;
    --screen-height: auto;
  }

  body,
  body:has(#screen-task.active),
  body:has(#screen-feedback.active),
  body:has(#screen-spoiler.active) {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app,
  body:has(#screen-hero.active) .app,
  body:has(#screen-task.active) .app,
  body:has(#screen-feedback.active) .app,
  body:has(#screen-spoiler.active) .app,
  body:has(#screen-result.active) .app {
    width: calc(100% - 20px);
    padding-top: 6px;
  }

  .topbar {
    position: relative;
    min-height: 92px;
    grid-template-columns: minmax(0, 1fr) minmax(138px, 46vw);
    gap: 12px;
    padding: 8px 0 12px;
  }

  .brand img { width: 112px; }
  .topbar__context { font-size: 12px; line-height: 1.15; text-align: right; }
  .progress { width: 100%; min-width: 0; font-size: 12px; }
  body:has(#screen-hero.active) .progress { width: 100%; }

  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 10px 0 24px;
  }

  .hero h1 { font-size: clamp(40px, 11vw, 48px); }
  .hero-cta,
  .access-form__submit,
  .feedback-actions .btn,
  .day-app__footer .btn { min-height: 56px; }

  .acquaintance,
  .processing-card,
  .access-screen { padding-top: 14px; }

  .task-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 8px 0 24px;
  }

  .task-card,
  .task-card:has(.task-options--doc),
  .task-card:has(.task-options--onec),
  .task-card:has(.task-options--tax),
  .task-card:has(.task-options--payroll),
  .task-card:has(.task-options--deadline) {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "scene"
      "options";
    gap: 10px;
    overflow: visible;
    padding: 10px;
  }

  .task-card__head {
    gap: 18px;
    padding: 20px;
  }

  .task-meta { gap: 12px; }
  .task-text { font-size: 16px; }

  .task-scene {
    min-width: 0;
    min-height: 0;
    overflow: visible;
    padding: 10px;
  }

  .task-options { min-width: 0; }

  .doc-review {
    width: 100%;
    zoom: 1;
  }

  .doc-review__sheet { padding: 10px; }
  .doc-review__top { flex-wrap: wrap; }
  .doc-review__title { font-size: 20px; }

  .onec {
    width: 100%;
    overflow: hidden;
  }

  .onec__body {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .payroll__sheet,
  .tax-chat,
  .deadline-board { width: 100%; }

  .feedback-shell { margin-bottom: 24px; }

  #screen-spoiler .spoiler-shell {
    min-height: 0;
    padding: 24px 18px;
  }

  .spoiler-copy > h2 { font-size: clamp(38px, 11vw, 46px); }
  #screen-spoiler .profile-preview { height: auto; min-height: 430px; }

  .result-page { overflow: hidden; }
  .result-hero h2,
  .result-section__heading h2,
  .result-support h2,
  .result-final-cta h2 { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .processing-card__intro { grid-template-columns: 1fr; }
  .processing-orbit { justify-self: center; }

  .doc-parties,
  .doc-signatures { grid-template-columns: 1fr; }

  .result-hero h2,
  .result-hero--fit h2 { font-size: 38px; }
}

@media (max-width: 760px) {
  /* Task 3: mobile messenger keeps only the full-width compose field. */
  .tax-chat {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .tax-chat__body { min-height: min-content; }

  .tax-input-row { grid-template-columns: minmax(0, 1fr); }
  .tax-input-icon { display: none; }
  .tax-compose {
    width: 100%;
    max-height: none;
    border-radius: 18px;
  }

  .tax-message--accountant {
    width: 92%;
    max-width: 92%;
  }

  /* Task 4: amounts on the left, formula fields on the right. */
  .payroll__sheet {
    height: auto;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "top top"
      "hint hint"
      "tiles formula";
    column-gap: 8px;
    padding-bottom: 12px;
  }

  .payroll__top { grid-area: top; padding: 12px; }
  .payroll-hint { grid-area: hint; padding: 12px; }
  .payroll-space { display: none; }

  .payroll-tiles {
    grid-area: tiles;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 0 0 0 10px;
  }

  .payroll-tile {
    height: 54px;
    min-height: 54px;
    padding: 6px;
  }

  .payroll-tile strong { font-size: 15px; }

  .payroll-formula {
    grid-area: formula;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 0 10px 0 0;
    padding: 8px;
  }

  .payroll-formula i { font-size: 16px; line-height: 1; }
  .payroll-slot,
  .payroll-total { min-height: 42px; padding: 5px; }

  /* Task 5: priorities are assigned directly on task cards. */
  .deadline-board--mobile .deadline-board__body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "instruction"
      "inbox";
    gap: 14px;
    padding: 16px;
  }

  .deadline-board--mobile .deadline-cards {
    grid-template-rows: repeat(4, minmax(92px, auto));
  }

  .deadline-board--mobile .deadline-card {
    position: relative;
    min-height: 92px;
    padding: 36px 14px 12px;
    cursor: pointer;
  }

  .deadline-card.is-selected {
    border-color: var(--marker);
    background: linear-gradient(90deg, var(--marker-soft), #fff 62%);
    box-shadow: 0 8px 18px var(--marker-shadow);
  }

  .deadline-card__priority {
    position: absolute;
    top: 9px;
    right: 10px;
    border-radius: 999px;
    padding: 5px 9px;
    color: #fff;
    background: var(--marker);
    font-size: 11px;
    line-height: 1;
  }

  /* Final: cards follow the content instead of overlapping it. */
  .result-hero,
  .result-hero--fit {
    height: auto;
    min-height: 0;
  }

  .result-proof {
    align-self: auto;
    margin: 0 14px 18px;
  }

  .result-consultation__fields { gap: 8px; }
  .result-consultation__field { gap: 5px; }
  .result-consultation__form .skb-consent__item { margin-top: 9px; }
  .result-consultation__submit { margin-top: 9px; }

  #screen-spoiler .spoiler-form { gap: 6px; }
}

@media (max-width: 760px) {
  /* Keep only unselected tax answers in the compact mobile list. */
  .tax-check--placeholder { display: none; }
  .tax-reply-options { gap: 7px; }

  /* The fit percentage stays dominant; task statistics become supporting data. */
  .result-proof--tasks-only {
    min-height: 0;
    grid-template-columns: 86px 1px minmax(0, 1fr);
    align-items: center;
    border-radius: 20px;
    padding: 12px 14px;
  }

  .result-proof--tasks-only article {
    min-height: 0;
    padding: 10px 8px;
  }

  .result-proof__total strong {
    font-size: 58px;
    line-height: .82;
  }

  .result-proof__total h3 {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.05;
  }

  .result-proof__divider {
    width: 1px;
    height: calc(100% - 20px);
    margin: 10px 0;
    background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.62), rgba(255,255,255,.06));
  }

  .result-proof__bars {
    gap: 12px;
    padding: 10px 8px 10px 14px;
  }

  .result-proof__bar { gap: 7px; }
  .result-proof__bar > span { font-size: 13px; }
  .result-proof__bar > div { height: 12px; }

  .result-consultation__fields { gap: 4px; }
  .result-consultation__field { gap: 3px; }
  .result-consultation__field input { height: 46px; }
  .result-consultation__form .skb-consent__item { margin-top: 6px; }
  .result-consultation__submit { min-height: 50px; margin-top: 6px; }

  #screen-spoiler .spoiler-form { gap: 4px; }
}

/* Финальная фиксация шапки независимо от ширины контента экрана */
.app,
body:has(#screen-hero.active) .app,
body:has(#screen-task.active) .app,
body:has(#screen-feedback.active) .app,
body:has(#screen-spoiler.active) .app,
body:has(#screen-result.active) .app {
  padding-top: 18px;
}

.topbar,
body:has(#screen-feedback.active) .topbar {
  left: auto;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

@media (max-height: 700px) and (min-width: 761px) {
  .topbar,
  body:has(#screen-feedback.active) .topbar {
    padding: 8px 0;
  }
}

@media (max-width: 640px) {
  .app,
  body:has(#screen-hero.active) .app,
  body:has(#screen-task.active) .app,
  body:has(#screen-feedback.active) .app,
  body:has(#screen-spoiler.active) .app,
  body:has(#screen-result.active) .app {
    padding-top: 6px;
  }

  .topbar,
  body:has(#screen-feedback.active) .topbar {
    width: 100%;
    min-height: 72px;
    margin-left: 0;
    transform: none;
  }
}

/* Roomy desktop viewports: use the available space without changing compact laptops. */
@media (min-width: 1400px) and (min-height: 821px) {
  body:not(:has(#screen-result.active)) {
    overflow: hidden;
  }

  .task-card {
    grid-template-columns: minmax(360px, 31%) minmax(0, 1fr);
  }

  .task-card:has(.task-options--tax),
  .task-card:has(.task-options--payroll),
  .task-card:has(.task-options--deadline) {
    grid-template-columns: minmax(360px, 31%) minmax(0, 1fr);
  }

  .task-meta h2 {
    font-size: 36px;
  }

  .task-pill {
    padding: 11px 20px;
    font-size: 19px;
  }

  .task-text {
    font-size: 19px;
    line-height: 1.42;
  }

  .task-hint p {
    font-size: 16px;
  }

  .interaction-guide {
    width: min(100%, 1080px);
    min-height: 34px;
    margin-bottom: 8px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .doc-review {
    width: min(100%, 1080px);
    zoom: 0.9;
  }

  @supports (zoom: 1) {
    .task-card:has(.task-options--onec) .onec {
      zoom: 0.96;
    }
  }

  .onec-workbench {
    gap: 12px;
  }

  .tax-chat,
  .deadline-board {
    max-width: 1050px;
  }

  .task-action-hint,
  .flow-hint,
  .payroll__result p,
  .deadline-hint {
    font-size: 14px;
  }
}

@media (min-width: 1800px) and (min-height: 950px) {
  .task-card {
    grid-template-columns: minmax(390px, 30%) minmax(0, 1fr);
  }

  .task-card:has(.task-options--tax),
  .task-card:has(.task-options--payroll),
  .task-card:has(.task-options--deadline) {
    grid-template-columns: minmax(390px, 30%) minmax(0, 1fr);
  }

  .interaction-guide {
    min-height: 38px;
    font-size: 15px;
  }

  .doc-review {
    zoom: 0.96;
  }

  @supports (zoom: 1) {
    .task-card:has(.task-options--onec) .onec {
      zoom: 1;
    }
  }
}

/* Compact desktop: keep the complete task 3 action area inside one viewport. */
@media (min-width: 961px) and (max-height: 820px) {
  .task-card:has(.task-options--tax) .task-card__head {
    gap: 16px;
    padding: 20px;
  }

  .task-card:has(.task-options--tax) .task-meta {
    gap: 14px;
  }

  .task-card:has(.task-options--tax) .task-hint {
    padding: 11px 13px;
  }

  .task-card:has(.task-options--tax) .task-hint p {
    font-size: 13px;
  }

  .task-card:has(.task-options--tax) .tax-chat {
    min-height: 0;
  }

  .task-card:has(.task-options--tax) .tax-chat__bar {
    min-height: 52px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 14px;
  }

  .task-card:has(.task-options--tax) .tax-chat__avatar {
    width: 36px;
    height: 36px;
  }

  .task-card:has(.task-options--tax) .tax-chat__bar b {
    font-size: 16px;
  }

  .task-card:has(.task-options--tax) .tax-chat__body {
    gap: 7px;
    padding: 12px 14px;
  }

  .task-card:has(.task-options--tax) .tax-message {
    gap: 4px;
    padding: 8px 12px;
  }

  .task-card:has(.task-options--tax) .tax-message p {
    font-size: 13px;
    line-height: 1.25;
  }

  .task-card:has(.task-options--tax) .tax-chat__footer {
    gap: 6px;
    padding: 8px 14px 10px;
  }

  .task-card:has(.task-options--tax) .tax-compose {
    min-height: 40px;
    max-height: 68px;
    padding: 7px 12px;
  }

  .task-card:has(.task-options--tax) .tax-compose p,
  .task-card:has(.task-options--tax) .tax-check {
    font-size: 12px;
  }

  .task-card:has(.task-options--tax) .tax-send-message {
    min-height: 40px;
  }
}

/* Roomy desktops: use the free height and keep guidance comfortably readable. */
@media (min-width: 1400px) and (min-height: 821px) {
  .interaction-guide {
    min-height: 40px;
    margin-bottom: 10px;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 1.25;
  }

  .task-card:has(.task-options--doc) .doc-review {
    align-self: center;
  }

  .task-card:has(.task-options--onec) .onec-workbench {
    height: 100%;
    align-self: stretch;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: stretch;
  }

  .task-card:has(.task-options--onec) .onec {
    align-self: center;
  }

  @supports (zoom: 1) {
    .task-card:has(.task-options--onec) .onec {
      width: calc(100% / 1.06);
      zoom: 1.06;
    }
  }

  .task-card:has(.task-options--payroll) .payroll {
    height: min(100%, 560px);
    align-self: center;
  }
}

@media (min-width: 1800px) and (min-height: 950px) {
  .interaction-guide {
    min-height: 44px;
    padding-block: 11px;
    font-size: 17px;
  }

  @supports (zoom: 1) {
    .task-card:has(.task-options--onec) .onec {
      width: calc(100% / 1.14);
      zoom: 1.14;
    }
  }
}
.dev-menu[hidden] {
  display: none !important;
}