/* Экраны платформы: вход, подтверждение почты, кабинет, курс, урок, студия.
   Их разметку собирает platform.js, поэтому имена классов здесь пришли из
   рабочего кода — трогать его ради переименований смысла нет. Регистр тот же
   рабочий: волосяные линии и воздух, ни одной плашки. */

.page-section,
.account-page,
#api-lesson-page {
  width: min(var(--page), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--section-gap);
}

.account-page.page-section,
.profile-page.page-section,
.studio-page.page-section {
  padding-block: var(--s-60);
}

/* Кнопки старой разметки — те же пилюли, что и в новой системе. */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-nav);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.button--primary {
  color: var(--bone);
  background: var(--iris);
}

.button--primary:hover {
  background: #9068ff;
}

.button--outline {
  border: 1px solid var(--hair-strong);
}

.button--outline:hover {
  border-color: var(--bone);
}

.button--ghost {
  padding-inline: 0;
  color: var(--ash);
}

.button--ghost:hover {
  color: var(--bone);
}

.button--small {
  padding: 11px 18px;
  font-size: var(--text-caption);
}

.eyebrow {
  margin: 0 0 var(--s-12);
  color: var(--saffron);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-36);
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.breadcrumbs a:hover {
  color: var(--bone);
}

.section-kicker {
  margin-bottom: var(--s-24);
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.section-heading h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--tr-display);
}

.section-heading p {
  margin-top: var(--s-18);
  max-width: 52ch;
  color: var(--ash);
}

.section-heading--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-30);
  margin-bottom: var(--s-36);
}

/* Состояния загрузки и ошибки ------------------------------------------ */

.platform-loading {
  display: flex;
  align-items: center;
  gap: var(--s-18);
  padding-block: var(--s-96);
  color: var(--ash);
}

.platform-loading span {
  width: 26px;
  height: 26px;
  border: 1px solid var(--hair-strong);
  border-top-color: var(--iris);
  border-radius: 50%;
  animation: platform-spin 0.9s linear infinite;
}

@keyframes platform-spin {
  to {
    transform: rotate(1turn);
  }
}

.platform-loading p {
  margin: 0;
}

.platform-error {
  padding-block: var(--s-96);
}

.platform-error span {
  display: block;
  margin-bottom: var(--s-18);
  color: var(--saffron);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.platform-error h1 {
  max-width: 18ch;
}

.platform-error p {
  margin-top: var(--s-18);
  max-width: 48ch;
  color: var(--ash);
}

.platform-error div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-18);
  margin-top: var(--s-30);
}

/* Вход и подтверждение почты ------------------------------------------- */

.account-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  min-height: calc(100svh - var(--nav-height) - var(--s-120));
}

.auth-intro h1 {
  font-size: var(--text-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

.auth-intro > p {
  margin-top: var(--s-24);
  max-width: 42ch;
  color: var(--mist);
}

/* Три шага входа — строка из подписей, а не схема с блоками. */
.auth-signal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12);
  margin-top: var(--s-36);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.auth-signal span {
  color: var(--iris);
  font-family: var(--mono);
}

.auth-signal b {
  font-weight: var(--w-regular);
}

.auth-signal i {
  width: 26px;
  height: 1px;
  background: var(--hair-strong);
}

.auth-card {
  width: 100%;
  max-width: 460px;
}

.existing-session {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-12);
  margin-bottom: var(--s-30);
  padding-bottom: var(--s-18);
  border-bottom: 1px solid var(--hair);
  color: var(--ash);
  font-size: var(--text-small);
}

.existing-session a {
  color: var(--iris);
}

.auth-tabs {
  display: flex;
  gap: var(--s-24);
  margin-bottom: var(--s-30);
  border-bottom: 1px solid var(--hair);
}

.auth-tabs button,
.auth-tabs span {
  position: relative;
  padding: 0 0 var(--s-18);
  color: var(--ash);
  font-size: var(--text-nav);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}

.auth-tabs .is-active {
  color: var(--bone);
}

.auth-tabs .is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--iris);
}

.auth-card__heading {
  margin-bottom: var(--s-30);
}

.auth-card__heading span {
  display: block;
  margin-bottom: var(--s-12);
  color: var(--saffron);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
}

.auth-card__heading h2 {
  font-size: var(--text-h4);
  letter-spacing: var(--tr-heading);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.account-form label {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.account-form label > span {
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.account-form label > span small {
  font-weight: var(--w-light);
  text-transform: none;
  letter-spacing: 0;
}

.account-form input,
.account-form textarea {
  width: 100%;
  padding: 13px 0;
  color: var(--bone);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  font-size: var(--text-body);
  font-weight: var(--w-light);
  transition: border-color 0.3s var(--ease);
}

.account-form input::placeholder,
.account-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.account-form input:focus,
.account-form textarea:focus {
  outline: none;
  border-bottom-color: var(--iris);
}

.form-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-24);
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 72px;
}

.password-field button {
  position: absolute;
  top: 13px;
  right: 0;
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.password-field button:hover {
  color: var(--bone);
}

.form-status {
  color: var(--ash);
  font-size: var(--text-small);
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: var(--saffron);
}

.form-status.is-success {
  color: var(--verdant);
}

.account-submit {
  align-self: flex-start;
}

.account-consent {
  color: var(--ash);
  font-size: var(--text-caption);
}

.account-consent a {
  color: var(--iris);
}

.verification-panel {
  padding-top: var(--s-30);
  border-top: 1px solid var(--hair);
}

.verification-panel__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-18);
  align-items: baseline;
  margin-bottom: var(--s-24);
}

.verification-panel__number {
  color: var(--iris);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.verification-panel__head h2 {
  font-size: var(--text-h4);
}

.verification-panel__delivery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-bottom: var(--s-24);
  color: var(--ash);
  font-size: var(--text-small);
}

.verification-panel__delivery b {
  color: var(--bone);
  font-weight: var(--w-regular);
}

.verification-panel__steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  margin-bottom: var(--s-24);
}

.verification-panel__steps div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-18);
  color: var(--mist);
  font-size: var(--text-small);
}

.verification-panel__steps span {
  color: var(--iris);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.verification-panel__steps p {
  margin: 0;
}

.verification-panel__action {
  margin-bottom: var(--s-18);
}

.verify-state h2 {
  font-size: var(--text-h4);
  letter-spacing: var(--tr-heading);
}

.verify-copy {
  margin-top: var(--s-18);
  max-width: 46ch;
  color: var(--mist);
  font-size: var(--text-small);
}

/* Знак состояния проверки: круг в одну линию, цвет несёт результат. */
.verify-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--s-24);
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  font-size: var(--text-h6);
}

.verify-mark--pending span {
  width: 20px;
  height: 20px;
  border: 1px solid var(--hair-strong);
  border-top-color: var(--iris);
  border-radius: 50%;
  animation: platform-spin 0.9s linear infinite;
}

.verify-mark--success {
  color: var(--verdant);
  border-color: rgba(var(--verdant-rgb), 0.6);
}

.verify-mark--failed {
  color: var(--saffron);
  border-color: rgba(var(--saffron-rgb), 0.6);
}

.verify-resend {
  margin-top: var(--s-30);
  padding-top: var(--s-24);
  border-top: 1px solid var(--hair);
}

/* Кабинет --------------------------------------------------------------- */

.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-30);
  align-items: center;
  padding-bottom: var(--s-36);
  border-bottom: 1px solid var(--hair);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius);
  color: var(--ash);
  font-size: var(--text-h6);
  font-weight: var(--w-light);
}

.profile-hero__copy h1 {
  font-size: var(--text-h2);
}

.profile-hero__copy span {
  display: block;
  margin-top: var(--s-6);
  color: var(--ash);
  font-size: var(--text-small);
}

.profile-logout {
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.profile-logout:hover {
  color: var(--saffron);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 72px);
  padding-block: var(--s-60);
}

.profile-panel__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-18);
  align-items: baseline;
  margin-bottom: var(--s-30);
}

.profile-panel__head span {
  color: var(--iris);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.profile-panel__head h2 {
  font-size: var(--text-h6);
}

.profile-panel h3 {
  max-width: 22ch;
  font-size: var(--text-h4);
  letter-spacing: var(--tr-heading);
}

.profile-panel p {
  margin: var(--s-18) 0 var(--s-30);
  max-width: 46ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.profile-panel .button + .button {
  margin-left: var(--s-18);
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-30);
}

.profile-facts div span {
  display: block;
  margin-bottom: 6px;
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.profile-facts div b {
  font-size: var(--text-body);
  font-weight: var(--w-regular);
}

.profile-courses-section {
  padding-top: var(--s-36);
  border-top: 1px solid var(--hair);
}

/* Курсы из Content API -------------------------------------------------- */

.api-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-30);
}

.catalog-skeleton {
  height: 148px;
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.03)
  );
  background-size: 200% 100%;
  animation: catalog-shimmer 1.6s linear infinite;
}

@keyframes catalog-shimmer {
  to {
    background-position: -200% 0;
  }
}

.api-course-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding-block: var(--s-24);
  border-top: 1px solid var(--hair);
  transition: border-color 0.3s var(--ease);
}

.api-course-card:hover {
  border-top-color: var(--iris);
}

.api-course-card h3 {
  font-size: var(--text-h6);
  letter-spacing: -0.02em;
}

.api-course-card p {
  color: var(--ash);
  font-size: var(--text-small);
}

.api-course-card span {
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.course-empty-state,
.empty-copy {
  padding-block: var(--s-36);
  color: var(--ash);
  font-size: var(--text-small);
}

.api-course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  padding-bottom: var(--s-60);
}

.api-course-hero h1 {
  max-width: 16ch;
}

.api-course-hero p {
  margin-top: var(--s-24);
  max-width: 56ch;
  color: var(--mist);
}

.api-course-meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-18);
  padding-block: var(--s-12);
  border-bottom: 1px solid var(--hair);
  font-size: var(--text-small);
}

.api-course-meta div span {
  color: var(--ash);
}

.api-units {
  margin-top: var(--s-18);
}

.api-unit {
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
}

.api-unit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-12);
}

.api-unit__head span {
  color: var(--iris);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.api-unit__head h3 {
  font-size: var(--text-h6);
}

.api-lessons {
  display: flex;
  flex-direction: column;
}

.api-lesson {
  display: flex;
  align-items: baseline;
  gap: var(--s-12);
  padding-block: 10px;
  color: var(--mist);
  font-size: var(--text-small);
  transition: color 0.25s var(--ease);
}

.api-lesson:hover {
  color: var(--bone);
}

.api-lesson span {
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

/* Урок из Content API --------------------------------------------------- */

.module-detail {
  width: min(var(--page), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--s-60);
}

.module-detail__head {
  padding-bottom: var(--s-36);
  border-bottom: 1px solid var(--hair);
}

.lesson-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-30);
  align-items: end;
}

.lesson-heading h1 {
  max-width: 18ch;
}

.lesson-heading p {
  margin-top: var(--s-18);
  max-width: 56ch;
  color: var(--ash);
}

.lesson-author {
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.module-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
  padding-top: var(--s-60);
}

.module-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--s-24));
}

.module-sidebar__head {
  margin-bottom: var(--s-24);
}

.module-sidebar__head span {
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.module-sidebar__head h2 {
  margin-top: var(--s-6);
  font-size: var(--text-h6);
}

.module-sidebar__unit {
  margin-bottom: var(--s-24);
}

.module-sidebar__unit > span {
  display: block;
  margin-bottom: var(--s-6);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.module-sidebar a {
  display: block;
  padding-block: 7px;
  color: var(--ash);
  font-size: var(--text-small);
  transition: color 0.25s var(--ease);
}

.module-sidebar a:hover,
.module-sidebar a.is-active {
  color: var(--bone);
}

.api-lesson-media {
  padding-bottom: var(--s-36);
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--s-36);
}

.api-lesson-media__top {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-18);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
}

.api-lesson-media__top i {
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.api-lesson-media__body {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: var(--s-24);
  align-items: start;
}

.api-lesson-media__glyph {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  color: var(--iris);
}

.api-lesson-media__body h2 {
  font-size: var(--text-h6);
}

.api-lesson-media__body p {
  margin: var(--s-6) 0 var(--s-18);
  color: var(--ash);
  font-size: var(--text-small);
}

.api-lesson-reader__intro {
  margin-bottom: var(--s-30);
}

.api-lesson-reader__intro h2 {
  font-size: var(--text-h4);
}

.api-lesson-reader__intro span {
  display: block;
  margin-top: var(--s-6);
  color: var(--ash);
  font-size: var(--text-caption);
}

.api-lesson-reader__body {
  max-width: 72ch;
  color: var(--mist);
  white-space: pre-wrap;
}

.api-lesson-reader__empty {
  color: var(--ash);
  font-size: var(--text-small);
}

.api-lesson-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-18);
  margin-top: var(--s-60);
  padding-top: var(--s-30);
  border-top: 1px solid var(--hair);
}

.api-lesson-nav__side span {
  display: block;
  margin-bottom: 6px;
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.api-lesson-nav__side b {
  font-size: var(--text-h6);
  font-weight: var(--w-regular);
  letter-spacing: -0.02em;
}

.api-lesson-nav__side--next {
  margin-left: auto;
  text-align: right;
}

/* Студия преподавателя -------------------------------------------------- */

.studio-gate {
  padding-block: var(--s-96);
}

.studio-gate span {
  display: block;
  margin-bottom: var(--s-18);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.studio-gate p {
  margin-top: var(--s-18);
  color: var(--ash);
}

.studio-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

.studio-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--s-24));
  display: flex;
  flex-direction: column;
  gap: var(--s-36);
}

.studio-user b {
  display: block;
  font-size: var(--text-h6);
  font-weight: var(--w-regular);
}

.studio-user span {
  display: block;
  margin-top: 4px;
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.studio-sidebar__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-18);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--hair);
}

.studio-sidebar__title b {
  font-weight: var(--w-regular);
  font-size: var(--text-small);
}

.studio-sidebar__title span {
  color: var(--ash);
  font-size: var(--text-caption);
}

.studio-known-courses a,
.studio-known-courses button {
  display: block;
  padding-block: 7px;
  color: var(--ash);
  font-size: var(--text-small);
  text-align: left;
  transition: color 0.25s var(--ease);
}

.studio-known-courses a:hover {
  color: var(--bone);
}

.studio-open-form,
.studio-create-form,
.studio-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-18);
}

.studio-open-form label,
.studio-create-form label,
.studio-form label {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.studio-open-form label span,
.studio-create-form label span,
.studio-form label span {
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.studio-open-form input,
.studio-create-form input,
.studio-create-form textarea,
.studio-form input,
.studio-form textarea {
  width: 100%;
  padding: 11px 0;
  color: var(--bone);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  font-size: var(--text-small);
  font-weight: var(--w-light);
}

.studio-open-form input:focus,
.studio-create-form input:focus,
.studio-create-form textarea:focus,
.studio-form input:focus,
.studio-form textarea:focus {
  outline: none;
  border-bottom-color: var(--iris);
}

.studio-open-form button {
  align-self: flex-start;
  color: var(--iris);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.studio-create-form b {
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.studio-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  padding-bottom: var(--s-36);
  border-bottom: 1px solid var(--hair);
}

.studio-welcome h1 {
  font-size: var(--text-h2);
}

.studio-welcome p {
  margin-top: var(--s-18);
  max-width: 46ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.studio-global-status {
  padding-block: var(--s-18);
}

.studio-course-hero {
  padding-block: var(--s-36);
  border-bottom: 1px solid var(--hair);
}

.studio-units,
.studio-lessons {
  display: flex;
  flex-direction: column;
}

.studio-unit,
.studio-lesson {
  padding-block: var(--s-18);
  border-bottom: 1px solid var(--hair);
}

.studio-unit__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
}

.studio-lessons {
  padding-left: var(--s-24);
  border-left: 1px solid var(--hair);
  margin-top: var(--s-12);
}

.studio-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.studio-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-18);
  align-items: center;
}

.studio-form__actions button {
  color: var(--iris);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.studio-danger {
  color: var(--saffron) !important;
}

.studio-add-card {
  padding-block: var(--s-18);
  color: var(--ash);
  font-size: var(--text-small);
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

details[open] > summary {
  color: var(--bone);
}

.is-new {
  color: var(--verdant);
}

/* Оплата курса ---------------------------------------------------------- */

.access {
  padding-top: var(--s-36);
  border-top: 1px solid var(--hair);
}

.access__body {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  margin-top: var(--s-30);
}

.access__price b {
  display: block;
  font-size: var(--text-h2);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: var(--tr-display);
}

.access__price span {
  display: block;
  margin-top: var(--s-12);
  max-width: 24ch;
  color: var(--ash);
  font-size: var(--text-small);
}

.access__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-24);
}

.access__promo {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 220px;
}

.access__promo span {
  color: var(--ash);
  font-size: var(--text-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.access__promo input {
  width: 100%;
  padding: 11px 0;
  color: var(--bone);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  font-size: var(--text-body);
  font-weight: var(--w-light);
}

.access__promo input:focus {
  outline: none;
  border-bottom-color: var(--iris);
}

.access__form .form-status,
.access__note p {
  flex-basis: 100%;
  margin: 0;
  color: var(--ash);
  font-size: var(--text-small);
}

.access__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-18);
}

.access__paid p {
  margin-top: var(--s-12);
  color: var(--ash);
  font-size: var(--text-small);
}

.access__hint {
  color: var(--ash);
  font-size: var(--text-small);
}

.paywall__head {
  padding-bottom: var(--s-36);
}

.paywall__head h1 {
  max-width: 18ch;
}

.paywall__head p {
  margin-top: var(--s-18);
  max-width: 52ch;
  color: var(--mist);
}

.paywall .access {
  border-top: 0;
  padding-top: 0;
}

.paywall .row {
  margin-top: var(--s-36);
}

.purchase .rows__num {
  font-family: var(--mono);
  color: var(--bone);
}

/* Работа внутри урока: тест, домашняя работа, задача с кодом ------------- */

.lesson-kind {
  margin-top: var(--s-18);
}

.lesson-activity {
  margin-top: var(--s-60);
}

.activity {
  padding-top: var(--s-30);
  border-top: 1px solid var(--hair);
}

.activity + .activity {
  margin-top: var(--s-60);
}

/* Полоса-заголовок блока — тот же приём, что и у видеоматериала урока. */
.activity__top {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-24);
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
}

.activity__top i {
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.activity__head h2 {
  font-size: var(--text-h4);
}

.activity__head p {
  margin-top: var(--s-12);
  max-width: 62ch;
  color: var(--mist);
  font-size: var(--text-small);
}

.activity__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-18) var(--s-30);
  margin-top: var(--s-30);
  padding-top: var(--s-18);
  border-top: 1px solid var(--hair);
}

.activity__meta span {
  display: block;
  margin-bottom: 4px;
  color: var(--ash);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.activity__meta b {
  font-size: var(--text-small);
  font-weight: var(--w-regular);
}

.activity__body {
  margin-top: var(--s-30);
}

.activity__hint {
  color: var(--ash);
  font-size: var(--text-small);
}

.activity__actions {
  margin-top: var(--s-30);
}

/* Вопрос теста ---------------------------------------------------------- */

.quiz-list {
  display: flex;
  flex-direction: column;
}

.quiz {
  padding-block: var(--s-30);
  border-top: 1px solid var(--hair);
}

.quiz__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
  margin-bottom: var(--s-18);
}

.quiz__head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.quiz__head b {
  flex: 1;
  font-weight: var(--w-regular);
}

.quiz__head i {
  color: var(--ash);
  font-size: var(--text-caption);
  font-style: normal;
}

.quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.quiz__numeric {
  max-width: 260px;
}

/* Статус ответа: узел живёт под управлением setStatus, который переписывает
   className, поэтому оформление цепляется за родителя. */
.quiz .form-status {
  margin-top: var(--s-12);
  font-size: var(--text-caption);
}

.quiz-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-18);
  padding-bottom: var(--s-30);
  border-bottom: 1px solid var(--hair);
}

.quiz-result b {
  font-size: var(--text-h1);
  font-weight: var(--w-regular);
  line-height: 1;
  letter-spacing: var(--tr-display);
}

.quiz-result[data-passed="true"] b {
  color: var(--verdant);
}

.quiz-result[data-passed="false"] b {
  color: var(--saffron);
}

.quiz-result span {
  color: var(--ash);
  font-size: var(--text-small);
}

.quiz-answer {
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--hair);
}

.quiz-answer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
}

.quiz-answer__head span {
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.quiz-answer__head b {
  flex: 1;
  font-weight: var(--w-regular);
  font-size: var(--text-small);
}

.quiz-answer__head i {
  font-size: var(--text-caption);
  font-style: normal;
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
}

.quiz-answer[data-state="ok"] .quiz-answer__head i {
  color: var(--verdant);
}

.quiz-answer[data-state="wrong"] .quiz-answer__head i {
  color: var(--saffron);
}

.quiz-answer__line {
  margin-top: var(--s-6);
  color: var(--mist);
  font-size: var(--text-small);
}

.quiz-answer__note {
  margin-top: var(--s-6);
  padding-left: var(--s-18);
  border-left: 1px solid var(--hair-strong);
  color: var(--ash);
  font-size: var(--text-small);
}

.quiz-history {
  margin-bottom: var(--s-18);
}

.attempt {
  width: 100%;
  text-align: left;
}

/* Сдачи: домашняя работа и код ------------------------------------------ */

.work-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  max-width: 720px;
}

.work-form select.input,
.work-form input[type="file"].input {
  padding: 12px 0;
}

.work-form select.input {
  color: var(--bone);
  background: var(--void);
}

.work-form__source {
  min-height: 260px;
  font-family: var(--mono);
  font-size: var(--text-small);
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.submissions {
  margin-top: var(--s-60);
}

.submission {
  padding-block: var(--s-24);
  border-top: 1px solid var(--hair);
}

.submission__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
}

.submission__head span {
  color: var(--ash);
  font-family: var(--mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tr-nav);
}

.submission__head b {
  flex: 1;
  font-weight: var(--w-regular);
}

.submission__head i {
  color: var(--ash);
  font-size: var(--text-caption);
  font-style: normal;
}

.submission[data-tone="ok"] .submission__head b {
  color: var(--verdant);
}

.submission[data-tone="warn"] .submission__head b {
  color: var(--saffron);
}

.submission__score {
  margin-top: var(--s-12);
  color: var(--ash);
  font-size: var(--text-small);
}

.submission__comment {
  margin-top: var(--s-12);
  padding-left: var(--s-18);
  border-left: 2px solid var(--accent);
  color: var(--bone);
  font-size: var(--text-small);
}

.submission__text {
  margin-top: var(--s-12);
  max-width: 72ch;
  color: var(--mist);
  font-size: var(--text-small);
  white-space: pre-wrap;
}

.submission__link {
  margin-top: var(--s-18);
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-18);
}

.attachment {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-12);
  padding: 9px var(--s-18);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-pill);
  color: var(--mist);
  font-size: var(--text-small);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.attachment:hover {
  color: var(--bone);
  border-color: var(--bone);
}

.attachment small {
  color: var(--ash);
  font-size: var(--text-caption);
}

.attachment small.is-error {
  color: var(--saffron);
}

/* Инструменты преподавателя --------------------------------------------- */

.studio-material {
  margin-top: var(--s-24);
  padding: var(--s-24) 0 var(--s-12) var(--s-24);
  border-left: 1px solid var(--hair);
}

.studio-form--material {
  gap: var(--s-18);
  max-width: 560px;
}

.studio-form__check {
  flex-direction: row !important;
  align-items: center;
  gap: var(--s-12) !important;
}

.studio-form__check span {
  color: var(--mist) !important;
  font-size: var(--text-small) !important;
  font-weight: var(--w-light) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.studio-check {
  width: 16px;
  height: 16px;
  accent-color: var(--iris);
}

.studio-form select {
  width: 100%;
  padding: 11px 0;
  color: var(--bone);
  background: var(--void);
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  font-size: var(--text-small);
}

.studio-questions {
  margin-block: var(--s-24);
}

.studio-question {
  padding-block: var(--s-18);
  border-top: 1px solid var(--hair);
}

.studio-question__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-12);
}

.studio-question__head span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-caption);
}

.studio-question__head b {
  flex: 1;
  font-weight: var(--w-regular);
  font-size: var(--text-small);
}

.studio-question__head i {
  color: var(--ash);
  font-size: var(--text-caption);
  font-style: normal;
}

.studio-question__options {
  margin-top: var(--s-12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-question__options li {
  color: var(--ash);
  font-size: var(--text-small);
}

.studio-question__options li.is-correct {
  color: var(--verdant);
}

.studio-question__note {
  margin-top: var(--s-12);
  color: var(--ash);
  font-size: var(--text-small);
}

.studio-question-form,
.studio-queue,
.studio-attempts {
  margin-top: var(--s-30);
  padding-top: var(--s-18);
  border-top: 1px solid var(--hair);
}

@media (max-width: 1024px) {
  .account-page,
  .profile-hero,
  .profile-grid,
  .api-course-hero,
  .lesson-heading,
  .module-workspace,
  .studio-shell,
  .studio-welcome,
  .access__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-page {
    min-height: 0;
  }

  .module-sidebar,
  .studio-sidebar {
    position: static;
  }
}

@media (max-width: 760px) {
  .form-pair {
    grid-template-columns: minmax(0, 1fr);
  }

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