@charset "UTF-8";
@keyframes marquee-track {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
:root {
  --blue-700: #1c44f2;
  --blue-600: #2563eb;
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --bg-grad-start: rgba(16, 24, 64, .15);
  --bg-grad-end: rgba(121, 37, 211, .35);
  --card-radius: 44.38px;
}

.paywall {
  background: linear-gradient(180deg, #1e3a8a 0%, #6d28d9 100%) no-repeat;
  background-attachment: fixed;
  min-height: 100svh;
}
.paywall__hero {
  position: relative;
  width: 100%;
  min-height: 320px;
  height: clamp(320px, 34vw, 560px);
  max-height: 560px;
  overflow: visible;
  aspect-ratio: auto;
}
.paywall__hero-bg {
  display: block;
  width: 100%;
  height: 100%;
  inset: 0;
  position: absolute;
  object-fit: cover;
  object-position: 50% 0%;
}
.paywall__hero-inner {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: #fff;
}
.paywall__logo {
  height: 48px;
}
.paywall__title {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
  margin: 10px 0 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.paywall__subtitle {
  font-size: 18px;
  opacity: 0.92;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.paywall__license {
  display: flex;
  gap: 1.25rem;
  width: fit-content;
  border-radius: 1.75rem;
  padding: 1rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px);
}
.paywall__license-img {
  height: 56px;
}
.paywall__license--description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  color: #030305;
}
.paywall__license--title {
  font-size: clamp(1em, 2.5vw, 1.25em);
  font-weight: 700;
  line-height: 120%;
}
.paywall__license--number {
  font-size: 1em;
  font-weight: 400;
  line-height: 140%;
}
.paywall__row {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  position: relative;
  z-index: 2;
  margin-top: -96px;
  overflow: visible;
}
.paywall__row--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
.paywall__row--two {
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
}
.paywall__col {
  display: flex;
  flex-direction: column;
}
.paywall__col .tariff-card {
  max-width: 100%;
}
.paywall__col:first-child .tariff-card__duration-plate::before {
  top: 0;
  height: 50%;
}
.paywall__col:last-child .tariff-card__duration-plate::before {
  top: 50%;
  height: 50%;
}
.paywall__col.featured .tariff-card {
  box-shadow: 0 26px 52px rgba(16, 185, 129, 0.35);
}
.paywall__col.featured .tariff-card__duration-plate {
  color: #fff;
}
.paywall__col.featured .tariff-card::before {
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #00A839 0%, #00471F 100%);
}
.paywall__col.featured .tariff-card__tab-title {
  font-size: 2em;
}
.paywall__col.featured .tariff-card__body {
  background: #fff;
}
.paywall__pin {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 3;
}
.paywall__pin img {
  height: 96px;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.3));
}
@media (max-width: 1024px) {
  .paywall .tariff-card.tariff-card--featured {
    transform: none;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  }
  .paywall .tariff-card.tariff-card--featured .featured--icon {
    top: -30%;
    right: -6%;
    max-width: 80px;
    max-height: 80px;
    transform: rotate(-10deg);
  }
  .paywall__row {
    display: flex;
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .paywall__row .tariff-card.tariff-card--featured {
    transform: translateY(12px) scale(0.9);
  }
  .paywall__hero-inner {
    flex-direction: column;
    height: 70%;
  }
  .paywall__brand {
    display: flex;
    justify-content: flex-end;
  }
  .paywall .tariff-card.tariff-card--featured {
    transform: none;
    box-shadow: none;
  }
}
@media (max-width: 640px) {
  .paywall__hero {
    min-height: 60svh;
  }
  .paywall__hero-bg {
    object-fit: cover;
  }
  .paywall .tariff-card.tariff-card--featured {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
  }
  .paywall .tariff-card.tariff-card--featured .featured--icon {
    transform: rotate(-8deg);
  }
  .paywall__title {
    font-size: 28px;
  }
  .paywall__pin {
    position: static;
    margin: 16px auto;
    text-align: center;
  }
  .paywall__pin img {
    height: 72px;
  }
}
.paywall .tariff-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--card-radius);
  background: #fff;
  position: relative;
  overflow: visible;
}
.paywall .tariff-card.tariff-card--featured {
  position: relative;
  z-index: 5;
  transform: translateY(12px) scale(1.08);
  box-shadow: 0 36px 72px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.paywall .tariff-card.tariff-card--featured .tariff-card__tab-title {
  font-size: clamp(1.8em, 3vw, 2.2em);
}
.paywall .tariff-card.tariff-card--featured .tariff-card__duration-plate {
  font-size: clamp(1.7em, 2.4vw, 2em);
}
.paywall .tariff-card.tariff-card--featured .tariff-card__bullet--text {
  font-size: clamp(1.55em, 2.2vw, 1.8em);
}
.paywall .tariff-card.tariff-card--featured .tariff-card__discount {
  font-size: clamp(2.8em, 4vw, 3.2em);
}
.paywall .tariff-card.tariff-card--featured .tariff-card__price {
  font-size: clamp(1.65em, 2.6vw, 1.9em);
}
.paywall .tariff-card__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}
.paywall .tariff-card--blue .tariff-card__tab {
  background: linear-gradient(90deg, #00B1FA 0%, #0A1880 100%);
}
.paywall .tariff-card--green .tariff-card__tab {
  background: linear-gradient(90deg, #00B03B 0%, #00471F 100%);
}
.paywall .tariff-card .featured--icon {
  position: absolute;
  top: -35%;
  right: -12%;
  transform: rotate(-15deg);
  text-transform: uppercase;
  max-width: 114px;
  max-height: 114px;
}
.paywall .tariff-card .featured--icon text {
  fill: #fff;
}
.paywall .tariff-card__tab-title {
  font-size: 1.45em;
  text-align: center;
  text-transform: uppercase;
  padding: 1.5rem 35%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.paywall .tariff-card__body {
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  gap: 0.5rem;
  flex: 1 1 auto;
}
.paywall .tariff-card__duration-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: fit-content;
  font-size: 1.5em;
  font-weight: 900;
  position: relative;
  line-height: 1.2;
  z-index: 0;
  margin: 0 auto;
  padding-inline: 0.5rem;
}
.paywall .tariff-card__duration-plate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #91D8F7;
  border-radius: 4px;
}
.paywall .tariff-card__subnote {
  margin: 12px auto 0;
  text-align: center;
  font-weight: 900;
  font-size: 1.25em;
  color: #2b2b2b;
  position: relative;
}
.paywall .tariff-card__subnote-extra {
  margin: 4px auto 12px;
  text-align: center;
  font-weight: 900;
  font-size: 1.25em;
  color: #2b2b2b;
}
.paywall .tariff-card__duration-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: fit-content;
  font-size: 1.5em;
  font-weight: 900;
  position: relative;
  line-height: 1.2;
  z-index: 0;
  margin: 0 auto;
  padding-inline: 0.5rem;
}
.paywall .tariff-card__bullets {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  list-style: none;
  margin-block: 2rem 3rem;
}
.paywall .tariff-card__bullet {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  position: relative;
  color: #030305;
}
.paywall .tariff-card__bullet--text {
  font-size: 1.5em;
  line-height: 120%;
}
.paywall .tariff-card__pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 0 16px 10px 16px;
}
.paywall .tariff-card__old {
  display: flex;
  font-weight: 700;
  color: #373435;
  position: relative;
}
.paywall .tariff-card__old::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #182FDE;
  transform: rotate(-11deg);
  transform-origin: 50% 50%;
}
.paywall .tariff-card__discount {
  color: #182FDE;
  font-weight: 700;
  font-size: 2.5em;
}
.paywall .tariff-card__price {
  font-size: 1.5em;
  font-weight: 900;
  background: #182FDE;
  padding: 0.375rem 0.75rem;
  border-radius: 0.75rem;
  color: #fff;
}
.paywall .tariff-card__cta {
  padding: 0 16px;
}
.paywall .tariff-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: #0EA8F5;
  border: 0;
  color: #fff;
  text-decoration: none;
}
.paywall .tariff-card__split {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  margin: 10px 0 8px;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: 700;
  color: #FFF;
  text-align: center;
}
.paywall .tariff-card__split .tariff-card__split-note {
  opacity: 0.85;
  margin-bottom: 4px;
}
.paywall .tariff-card__split-logo {
  height: 20px;
}
.paywall .tariff-card__discount-badge {
  position: absolute;
  left: -18.5%;
  bottom: 20%;
}
.paywall .installment-card {
  display: flex;
  flex-direction: column;
  gap: clamp(2.375rem, 2.5vw, 3rem);
  margin: 16px 0 0;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #5ED06E 0%, #1FAE4D 100%);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.16);
  text-align: center;
  color: #fff;
  text-decoration: none;
  transition: filter 0.2s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .paywall .installment-card:hover {
    filter: brightness(1.03);
  }
}
.paywall .installment-card__head {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.paywall .installment-card__price-pill {
  display: inline-block;
  color: #373435;
  font-weight: 900;
  font-size: 22px;
}
.paywall .installment-card__note-pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 1.75rem;
  background: #182FDE;
  color: #FFF;
  font-family: "DrukWideCyr Bold";
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 2.4px;
}
.paywall .installment-card__hint {
  margin: 10px 0 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #eafbea;
}
.paywall .split-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
  padding: 10px 22px;
  border-radius: 16px;
  background: #0EA8F5;
  box-shadow: 0 10px 24px rgba(14, 168, 245, 0.35);
  color: #fff;
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1;
  text-decoration: none;
  border: 0;
  outline: none;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.paywall .split-button:hover {
  filter: brightness(1.04);
}
.paywall .split-button:active {
  transform: translateY(1px);
}
.paywall .split-button__logo {
  display: block;
  height: 34px;
  width: auto;
}

.coupon-wrapper {
  display: grid;
  place-items: center;
  margin-top: 3.8rem;
}
.coupon-wrapper .coupon {
  width: clamp(280px, 36vw, 360px);
  aspect-ratio: 361/359;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 16px 20px 22px;
}
.coupon-wrapper .coupon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/features/billing/paywalls/coupon-frame-2e1ed0ab024cffd434f9ac04ebf15ca956818004c899ba00f8435e1dea6430d4.svg) center/100% 100% no-repeat;
  z-index: 0;
}
@media (max-width: 768px) {
  .coupon-wrapper {
    margin-top: -3rem;
  }
}

.account-block {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(120% 120% at 50% 0%, #201f33 0%, #121120 60%, #0b0a14 100%);
  color: #fff;
}
.account-block__card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.account-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  color: #ff6b6b;
  background: rgba(227, 0, 0, 0.14);
  border: 1px solid rgba(255, 107, 107, 0.4);
}
.account-block__icon svg {
  width: 2.1rem;
  height: 2.1rem;
}
.account-block__title {
  margin: 0;
  font-family: "DrukWideCyr Bold", "Inter Medium", sans-serif;
  font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  line-height: 1.15;
}
.account-block__lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
}
.account-block__until {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.account-block__status {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}
.account-block__status strong {
  color: #fff;
}
.account-block__status--ok {
  color: #7ee081;
}
.account-block__countdown {
  margin: 0;
  font-family: "Inter Medium", sans-serif;
  font-size: 1.15rem;
  color: #fff;
}
.account-block__reason {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.account-block__reason-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.25rem;
}
.account-block__reason-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  overflow-wrap: anywhere;
}
.account-block__help {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}
.account-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

#home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
  --header-overlap: 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: fit-content;
  background-color: #121241;
}
#home #main .background, #course #main .background, #shop #main .background, #event-page #main .background, .event-page #main .background {
  display: flex;
  width: 100%;
  height: 103%;
  margin-top: -3%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1023px) {
  #home #main .background, #course #main .background, #shop #main .background, #event-page #main .background, .event-page #main .background {
    min-height: 100%;
    max-height: fit-content;
  }
}
#home #main .marquee-container, #course #main .marquee-container, #shop #main .marquee-container, #event-page #main .marquee-container, .event-page #main .marquee-container {
  width: 100svw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #2630f5;
  padding-block: 0.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
#home #main .marquee-container .marquee-track, #course #main .marquee-container .marquee-track, #shop #main .marquee-container .marquee-track, #event-page #main .marquee-container .marquee-track, .event-page #main .marquee-container .marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-track var(--marquee-duration, 16s) linear infinite;
  will-change: transform;
}
#home #main .marquee-container .marquee, #course #main .marquee-container .marquee, #shop #main .marquee-container .marquee, #event-page #main .marquee-container .marquee, .event-page #main .marquee-container .marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  flex: 0 0 auto;
}
#home #main .marquee-container .marquee__item, #course #main .marquee-container .marquee__item, #shop #main .marquee-container .marquee__item, #event-page #main .marquee-container .marquee__item, .event-page #main .marquee-container .marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  padding-right: 1rem;
}
#home #main .marquee-container .marquee .title-medium-small, #course #main .marquee-container .marquee .title-medium-small, #shop #main .marquee-container .marquee .title-medium-small, #event-page #main .marquee-container .marquee .title-medium-small, .event-page #main .marquee-container .marquee .title-medium-small {
  flex: 0 0 auto;
}
#home #main .marquee-container .marquee .dash, #course #main .marquee-container .marquee .dash, #shop #main .marquee-container .marquee .dash, #event-page #main .marquee-container .marquee .dash, .event-page #main .marquee-container .marquee .dash {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 6px;
  margin-left: 0.15rem;
  border-radius: 100px;
  background-color: #FF7A00;
}
#home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
  /* ===== астероид (декор) ===== */
}
#home #main .asteroid, #course #main .asteroid, #shop #main .asteroid, #event-page #main .asteroid, .event-page #main .asteroid {
  width: 65%;
  position: absolute;
  right: -10%;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
#home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
  /* ===== hero image: ~70% ширины, «прижимаем» справа плавно ===== */
}
#home #main .avatar-page, #home #main .page-image, #course #main .avatar-page, #course #main .page-image, #shop #main .avatar-page, #shop #main .page-image, #event-page #main .avatar-page, #event-page #main .page-image, .event-page #main .avatar-page, .event-page #main .page-image {
  width: 55%;
  min-width: 520px;
  max-width: 1400px;
  height: auto;
  aspect-ratio: 16/9;
  position: absolute;
  right: 0;
  bottom: 0;
  object-fit: contain;
  z-index: 1;
}
#home #main .page-image--main, #course #main .page-image--main, #shop #main .page-image--main, #event-page #main .page-image--main, .event-page #main .page-image--main {
  z-index: 2;
}
#home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
  /* ===== контент ===== */
}
#home #main .container, #course #main .container, #shop #main .container, #event-page #main .container, .event-page #main .container {
  display: flex;
  flex-direction: column;
  min-height: 90%;
  min-width: 0;
  height: fit-content;
  z-index: 2;
  padding-top: var(--header-overlap);
  padding-bottom: 5%;
}
#home #main .container .info-block, #course #main .container .info-block, #shop #main .container .info-block, #event-page #main .container .info-block, .event-page #main .container .info-block {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-block: 5% 15%;
}
#home #main .container .info-block .title-large, #course #main .container .info-block .title-large, #shop #main .container .info-block .title-large, #event-page #main .container .info-block .title-large, .event-page #main .container .info-block .title-large {
  max-width: 75%;
}
#home #main .container .info-block .text-medium, #course #main .container .info-block .text-medium, #shop #main .container .info-block .text-medium, #event-page #main .container .info-block .text-medium, .event-page #main .container .info-block .text-medium {
  max-width: 45%;
}
#home #main .container .info-block .categories, #course #main .container .info-block .categories, #shop #main .container .info-block .categories, #event-page #main .container .info-block .categories, .event-page #main .container .info-block .categories {
  display: flex;
  gap: 1rem;
}
#home #main .container .info-block .categories__tag, #course #main .container .info-block .categories__tag, #shop #main .container .info-block .categories__tag, #event-page #main .container .info-block .categories__tag, .event-page #main .container .info-block .categories__tag {
  color: #030305;
  padding: 0.4rem 1rem;
  background-color: #fff;
  border-radius: 100px;
  font-weight: 700;
}
#home #main .container .info-block .page-description, #course #main .container .info-block .page-description, #shop #main .container .info-block .page-description, #event-page #main .container .info-block .page-description, .event-page #main .container .info-block .page-description {
  max-width: 550px;
}
#home #main .container .info-block .actions, #course #main .container .info-block .actions, #shop #main .container .info-block .actions, #event-page #main .container .info-block .actions, .event-page #main .container .info-block .actions {
  display: flex;
  gap: 1rem;
}
#home #main .container .action-user-request--mob, #course #main .container .action-user-request--mob, #shop #main .container .action-user-request--mob, #event-page #main .container .action-user-request--mob, .event-page #main .container .action-user-request--mob {
  display: none;
  margin-top: auto;
  width: 100%;
}
#home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
  /* ===== адаптивы ===== */
}
@media (max-width: 1440px) {
  #home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
    aspect-ratio: initial;
    min-height: 765px;
  }
  #home #main .avatar-page, #home #main .page-image, #course #main .avatar-page, #course #main .page-image, #shop #main .avatar-page, #shop #main .page-image, #event-page #main .avatar-page, #event-page #main .page-image, .event-page #main .avatar-page, .event-page #main .page-image {
    right: clamp(0px, 7vw, 96px);
  }
  #home #main .asteroid, #course #main .asteroid, #shop #main .asteroid, #event-page #main .asteroid, .event-page #main .asteroid {
    right: -15%;
  }
}
@media (max-width: 1280px) {
  #home #main .avatar-page, #home #main .page-image, #course #main .avatar-page, #course #main .page-image, #shop #main .avatar-page, #shop #main .page-image, #event-page #main .avatar-page, #event-page #main .page-image, .event-page #main .avatar-page, .event-page #main .page-image {
    width: 68%;
    min-width: 480px;
    right: clamp(0px, 6vw, 80px);
  }
}
@media (max-width: 1023px) {
  #home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
    --header-overlap: 28px;
  }
  #home #main .avatar-page, #home #main .page-image, #course #main .avatar-page, #course #main .page-image, #shop #main .avatar-page, #shop #main .page-image, #event-page #main .avatar-page, #event-page #main .page-image, .event-page #main .avatar-page, .event-page #main .page-image {
    width: 66%;
    min-width: 420px;
    right: clamp(0px, 4vw, 48px);
    bottom: 5%;
  }
  #home #main .container .info-block, #course #main .container .info-block, #shop #main .container .info-block, #event-page #main .container .info-block, .event-page #main .container .info-block {
    gap: 2.5rem;
  }
  #home #main .container .info-block .title-large, #course #main .container .info-block .title-large, #shop #main .container .info-block .title-large, #event-page #main .container .info-block .title-large, .event-page #main .container .info-block .title-large {
    max-width: 80%;
  }
  #home #main .container .info-block .text-medium, #course #main .container .info-block .text-medium, #shop #main .container .info-block .text-medium, #event-page #main .container .info-block .text-medium, .event-page #main .container .info-block .text-medium {
    max-width: 58%;
  }
  #home #main .asteroid, #course #main .asteroid, #shop #main .asteroid, #event-page #main .asteroid, .event-page #main .asteroid {
    width: 100%;
    right: -45%;
  }
}
@media (max-width: 900px) {
  #home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
    min-height: 620px;
  }
  #home #main .avatar-page, #home #main .page-image, #course #main .avatar-page, #course #main .page-image, #shop #main .avatar-page, #shop #main .page-image, #event-page #main .avatar-page, #event-page #main .page-image, .event-page #main .avatar-page, .event-page #main .page-image {
    width: 74%;
    min-width: 380px;
    right: clamp(-48px, -6vw, -12px);
    bottom: 0;
  }
  #home #main .container .info-block, #course #main .container .info-block, #shop #main .container .info-block, #event-page #main .container .info-block, .event-page #main .container .info-block {
    gap: 2rem;
    margin-block: 4% 10%;
  }
  #home #main .container .info-block .title-large, #course #main .container .info-block .title-large, #shop #main .container .info-block .title-large, #event-page #main .container .info-block .title-large, .event-page #main .container .info-block .title-large {
    max-width: 88%;
  }
  #home #main .container .info-block .text-medium, #course #main .container .info-block .text-medium, #shop #main .container .info-block .text-medium, #event-page #main .container .info-block .text-medium, .event-page #main .container .info-block .text-medium {
    max-width: 64%;
  }
}
@media (max-width: 769px) {
  #home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
    min-height: 590px;
  }
  #home #main .avatar-page, #home #main .page-image, #course #main .avatar-page, #course #main .page-image, #shop #main .avatar-page, #shop #main .page-image, #event-page #main .avatar-page, #event-page #main .page-image, .event-page #main .avatar-page, .event-page #main .page-image {
    width: 84%;
    min-width: 320px;
    right: clamp(-56px, -10vw, -16px);
    bottom: 0;
  }
  #home #main .container .info-block, #course #main .container .info-block, #shop #main .container .info-block, #event-page #main .container .info-block, .event-page #main .container .info-block {
    gap: 1.75rem;
  }
  #home #main .container .info-block .title-large,
  #home #main .container .info-block .text-medium,
  #home #main .container .info-block .page-description, #course #main .container .info-block .title-large,
  #course #main .container .info-block .text-medium,
  #course #main .container .info-block .page-description, #shop #main .container .info-block .title-large,
  #shop #main .container .info-block .text-medium,
  #shop #main .container .info-block .page-description, #event-page #main .container .info-block .title-large,
  #event-page #main .container .info-block .text-medium,
  #event-page #main .container .info-block .page-description, .event-page #main .container .info-block .title-large,
  .event-page #main .container .info-block .text-medium,
  .event-page #main .container .info-block .page-description {
    max-width: 100%;
  }
  #home #main .container .info-block .categories, #course #main .container .info-block .categories, #shop #main .container .info-block .categories, #event-page #main .container .info-block .categories, .event-page #main .container .info-block .categories {
    flex-wrap: wrap;
  }
  #home #main .container .page-description, #course #main .container .page-description, #shop #main .container .page-description, #event-page #main .container .page-description, .event-page #main .container .page-description {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  #home #main .container .actions--desktop-only, #course #main .container .actions--desktop-only, #shop #main .container .actions--desktop-only, #event-page #main .container .actions--desktop-only, .event-page #main .container .actions--desktop-only {
    display: none !important;
  }
  #home #main .container .action-user-request--mob, #course #main .container .action-user-request--mob, #shop #main .container .action-user-request--mob, #event-page #main .container .action-user-request--mob, .event-page #main .container .action-user-request--mob {
    display: flex;
    margin-top: auto;
    width: 100%;
  }
}
@media (max-width: 580px) {
  #home #main, #course #main, #shop #main, #event-page #main, .event-page #main {
    height: auto;
    min-height: clamp(42rem, 100svh, 52rem);
  }
  #home #main .page-image, #course #main .page-image, #shop #main .page-image, #event-page #main .page-image, .event-page #main .page-image {
    width: clamp(21rem, 90vw, 29rem);
    min-width: 0;
    right: clamp(-80px, -16vw, -20px);
    bottom: 0;
  }
  #home #main .avatar-page, #course #main .avatar-page, #shop #main .avatar-page, #event-page #main .avatar-page, .event-page #main .avatar-page {
    width: clamp(22rem, 92vw, 30rem);
    min-width: 0;
    height: auto;
    bottom: 0;
    right: clamp(-64px, -14vw, -16px);
  }
  #home #main .asteroid, #course #main .asteroid, #shop #main .asteroid, #event-page #main .asteroid, .event-page #main .asteroid {
    width: 550px;
    height: 60%;
    right: -200px;
  }
  #home #main .container, #course #main .container, #shop #main .container, #event-page #main .container, .event-page #main .container {
    padding-bottom: 3%;
    height: auto;
  }
}
@media (max-width: 420px) {
  #home #main .page-image,
  #home #main .avatar-page, #course #main .page-image,
  #course #main .avatar-page, #shop #main .page-image,
  #shop #main .avatar-page, #event-page #main .page-image,
  #event-page #main .avatar-page, .event-page #main .page-image,
  .event-page #main .avatar-page {
    width: 94vw;
    right: -18vw;
  }
}
@media (max-width: 767px) {
  #home #main .container .action-user-request--mob, #course #main .container .action-user-request--mob, #shop #main .container .action-user-request--mob, #event-page #main .container .action-user-request--mob, .event-page #main .container .action-user-request--mob {
    border: 1px solid #2630f5;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

@media (max-width: 767px) {
  #home #main, #course #main {
    min-height: calc(100svh - 104px);
  }
  #home #main .marquee-container, #course #main .marquee-container {
    bottom: -1px;
    padding-block: 0.42rem;
  }
}
@media (max-width: 580px) {
  #home #main, #course #main {
    min-height: calc(100svh - 86px);
  }
  #home #main .marquee-container, #course #main .marquee-container {
    bottom: -1px;
    padding-block: 0.38rem;
  }
}

@media (max-width: 767px) {
  #home #main .page-image {
    width: 90%;
    min-width: 400px;
    right: -9%;
    bottom: 34px;
  }
  #home #main .container {
    min-height: 100%;
    padding-bottom: 0;
  }
  #home #main .container .info-block {
    margin-block: 4% 2rem;
    gap: 2.1rem;
  }
  #home #main .container .info-block .page-description {
    max-width: 82%;
  }
  #home #main .container .action-user-request--mob {
    position: relative;
    z-index: 3;
    margin-bottom: 46px;
  }
}
@media (max-width: 580px) {
  #home #main .page-image {
    width: 108%;
    min-width: 0;
    right: -16%;
    bottom: 18px;
  }
  #home #main .container {
    height: calc(100% - 2rem);
  }
  #home #main .container .info-block {
    gap: 1.7rem;
  }
  #home #main .container .info-block .page-description {
    max-width: 100%;
  }
  #home #main .container .action-user-request--mob {
    margin-bottom: 44px;
  }
}

#thank-you {
  --header-overlap: 4%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: fit-content;
  background-color: #121241;
}
#thank-you .background {
  display: flex;
  width: 100%;
  height: 103%;
  margin-top: -3%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1023px) {
  #thank-you .background {
    min-height: 100%;
    max-height: fit-content;
  }
}
#thank-you .marquee-container {
  width: 100svw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #2630f5;
  padding-block: 0.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
#thank-you .marquee-container .marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee-track var(--marquee-duration, 16s) linear infinite;
  will-change: transform;
}
#thank-you .marquee-container .marquee {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  flex: 0 0 auto;
}
#thank-you .marquee-container .marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  padding-right: 1rem;
}
#thank-you .marquee-container .marquee .title-medium-small {
  flex: 0 0 auto;
}
#thank-you .marquee-container .marquee .dash {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 6px;
  margin-left: 0.15rem;
  border-radius: 100px;
  background-color: #FF7A00;
}
#thank-you {
  /* ===== астероид (декор) ===== */
}
#thank-you .asteroid {
  width: 65%;
  position: absolute;
  right: -10%;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
#thank-you {
  /* ===== hero image: ~70% ширины, «прижимаем» справа плавно ===== */
}
#thank-you .avatar-page, #thank-you .page-image {
  width: 55%;
  min-width: 520px;
  max-width: 1400px;
  height: auto;
  aspect-ratio: 16/9;
  position: absolute;
  right: 0;
  bottom: 0;
  object-fit: contain;
  z-index: 1;
}
#thank-you .page-image--main {
  z-index: 2;
}
#thank-you {
  /* ===== контент ===== */
}
#thank-you .container {
  display: flex;
  flex-direction: column;
  min-height: 90%;
  min-width: 0;
  height: fit-content;
  z-index: 2;
  padding-top: var(--header-overlap);
  padding-bottom: 5%;
}
#thank-you .container .info-block {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-block: 5% 15%;
}
#thank-you .container .info-block .title-large {
  max-width: 75%;
}
#thank-you .container .info-block .text-medium {
  max-width: 45%;
}
#thank-you .container .info-block .categories {
  display: flex;
  gap: 1rem;
}
#thank-you .container .info-block .categories__tag {
  color: #030305;
  padding: 0.4rem 1rem;
  background-color: #fff;
  border-radius: 100px;
  font-weight: 700;
}
#thank-you .container .info-block .page-description {
  max-width: 550px;
}
#thank-you .container .info-block .actions {
  display: flex;
  gap: 1rem;
}
#thank-you .container .action-user-request--mob {
  display: none;
  margin-top: auto;
  width: 100%;
}
#thank-you {
  /* ===== адаптивы ===== */
}
@media (max-width: 1440px) {
  #thank-you {
    aspect-ratio: initial;
    min-height: 765px;
  }
  #thank-you .avatar-page, #thank-you .page-image {
    right: clamp(0px, 7vw, 96px);
  }
  #thank-you .asteroid {
    right: -15%;
  }
}
@media (max-width: 1280px) {
  #thank-you .avatar-page, #thank-you .page-image {
    width: 68%;
    min-width: 480px;
    right: clamp(0px, 6vw, 80px);
  }
}
@media (max-width: 1023px) {
  #thank-you {
    --header-overlap: 28px;
  }
  #thank-you .avatar-page, #thank-you .page-image {
    width: 66%;
    min-width: 420px;
    right: clamp(0px, 4vw, 48px);
    bottom: 5%;
  }
  #thank-you .container .info-block {
    gap: 2.5rem;
  }
  #thank-you .container .info-block .title-large {
    max-width: 80%;
  }
  #thank-you .container .info-block .text-medium {
    max-width: 58%;
  }
  #thank-you .asteroid {
    width: 100%;
    right: -45%;
  }
}
@media (max-width: 900px) {
  #thank-you {
    min-height: 620px;
  }
  #thank-you .avatar-page, #thank-you .page-image {
    width: 74%;
    min-width: 380px;
    right: clamp(-48px, -6vw, -12px);
    bottom: 0;
  }
  #thank-you .container .info-block {
    gap: 2rem;
    margin-block: 4% 10%;
  }
  #thank-you .container .info-block .title-large {
    max-width: 88%;
  }
  #thank-you .container .info-block .text-medium {
    max-width: 64%;
  }
}
@media (max-width: 769px) {
  #thank-you {
    min-height: 590px;
  }
  #thank-you .avatar-page, #thank-you .page-image {
    width: 84%;
    min-width: 320px;
    right: clamp(-56px, -10vw, -16px);
    bottom: 0;
  }
  #thank-you .container .info-block {
    gap: 1.75rem;
  }
  #thank-you .container .info-block .title-large,
  #thank-you .container .info-block .text-medium,
  #thank-you .container .info-block .page-description {
    max-width: 100%;
  }
  #thank-you .container .info-block .categories {
    flex-wrap: wrap;
  }
  #thank-you .container .page-description {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  #thank-you .container .actions--desktop-only {
    display: none !important;
  }
  #thank-you .container .action-user-request--mob {
    display: flex;
    margin-top: auto;
    width: 100%;
  }
}
@media (max-width: 580px) {
  #thank-you {
    height: auto;
    min-height: clamp(42rem, 100svh, 52rem);
  }
  #thank-you .page-image {
    width: clamp(21rem, 90vw, 29rem);
    min-width: 0;
    right: clamp(-80px, -16vw, -20px);
    bottom: 0;
  }
  #thank-you .avatar-page {
    width: clamp(22rem, 92vw, 30rem);
    min-width: 0;
    height: auto;
    bottom: 0;
    right: clamp(-64px, -14vw, -16px);
  }
  #thank-you .asteroid {
    width: 550px;
    height: 60%;
    right: -200px;
  }
  #thank-you .container {
    padding-bottom: 3%;
    height: auto;
  }
}
@media (max-width: 420px) {
  #thank-you .page-image,
  #thank-you .avatar-page {
    width: 94vw;
    right: -18vw;
  }
}

#home {
  position: relative;
  z-index: 0;
  background-color: #121241;
}
#home > * {
  position: relative;
  z-index: 1;
}
#home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/assets/shared/backgrounds/home-pattern-760729c8013b6fe183981a01c6b395d6bb7a12bdd4e60777922dfd61935b2a4b.webp);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}
#home .achievements {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
#home .achievements__number {
  display: flex;
  gap: 1rem;
}
#home .achievements__stats {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}
#home .achievements__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  width: 100%;
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: #080e72;
  border: 1px solid #fff;
  border-radius: 100px;
  padding: 0.75rem;
  overflow: hidden;
}
#home .achievements__stat .plus {
  color: #FF7A00;
}
#home .achievements__stat-ellipse {
  position: absolute;
  top: -250%;
  right: -50%;
}
#home .achievements__stat:first-child {
  border: 0.5rem solid #9AFA34;
}
#home .achievements__stat:nth-child(2) {
  border: 0.5rem solid #2DC1FD;
}
#home .achievements__stat:last-child {
  border: 0.5rem solid #FB4343;
}
#home .achievements__label {
  white-space: nowrap;
}
#home .learning {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
#home .learning .title-large {
  align-items: center;
  justify-content: center;
  text-align: center;
}
#home .learning__content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
#home .learning__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  padding: 2rem;
  flex: 0 1 33%;
  background-color: #2d1c99;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#home .learning__card:nth-child(1) {
  background-image: url(/assets/features/landing/home_page/learning/bg_1-2f8c6a08a5d6a3ec8887ef0583ade0133669b6c82f078599790c64d9cc559bc3.webp);
}
#home .learning__card:nth-child(2) {
  background-image: url(/assets/features/landing/home_page/learning/bg_2-2611c57149a9dbf04b1e4955c2ef6ef27855bd7bc91b26d2bcb44692d3686504.webp);
}
#home .learning__card:nth-child(3) {
  background-image: url(/assets/features/landing/home_page/learning/bg_3-4eb0f9f6374510b2ca0bbab72b21d4f47a55bc8f02b828b8722df07169ed64e3.webp);
}
#home .learning__card--image {
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translate3d(-50%, var(--translate-y, 0), 0) scale(var(--scale, 1));
  transition: transform 0.3s ease-out;
  z-index: 1;
}
#home .learning__description {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 92%;
  text-align: center;
  font-size: clamp(0.875rem, 1.35vw, 1.5rem);
  line-height: 140%;
  letter-spacing: 0.72px;
}
#home .learning__card--animation {
  padding-top: 1.5rem;
  padding-bottom: clamp(14rem, 28vw, 18rem);
}
#home .learning__card--animation .learning__description {
  max-width: 88%;
}
#home .learning__card--animation .learning__card--image {
  bottom: -2%;
  width: min(78%, 320px);
}
#home .learning__card:nth-child(1), #home .learning__card:nth-child(3) {
  aspect-ratio: 1/1;
}
#home .learning__card:nth-child(2) {
  aspect-ratio: 1/1.3;
}
#home .learning .btn-app {
  margin-top: 2rem;
}
#home .why-love, #home .talents {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
#home .why-love__title, #home .talents__title {
  align-items: center;
  justify-content: flex-start;
}
#home .why-love__content, #home .talents__content {
  display: grid;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
#home .why-love__card, #home .talents__card {
  display: grid;
  gap: 1rem;
  border: 1px solid #fff;
  border-radius: 24px;
  overflow: hidden;
  padding: 1.5rem;
}
#home .why-love__card .number__block, #home .talents__card .number__block {
  color: #FF7A00;
}
#home .why-love__card-title, #home .talents__card-title {
  gap: 1rem;
}
#home .why-love {
  position: relative;
}
#home .why-love__content {
  grid-template: repeat(3, auto)/repeat(6, 1fr);
  position: relative;
  z-index: 1;
}
#home .why-love__card {
  display: grid;
  gap: 1rem;
  border: 1px solid #fff;
  border-radius: 24px;
  overflow: hidden;
  padding: 1.5rem;
  background: rgba(37, 37, 37, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s ease-out;
  height: fit-content;
}
#home .why-love__card:nth-child(1) {
  grid-area: 1/1/3/3;
  background-color: #fff;
  height: 100%;
}
#home .why-love__card:nth-child(1) .why-love__card-title {
  color: #030305;
}
#home .why-love__card:nth-child(1) .why-love__description {
  color: #030305;
}
#home .why-love__card:nth-child(1) .why-love__image-wrapper {
  height: fit-content;
  border-radius: 1rem;
  overflow: hidden;
  margin-top: auto;
}
#home .why-love__card:nth-child(1) .why-love__image-wrapper img {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}
#home .why-love__card:nth-child(2) {
  grid-area: 1/3/2/5;
}
#home .why-love__card:nth-child(3) {
  grid-area: 1/5/2/7;
}
#home .why-love__card:nth-child(4) {
  grid-template: repeat(2, auto)/repeat(3, 1fr);
  grid-area: 2/3/3/7;
}
#home .why-love__card:nth-child(4) .why-love__card-title {
  grid-area: 1/1/2/3;
}
#home .why-love__card:nth-child(4) .why-love__description {
  grid-area: 2/1/3/3;
  padding-right: 1rem;
}
#home .why-love__card:nth-child(4) .why-love__image-wrapper {
  grid-area: 1/3/3/4;
  display: flex;
  border-radius: 24px;
  background-color: #2d1c99;
  padding: 2rem 0.5rem 0 0;
  position: relative;
  overflow: hidden;
}
#home .why-love__card:nth-child(4) .why-love__image-wrapper img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
#home .why-love__card:nth-child(4) .why-love__image-wrapper .why-love__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#home .why-love__card:nth-child(5) {
  grid-area: 3/1/4/span 3;
}
#home .why-love__card:nth-child(6) {
  grid-area: 3/4/4/span 3;
}
#home .why-love__card-title {
  display: flex;
  gap: 1rem;
}
#home .talents {
  position: relative;
}
#home .talents__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#home .talents__content {
  display: grid;
  grid-template: repeat(3, auto)/repeat(2, 1fr);
  gap: 1rem;
}
#home .talents__card {
  grid-template: repeat(2, auto)/repeat(3, 1fr);
  gap: 0;
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 0 1.5rem 1.5rem 1.5rem;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s ease-out;
}
#home .talents__card .talents__card-title {
  max-width: 70%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
#home .talents__card .talents__description {
  padding-right: 1rem;
}
#home .talents__card .talents__image-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
#home .talents__card .talents__image-wrapper .background-image {
  width: 100%;
  margin-top: auto;
}
#home .talents__card .talents__image-wrapper .animate-image {
  position: absolute;
  transform: translate3d(0, var(--translate-y, 0), 0) scale(var(--scale, 1));
}
#home .talents__card:nth-child(1) {
  grid-area: 1/1/2/3;
  grid-template: repeat(2, auto)/repeat(2, 1fr);
}
#home .talents__card:nth-child(1) .talents__card-title {
  grid-area: 1/1/2/2;
}
#home .talents__card:nth-child(1) .talents__description {
  grid-area: 2/1/3/2;
  max-width: 90%;
}
#home .talents__card:nth-child(1) .talents__image-wrapper {
  grid-area: 1/2/3/3;
  margin-top: auto;
}
#home .talents__card:nth-child(1) .talents__image-wrapper .background-image {
  height: 80%;
}
#home .talents__card:nth-child(1) .talents__image-wrapper .animate-image {
  top: -5%;
  left: -5%;
}
#home .talents__card:nth-child(2) {
  grid-area: 2/1/3/2;
}
#home .talents__card:nth-child(2) .talents__image-wrapper .animate-image {
  top: -7%;
}
#home .talents__card:nth-child(3) {
  grid-area: 2/2/3/3;
}
#home .talents__card:nth-child(3) .talents__image-wrapper {
  padding-top: 20%;
}
#home .talents__card:nth-child(3) .talents__image-wrapper .animate-image {
  top: 30%;
  left: 20%;
  transform: translate3d(-50%, 0, 0);
}
#home .talents__card:nth-child(2), #home .talents__card:nth-child(3) {
  grid-template: repeat(3, auto)/repeat(1, 1fr);
}
#home .talents__card:nth-child(4) {
  grid-area: 3/1/4/3;
  grid-template: repeat(2, auto)/repeat(2, 1fr);
}
#home .talents__card:nth-child(4) .talents__image-wrapper {
  grid-area: 1/1/3/2;
  padding-right: 2rem;
}
#home .talents__card:nth-child(4) .talents__image-wrapper .background-image {
  height: 80%;
}
#home .talents__card:nth-child(4) .talents__image-wrapper .animate-image {
  right: 10%;
  top: 10%;
}
#home .courses {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  position: relative;
  z-index: 10;
}
#home .courses__filters {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
#home .courses__selector {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
#home .courses__selector--mobile {
  display: none;
}
#home .courses__selector-title {
  flex: 1 1 auto;
  max-width: 20%;
}
#home .courses__selector-ages {
  display: flex;
  flex: 0 1 auto;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 100px;
  overflow: hidden;
}
#home .courses__selector-ages .age {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 1 auto;
  width: 100%;
  padding: 1rem 2rem;
  border-right: 1px solid #fff;
  font-family: "Inter Medium";
  font-size: 1.5em;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  color: #fff;
  background: rgba(17, 17, 17, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
#home .courses__selector-ages .age.is-empty {
  opacity: 0.55;
  cursor: pointer;
}
#home .courses__selector-ages .age.is-empty:hover {
  opacity: 0.85;
}
#home .courses__selector-ages .age:nth-last-child(1) {
  border: 0;
}
#home .courses__selector-ages .age__active {
  background-color: #fff;
  color: #030305;
  opacity: 1;
}
#home .courses__selector-tags {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  gap: 0.75rem;
}
#home .courses__selector-tags .tag {
  padding: 0.5rem 2rem;
  border-radius: 100px;
  font-family: "Inter Medium";
  font-size: 1.5em;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  color: #fff;
  background: rgba(17, 17, 17, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 4px solid var(--chip-color, #7F29FA);
}
#home .courses__selector-tags .tag.is-empty {
  opacity: 0.55;
  cursor: pointer;
}
#home .courses__selector-tags .tag.is-empty:hover {
  opacity: 0.85;
}
#home .courses__selector-tags .tag__active {
  color: #030305;
  background-color: #fff;
  border-color: #fff;
  opacity: 1;
}
#home .courses .course-groups {
  flex: 0 1 auto;
  width: 100%;
}
#home .courses #home_courses_cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#home .tests {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 3.75rem);
}
#home .tests__title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#home .faq {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  position: relative;
  z-index: 3;
}
#home .faq__question {
  border: 0;
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
}
@media (max-width: 1399px) {
  #home .learning__card--image {
    width: 80%;
  }
}
@media (max-width: 1199px) {
  #home .talents__card:nth-child(1) .animate-image, #home .talents__card:nth-child(2) .animate-image {
    width: 100%;
  }
  #home .talents__card:nth-child(3) .animate-image, #home .talents__card:nth-child(4) .animate-image {
    width: 50%;
  }
}
@media (max-width: 1023px) {
  #home .achievements__stats {
    flex-direction: column;
    gap: 1rem;
  }
  #home .achievements__stat {
    gap: 0.5rem;
    padding: 1rem;
  }
  #home .why-love__card:nth-child(1) .why-love__card-title {
    width: 73%;
  }
  #home .why-love__card:nth-child(1) .why-love__description {
    width: 73%;
  }
  #home .courses__steps {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: space-between;
  }
  #home .courses__step {
    flex: 0 1 48%;
  }
  #home .courses__selector-ages .age {
    padding: 1rem 2.5rem;
  }
  #home .faq {
    flex-direction: column;
    gap: 2rem;
  }
}
@media (max-width: 991px) {
  #home .learning__content {
    flex-direction: column;
  }
  #home .learning__card--image {
    width: 50%;
  }
  #home .learning__card:nth-child(1), #home .learning__card:nth-child(3) {
    aspect-ratio: 1/0.6;
  }
  #home .learning__card:nth-child(2) {
    aspect-ratio: 1/0.8;
  }
  #home .learning__card--animation {
    padding-bottom: 13rem;
  }
  #home .learning__card--animation .learning__card--image {
    width: min(56%, 280px);
  }
  #home .why-love__content {
    display: flex;
    flex-direction: column;
  }
  #home .why-love__card {
    padding: 1rem;
  }
  #home .why-love__card:nth-child(1) .why-love__image-wrapper {
    aspect-ratio: 1/0.4;
  }
  #home .talents__card:nth-child(4) .talents__image-wrapper .background-image {
    height: 70%;
  }
  #home .talents__card:nth-child(4) .talents__image-wrapper .animate-image {
    top: initial;
    bottom: -10%;
  }
}
@media (max-width: 769px) {
  #home::before {
    background-size: auto auto;
  }
  #home .courses__selector {
    display: none;
  }
  #home .courses__selector--mobile {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  #home .courses__selector--mobile > * {
    flex: 1 1 260px;
    min-width: 220px;
  }
  #home .why-love__card {
    display: flex;
    flex-direction: column;
  }
  #home .why-love__card:nth-child(4) .why-love__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 150px;
  }
  #home .why-love__card:nth-child(4) .why-love__image-wrapper img {
    width: initial;
    height: initial;
    bottom: -44%;
  }
  #home .talents__content {
    display: flex;
    flex-direction: column;
  }
  #home .talents__card {
    display: flex;
    flex-direction: column;
  }
  #home .talents__card:nth-child(1) .talents__image-wrapper .animate-image, #home .talents__card:nth-child(2) .talents__image-wrapper .animate-image {
    width: 65%;
    top: initial;
    bottom: -50%;
  }
  #home .talents__card:nth-child(4) .talents__image-wrapper {
    padding-right: 0;
  }
  #home .talents__image-wrapper {
    padding-top: 20%;
  }
  #home .courses .asteroid {
    display: none;
  }
  #home .courses__selector {
    flex-direction: column;
    gap: 2rem;
  }
  #home .courses__selector-title {
    max-width: 100%;
  }
  #home .courses__selector-ages {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: space-between;
  }
  #home .courses__selector-ages .age {
    flex: 0 1 auto;
    padding: 1rem 2.5rem;
  }
  #home .user-request-trial {
    margin-top: 4rem;
  }
  #home .user-request-trial .asteroid {
    width: 100%;
    height: 150%;
    top: 0;
    left: 30%;
  }
}
@media (max-width: 575px) {
  #home .courses__selector .course-groups .course-group__cards {
    gap: 0.5rem;
  }
}
@media (max-width: 480px) {
  #home .learning__content {
    flex-direction: column;
  }
  #home .learning__card:nth-child(1), #home .learning__card:nth-child(3) {
    aspect-ratio: 1/0.7;
  }
  #home .learning__card:nth-child(2) {
    aspect-ratio: 1/0.9;
  }
}

#home.online #main .marquee-container {
  background-color: #FF7A00;
}
#home.online .courses .course-groups .course-group .course-card-skills {
  background-color: #FF7A00;
}
@media (hover: hover) and (pointer: fine) {
  #home.online .courses .course-groups .course-group .course-card:hover {
    border-color: #FF7A00;
  }
  #home.online .courses .course-groups .course-group .course-card:hover .ellipse {
    opacity: 1;
  }
  #home.online .courses .course-groups .course-group .course-card:hover .course-group__card-info {
    border-top-color: #FF7A00;
    background-color: rgba(255, 122, 0, 0.2);
  }
}
@media (hover: hover) and (pointer: fine) {
  #home.online .faq__question:not(.active):hover {
    background-color: rgba(255, 122, 0, 0.2);
  }
}
#home.online .faq__tool {
  border-color: #FF7A00;
}
#home.online .faq__tool:before {
  border-color: #FF7A00;
}

.reveal-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
#course {
  overflow: hidden;
  position: relative;
  z-index: 0;
  background-color: #121241;
}
#course > * {
  position: relative;
  z-index: 1;
}
#course::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(/assets/shared/backgrounds/home-pattern-760729c8013b6fe183981a01c6b395d6bb7a12bdd4e60777922dfd61935b2a4b.webp);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}
#course #main .container {
  gap: 1.25rem;
}
#course #main .container .course-hero__header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: min(100%, 36rem);
  position: relative;
  z-index: 2;
}
#course #main .container .course-hero__header .info-block {
  gap: 2rem;
  max-width: 100%;
}
#course #main .container .course-hero__header .info-block .title-large,
#course #main .container .course-hero__header .info-block .page-description,
#course #main .container .course-hero__header .info-block .categories {
  max-width: 100%;
}
#course #main .container .course-hero__header .info-block .categories {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}
#course #main .container .course-hero__header .info-block .categories__tag {
  box-shadow: 0 10px 24px rgba(3, 3, 5, 0.18);
}
#course #main .container .btn--preview {
  position: absolute;
  top: 40%;
  right: 10%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.875rem 1.375rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
#course #main .container .btn--preview img {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
}
#course #main .container .page-image--landscape {
  width: clamp(32rem, 48vw, 46rem);
  min-width: 0;
  max-width: 58%;
  max-height: min(52vh, 30rem);
  right: clamp(-8rem, -4vw, -2rem);
  bottom: clamp(2rem, 7vh, 5rem);
  object-position: center right;
}
#course #main .container .actions {
  margin-top: auto;
}
#course .study-periods {
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 3rem;
}
#course .study-periods__content {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  min-height: 0;
}
#course .study-periods__content .periods-age {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#course .study-periods__content .periods-age::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#course .study-periods__content .periods-age::-webkit-scrollbar-track {
  background: transparent;
}
#course .study-periods__content .periods-age::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#course .study-periods__content .periods-age::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#course .study-periods__content .periods-age::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#course .study-periods__content .periods-age::-webkit-scrollbar-corner {
  background: transparent;
}
#course .study-periods__content .periods-age::-webkit-scrollbar-button, #course .study-periods__content .periods-age::-webkit-scrollbar-button:single-button, #course .study-periods__content .periods-age::-webkit-scrollbar-button:vertical:decrement, #course .study-periods__content .periods-age::-webkit-scrollbar-button:vertical:increment, #course .study-periods__content .periods-age::-webkit-scrollbar-button:horizontal:decrement, #course .study-periods__content .periods-age::-webkit-scrollbar-button:horizontal:increment, #course .study-periods__content .periods-age::-webkit-scrollbar-button:start:decrement, #course .study-periods__content .periods-age::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#course .study-periods__content .periods-age {
  flex: 0 1 30%;
  position: relative;
  border-radius: 24px;
  max-block-size: min(70vh, 44rem);
  height: fit-content;
  overflow-x: hidden;
  overflow-y: auto;
}
#course .study-periods__content .periods-age__list {
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}
#course .study-periods__content .periods-age__list:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url(/assets/features/landing/main/bable-course-period-7f87f043105d3bc7c96c0c4aa4342ffcef9918df7b8a3ae1cf3a9c85bc6eef75.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}
#course .study-periods__content .periods-age__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 10%;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: border 0.3s ease-in-out;
}
#course .study-periods__content .periods-age__item * {
  pointer-events: none;
}
#course .study-periods__content .periods-age__item .period-age__opacity {
  background: rgba(2, 2, 2, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background 0.3s ease-in-out;
}
#course .study-periods__content .periods-age__item .period-age__type {
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}
#course .study-periods__content .periods-age__item .period-age__type .type__kind,
#course .study-periods__content .periods-age__item .period-age__type .type__desc {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#course .study-periods__content .periods-age__item .period-age__type .type__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
#course .study-periods__content .periods-age__item .period-age__type .type__desc[data-tooltip] {
  cursor: help;
}
#course .study-periods__content .periods-age__item .period-age__text {
  flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) {
  #course .study-periods__content .periods-age__item:hover .period-age__opacity {
    background: transparent;
  }
}
#course .study-periods__content .periods-age .active {
  border: 0;
}
#course .study-periods__content .periods-age .active .period-age__opacity {
  background: transparent;
}
#course .study-periods__content .periods-age .active * {
  color: #030305;
}
#course .study-periods__content .periods-age__item:nth-child(1) {
  border-radius: 24px 24px 0 0;
}
#course .study-periods__content .periods-age__item:nth-last-child(1) {
  border-radius: 0 0 24px 24px;
  border-bottom: 1px solid #fff;
}
#course .study-periods__content .periods-age__background-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#course .study-periods__content .periods-age__background-wrapper img {
  width: 100%;
  height: 100%;
}
#course .study-periods-content__stages {
  flex: 0 1 70%;
  min-width: 0;
  min-height: 0;
}
#course .study-periods-content__stages .training-stages-list {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-track {
  background: transparent;
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-corner {
  background: transparent;
}
#course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:single-button, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:vertical:decrement, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:vertical:increment, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:horizontal:decrement, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:horizontal:increment, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:start:decrement, #course .study-periods-content__stages .training-stages-list::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#course .study-periods-content__stages .training-stages-list {
  display: none;
  min-height: 0;
  max-block-size: min(70vh, 44rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.4rem;
  box-sizing: border-box;
}
#course .study-periods-content__stages .active {
  display: flex;
}
@media (max-width: 1023px) {
  #course .study-periods__content {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #course .study-periods__content .periods-age {
    max-block-size: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: clamp(3rem, 14vw, 4.5rem);
    padding-bottom: 0.375rem;
  }
  #course .study-periods__content .periods-age__list {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 0;
    width: max-content;
    min-width: 100%;
    overflow: hidden;
    padding-bottom: 0.125rem;
  }
  #course .study-periods__content .periods-age__list .periods-age__item {
    padding: 5%;
    min-width: fit-content;
    border-radius: 0;
  }
  #course .study-periods__content .periods-age__list .periods-age__item.active {
    border-color: rgba(255, 122, 0, 0.38);
    position: relative;
    z-index: 1;
  }
  #course .study-periods__content .periods-age__list .periods-age__item:nth-child(1) {
    border-radius: 24px 0 0 24px;
  }
  #course .study-periods__content .periods-age__list .periods-age__item:nth-last-child(1) {
    border-radius: 0 24px 24px 0;
  }
  #course .study-periods__content .study-periods-content__stages .training-stages-list {
    max-block-size: clamp(18rem, 52vh, 36rem);
  }
}
@media (max-width: 1280px) {
  #course #main .container .course-hero__header {
    max-width: min(100%, 32rem);
  }
  #course #main .page-image--landscape {
    width: clamp(28rem, 50vw, 40rem);
    max-width: 56%;
    max-height: min(48vh, 26rem);
    right: clamp(-5rem, -3vw, -1rem);
  }
}
@media (max-width: 900px) {
  #course #main .page-image--landscape {
    width: min(60%, 30rem);
    max-width: 30rem;
    max-height: 22rem;
    right: 0;
    bottom: 5rem;
  }
}
@media (max-width: 580px) {
  #course #main .page-image--landscape {
    width: min(92%, 32rem);
    max-height: 15rem;
    right: 0;
    bottom: 4.5rem;
  }
  #course #main .container .course-hero__header {
    gap: 0.875rem;
  }
  #course #main .container .btn--preview {
    width: 100%;
    min-height: 3.25rem;
    position: relative;
    top: initial;
    right: initial;
  }
  #course .study-periods {
    gap: 1.5rem;
  }
  #course .study-periods__content .periods-age__list .periods-age__item {
    padding: 2%;
  }
}

.profiles #course::before {
  content: none;
  background: none;
}

.course-subscribe__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  width: min(100%, 34rem);
  padding: 1rem 1.25rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.course-subscribe__status--pending {
  border-color: rgba(38, 48, 245, 0.35);
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.course-subscribe__status--queue {
  border-color: rgba(178, 178, 178, 0.35);
  background: linear-gradient(180deg, rgba(178, 178, 178, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%);
}

.course-subscribe__status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.course-subscribe__status-badge--pending {
  background: #2630f5;
  box-shadow: 0 10px 24px rgba(38, 48, 245, 0.28);
}
.course-subscribe__status-badge--queue {
  background: #B2B2B2;
  box-shadow: 0 10px 24px rgba(178, 178, 178, 0.24);
}

.course-subscribe__status-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

@media (max-width: 769px) {
  .course-subscribe__status {
    width: 100%;
    padding: 0.875rem 1rem;
  }
  .course-subscribe__status-badge {
    min-height: 2.5rem;
    padding: 0.65rem 0.9rem;
  }
}
#course #main .marquee-container {
  z-index: 4;
}
#course .study-periods-content__stages .training-stages-list {
  gap: 1rem;
}
#course .study-periods-content__stages .training-stages-list__item {
  min-height: 0;
  box-sizing: border-box;
}
#course .study-periods-content__stages .drop-down__item {
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: 28px;
  padding: 1.25rem 1.5rem;
  padding-bottom: 1.1rem;
  min-height: 5.25rem;
  overflow: hidden;
}
#course .study-periods-content__stages .drop-down__item--title {
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
}
#course .study-periods-content__stages .training-stage__title-wrapper {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-block: 0.1rem;
}
#course .study-periods-content__stages .training-stage__title {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-family: "DrukWideCyr Medium";
  font-size: clamp(1rem, 0.85rem + 0.9vw, 1.6rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
#course .study-periods-content__stages .training-stage__content {
  min-width: 0;
  overflow-wrap: anywhere;
}
#course .study-periods-content__stages .drop-down__item.active {
  padding-bottom: 1.25rem;
}
#course .study-periods-content__stages .drop-down__item--tool {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  max-width: 28px;
  max-height: 28px;
}
#course .teachers {
  overflow: visible;
}
#course .teachers .teachers-slider.swiper-container {
  overflow: hidden;
}
#course .teachers .swiper-wrapper {
  overflow: visible;
}
#course .teachers .swiper-wrapper .teacher {
  display: flex;
  flex-direction: column;
  min-height: clamp(24rem, 44vw, 31rem);
  background: rgba(18, 18, 65, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
}
#course .teachers .swiper-wrapper .teacher__image-wrapper {
  min-height: clamp(15rem, 28vw, 20rem);
  margin-top: 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}
#course .teachers .swiper-wrapper .teacher__info {
  min-height: clamp(8.25rem, 14vw, 10.5rem);
  border-radius: 0 0 24px 24px;
}
#course .filials__list {
  margin-bottom: 0.75rem;
}
#course .filials__map {
  margin-top: 1rem;
}
@media (max-width: 1023px) {
  #course #main .page-image--landscape {
    width: min(68%, 32rem);
    max-width: 32rem;
    max-height: 23rem;
    bottom: 4.5rem;
  }
}
@media (max-width: 767px) {
  #course #main .container .course-hero__header {
    max-width: 100%;
  }
  #course #main .container .course-hero__header .info-block {
    gap: 1.6rem;
    margin-block: 4% 0;
  }
  #course #main .container .actions {
    margin-top: 0;
  }
  #course #main .page-image--landscape {
    width: min(88%, 28rem);
    max-width: 28rem;
    max-height: 17rem;
    right: 0;
    bottom: 3.75rem;
  }
  #course .study-periods__content {
    gap: 1rem;
  }
  #course .study-periods .periods-age {
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: clamp(3rem, 14vw, 4.5rem);
    padding-bottom: 0.375rem;
  }
  #course .study-periods .periods-age__list {
    gap: 0;
    width: max-content;
    min-width: 100%;
    padding-bottom: 0.125rem;
    overflow: hidden;
  }
  #course .study-periods .periods-age__item {
    padding: 0.85rem 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 0;
    border-radius: 0 !important;
  }
  #course .study-periods .periods-age__item:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px 0 0 24px !important;
  }
  #course .study-periods .periods-age__item:last-child {
    border-radius: 0 24px 24px 0 !important;
  }
  #course .study-periods .periods-age__item.active {
    border-color: rgba(255, 122, 0, 0.38);
    box-shadow: 0 10px 24px rgba(8, 11, 38, 0.18);
    position: relative;
    z-index: 1;
  }
  #course .study-periods .period-age__text {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    line-height: 1;
  }
  #course .study-periods .type__kind,
  #course .study-periods .type__desc {
    line-height: 1.15;
  }
  #course .study-periods .training-stages-list {
    max-block-size: clamp(18rem, 52vh, 34rem);
    padding-right: 0.4rem;
    box-sizing: border-box;
  }
  #course .study-periods .training-stages-list.active {
    max-height: clamp(20rem, 50svh, 28rem);
  }
  #course .study-periods .drop-down__item {
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    padding-bottom: 0.95rem;
    min-height: 4.6rem;
  }
  #course .study-periods .drop-down__item--title {
    min-height: 2.25rem;
  }
  #course .study-periods .training-stage__title-wrapper {
    padding-block: 0;
  }
  #course .study-periods .training-stage__title {
    font-size: 1rem;
    line-height: 1.18;
  }
  #course .study-periods .drop-down__item--tool {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
  }
  #course .study-periods .drop-down__item.active {
    padding-bottom: 1.05rem;
  }
  #course .teachers .teachers-slider.swiper-container {
    padding-bottom: 1rem !important;
  }
  #course .teachers .swiper-container__header {
    margin-bottom: 1rem;
  }
  #course .teachers .swiper-wrapper .teacher {
    min-height: 24rem;
  }
  #course .teachers .swiper-wrapper .teacher__image-wrapper {
    min-height: 15.5rem;
  }
  #course .teachers .swiper-wrapper .teacher__info {
    padding: 1rem 1rem 1.15rem;
  }
  #course .filials__map {
    margin-top: 0.625rem;
    gap: 0.625rem;
  }
}
@media (max-width: 580px) {
  #course #main .page-image--landscape {
    width: min(96%, 24rem);
    max-height: 15.75rem;
    right: 0;
    bottom: 3.4rem;
  }
  #course #main .container {
    height: calc(100% - 1.75rem);
  }
  #course #main .container .course-hero__header {
    gap: 0.75rem;
  }
  #course #main .container .course-hero__header .info-block {
    gap: 1.25rem;
  }
  #course .study-periods {
    gap: 1.25rem;
  }
  #course .study-periods .periods-age__item {
    padding: 0.8rem 0.95rem !important;
  }
  #course .study-periods .drop-down__item {
    border-radius: 24px;
    min-height: 4.4rem;
  }
  #course .study-periods .training-stage__title {
    font-size: 0.95rem;
  }
  #course .teachers .swiper-wrapper .teacher {
    min-height: 22.75rem;
  }
  #course .teachers .swiper-wrapper .teacher__image-wrapper {
    min-height: 14.5rem;
  }
  #course .filials__list {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 1441px) {
  #course #main {
    min-height: clamp(765px, 50vw, 1080px);
  }
}
#course #main .page-image:not(.page-image--landscape) {
  aspect-ratio: 1/1;
  width: clamp(22rem, 40vw, 56rem);
  min-width: 0;
  height: auto;
  max-height: none;
  right: 15%;
  object-fit: contain;
}
#course #main .asteroid {
  height: auto;
  aspect-ratio: 1089/577;
}
#course #main .container .info-block .page-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
@media (max-width: 1023px) {
  #course #main .page-image:not(.page-image--landscape) {
    right: 6%;
  }
}
@media (max-width: 900px) {
  #course #main .page-image:not(.page-image--landscape) {
    width: min(70%, 26rem);
    min-width: 0;
    right: 4%;
  }
  #course #main .container .info-block .page-description {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}
@media (max-width: 580px) {
  #course #main .page-image:not(.page-image--landscape) {
    width: min(86%, 22rem);
    min-width: 0;
    right: 0;
  }
  #course #main .container .info-block .page-description {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

.product-card :root {
  --thumbnail-height: 10svh;
}
.product-card {
  display: flex;
  gap: 2.5rem;
}
.product-card__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: fit-content;
}
.product-card__gallery.mobile {
  display: none;
}
.product-card__gallery.main {
  display: flex;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  flex: 0 1 100%;
  min-height: 500px;
  max-height: 550px;
}
.product-card__gallery.main img {
  width: 100%;
  height: 100%;
}
.product-card__thumbnails {
  width: calc(18% - 1rem);
  position: relative;
  overflow: hidden;
  object-fit: contain;
  padding-block: 3%;
}
.product-card__image-main, .product-card__thumbnail {
  border-radius: 1rem;
  overflow: hidden;
}
.product-card__thumbnail {
  opacity: 0.6;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.product-card__thumbnail img {
  height: var(--thumbnail-height);
}
.product-card__thumbnail.active {
  opacity: 1;
}
.product-card__image-main {
  flex: 0 0 82%;
  margin-left: auto;
  aspect-ratio: 16/9;
}
.product-card__image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 0 1 37%;
  position: sticky;
  top: 13%;
  height: fit-content;
}
.product-card__info--main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-card__badges {
  display: flex;
  gap: 0.75rem;
}
.product-card__badge {
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
}
.product-card__badge--new {
  background-color: #EA4DBC;
}
.product-card__badge--discount {
  background-color: #FF0061;
}
.product-card__age {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.product-card__description {
  color: #fff;
}
.product-card__price {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #fff;
  border-radius: 24px;
}
.product-card__delivery {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.product-card__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-card__detail {
  display: flex;
  flex-direction: column;
  border: 1px solid #fff;
  border-radius: 24px;
  padding: 1.875rem;
  cursor: pointer;
  overflow: hidden;
}
.product-card__detail-title {
  align-items: center;
  transition: color 0.3s ease-in-out;
}
.product-card__detail-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.product-card__detail.active {
  background-color: #fff;
}
.product-card__detail.active .product-card__detail-content {
  max-height: 10000px;
  padding-top: 1rem;
}
.product-card__detail.active * {
  color: #030305;
}
@media (max-width: 1023px) {
  .product-card {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .product-card__gallery.main {
    display: none;
  }
  .product-card__gallery.mobile {
    display: flex;
  }
  .product-card__info {
    gap: 1rem;
    position: relative;
  }
  .product-card__price {
    gap: 1rem;
    padding: 1rem;
  }
  .product-card__details {
    gap: 0.625rem;
  }
  .product-card__detail {
    padding: 1rem;
  }
}

.event-page, #event-page {
  background-color: #000000;
  overflow: hidden;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --radius-sm: .75rem;
  --radius-md: 1.5rem;
  --border-thin: .0625rem solid #ffffff;
  --glass-bg: rgba(17, 17, 17, .2);
  --glass-blur: 1.25rem;
}
.event-page #main.event-page__hero .container .event-hero, #event-page #main.event-page__hero .container .event-hero {
  max-width: 52%;
}
.event-page #main.event-page__hero .container .event-hero .event-hero__title.title-large, #event-page #main.event-page__hero .container .event-hero .event-hero__title.title-large {
  max-width: 100%;
}
.event-page .container, #event-page .container {
  position: relative;
}
.event-page .container .event-category, #event-page .container .event-category {
  position: absolute;
  top: 10%;
  right: 0;
}
.event-page .container .event-category__label, #event-page .container .event-category__label {
  position: absolute;
  top: 45%;
  left: 70%;
  transform: translate3d(-50%, -50%, 0);
}
.event-page .container .event-hero, #event-page .container .event-hero {
  max-width: 45%;
  height: 100%;
}
.event-page .container .event-meta, #event-page .container .event-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
@supports not (gap: 1rem) {
  .event-page .container .event-meta > * + *, #event-page .container .event-meta > * + * {
    margin-left: var(--space-2);
  }
}
.event-page .container .event-meta .tag__primary, #event-page .container .event-meta .tag__primary {
  white-space: nowrap;
}
.event-page .container .event-hero__cta, #event-page .container .event-hero__cta {
  margin-block: var(--space-2);
}
.event-page .container .event-partners, #event-page .container .event-partners {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
@supports not (gap: 1rem) {
  .event-page .container .event-partners .event-partners__logo, #event-page .container .event-partners .event-partners__logo {
    margin-right: var(--space-4);
  }
}
.event-page .container .event-partners__logo, #event-page .container .event-partners__logo {
  object-fit: contain;
  max-height: 3rem;
}
.event-page .container .event-section, #event-page .container .event-section {
  position: relative;
}
.event-page .container .event-section__title, #event-page .container .event-section__title {
  margin-block: 0 var(--space-3);
}
.event-page .container .event-section > h1, .event-page .container .event-section > h2, .event-page .container .event-section > h3, #event-page .container .event-section > h1, #event-page .container .event-section > h2, #event-page .container .event-section > h3 {
  margin-block: 0 var(--space-3);
}
.event-page .container .event-section__content, #event-page .container .event-section__content {
  display: flex;
  justify-content: space-between;
  gap: 2.25rem;
  position: relative;
  z-index: 10;
}
@supports not (gap: 1rem) {
  .event-page .container .event-section__content > * + *, #event-page .container .event-section__content > * + * {
    margin-left: 2.25rem;
  }
}
.event-page .container .event-section__header, #event-page .container .event-section__header {
  flex: 0 0 30%;
}
.event-page .container .event-section__body, #event-page .container .event-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  color: #ffffff;
}
@supports not (gap: 1rem) {
  .event-page .container .event-section__body > * + *, #event-page .container .event-section__body > * + * {
    margin-top: var(--space-3);
  }
}
.event-page .container .event-section--about .event-section__decor, #event-page .container .event-section--about .event-section__decor {
  position: absolute;
  top: -7%;
  left: -55%;
  z-index: 0;
}
.event-page .container .event-section--about .event-section__ellipse, .event-page .container .event-section--about .event-section__spline, #event-page .container .event-section--about .event-section__ellipse, #event-page .container .event-section--about .event-section__spline {
  position: absolute;
  z-index: 0;
}
.event-page .container .event-section--about .event-section__ellipse--dark, #event-page .container .event-section--about .event-section__ellipse--dark {
  top: -22rem;
  z-index: 1;
}
.event-page .container .event-section--about .event-section__ellipse--blue, #event-page .container .event-section--about .event-section__ellipse--blue {
  left: -12rem;
}
.event-page .container .event-address, #event-page .container .event-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@supports not (gap: 1rem) {
  .event-page .container .event-address > * + *, #event-page .container .event-address > * + * {
    margin-top: var(--space-2);
  }
}
.event-page .container .event-address__row, #event-page .container .event-address__row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
@supports not (gap: 1rem) {
  .event-page .container .event-address__row > * + *, #event-page .container .event-address__row > * + * {
    margin-left: 0.75rem;
  }
}
.event-page .container .event-address__icon, #event-page .container .event-address__icon {
  padding-top: 0.0625rem;
}
.event-page .container .event-audience, #event-page .container .event-audience {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  z-index: 10;
}
@supports not (gap: 1rem) {
  .event-page .container .event-audience > * + *, #event-page .container .event-audience > * + * {
    margin-left: var(--space-4);
  }
}
.event-page .container .event-audience__media, #event-page .container .event-audience__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.event-page .container .event-audience__image--mobile, #event-page .container .event-audience__image--mobile {
  display: none;
}
.event-page .container .event-audience__list, #event-page .container .event-audience__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@supports not (gap: 1rem) {
  .event-page .container .event-audience__list > * + *, #event-page .container .event-audience__list > * + * {
    margin-top: 0.75rem;
  }
}
.event-page .container .event-audience__item, #event-page .container .event-audience__item {
  color: #050507;
  background-color: #ffffff;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-size: 1.25rem;
  line-height: 1.4;
}
.event-page .container .event-audience__ellipse, #event-page .container .event-audience__ellipse {
  position: absolute;
}
.event-page .container .event-audience__ellipse--purple, #event-page .container .event-audience__ellipse--purple {
  right: -40%;
  bottom: -30%;
}
.event-page .container .event-audience__ellipse--blue, #event-page .container .event-audience__ellipse--blue {
  right: 0;
  z-index: 0;
  width: 700px;
  height: 300px;
  bottom: -50%;
  opacity: 0.4;
}
.event-page .container .event-learning, #event-page .container .event-learning {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-2);
  position: relative;
  z-index: 10;
}
@supports not (gap: 1rem) {
  .event-page .container .event-learning > * + *, #event-page .container .event-learning > * + * {
    margin-left: var(--space-2);
  }
}
.event-page .container .event-learning__list, #event-page .container .event-learning__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  border-radius: var(--radius-md);
  border: var(--border-thin);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  padding: 3.5rem;
}
@supports not (gap: 1rem) {
  .event-page .container .event-learning__list > * + *, #event-page .container .event-learning__list > * + * {
    margin-top: var(--space-2);
  }
}
.event-page .container .event-learning__item, #event-page .container .event-learning__item {
  position: relative;
  color: #ffffff;
  padding-left: var(--space-2);
}
.event-page .container .event-learning__bullet, #event-page .container .event-learning__bullet {
  display: flex;
  inline-size: 0.3125rem;
  block-size: 0.3125rem;
  background-color: #ffffff;
  position: absolute;
  left: 0;
  top: 0.75rem;
  border-radius: 50%;
}
.event-page .container .event-learning__media, #event-page .container .event-learning__media {
  flex: 0 1 50%;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.event-page .container .event-learning__media img, #event-page .container .event-learning__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.event-page .container .event-learning__decor, #event-page .container .event-learning__decor {
  position: absolute;
}
.event-page .container .event-learning__decor--ellipse, #event-page .container .event-learning__decor--ellipse {
  bottom: -120%;
  left: -30%;
}
.event-page .container .event-learning__decor--spline, #event-page .container .event-learning__decor--spline {
  top: -45%;
  right: -81.5%;
}
.event-page .container .event-program, #event-page .container .event-program {
  position: relative;
  z-index: 10;
  max-width: 43.75rem;
}
.event-page .container .event-program__timeline, #event-page .container .event-program__timeline {
  display: flex;
  flex-direction: column;
}
.event-page .container .event-program__item, #event-page .container .event-program__item {
  display: flex;
  gap: var(--space-4);
  color: #ffffff;
  border-bottom: var(--border-thin);
  padding-block: 1.25rem;
}
@supports not (gap: 1rem) {
  .event-page .container .event-program__item > * + *, #event-page .container .event-program__item > * + * {
    margin-left: var(--space-4);
  }
}
.event-page .container .event-program__item:nth-last-child(1), #event-page .container .event-program__item:nth-last-child(1) {
  border-bottom: 0;
}
.event-page .container .event-program__date, #event-page .container .event-program__date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex: 0 0 10rem;
  min-width: 10rem;
}
.event-page .container .event-program__date .title-medium, #event-page .container .event-program__date .title-medium {
  white-space: nowrap;
}
.event-page .container .event-program__name, #event-page .container .event-program__name {
  flex: 1 1 auto;
}
.event-page .container .event-program__files, #event-page .container .event-program__files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
}
@supports not (gap: 1rem) {
  .event-page .container .event-program__files > * + *, #event-page .container .event-program__files > * + * {
    margin-top: var(--space-2);
  }
}
.event-page .container .event-program__file, #event-page .container .event-program__file {
  display: flex;
  align-items: center;
  color: #ffffff;
  border-radius: var(--radius-md);
  border: var(--border-thin);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 1.25rem;
  line-height: 1.4;
  font-family: "Inter Regular";
}
.event-page .container .event-program__file-icon, #event-page .container .event-program__file-icon {
  margin-right: var(--space-2);
  transition: filter 0.3s;
}
.event-page .container .event-program__file:hover, #event-page .container .event-program__file:hover {
  color: #000000;
  background-color: #ffffff;
}
.event-page .container .event-program__file:hover .event-program__file-icon, #event-page .container .event-program__file:hover .event-program__file-icon {
  filter: invert(100%) sepia(0%) saturate(7467%) hue-rotate(296deg) brightness(97%) contrast(108%);
}
.event-page .container .event-program__decor, #event-page .container .event-program__decor {
  position: absolute;
  right: -50%;
  bottom: -130%;
}
.event-page .container .event-section--signup, #event-page .container .event-section--signup {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  z-index: 10;
}
@supports not (gap: 1rem) {
  .event-page .container .event-section--signup > * + *, #event-page .container .event-section--signup > * + * {
    margin-top: var(--space-3);
  }
}
.event-page .container .event-section--signup .user-request form, #event-page .container .event-section--signup .user-request form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@supports not (gap: 1rem) {
  .event-page .container .event-section--signup .user-request form > * + *, #event-page .container .event-section--signup .user-request form > * + * {
    margin-top: var(--space-2);
  }
}
.event-page .container .event-section--signup .user-request form .user-request__politics, #event-page .container .event-section--signup .user-request form .user-request__politics {
  padding-block: 0 var(--space-2);
  color: rgba(255, 255, 255, 0.78);
  opacity: 1;
}
.event-page .container .event-section--signup .user-request form .user-request__politics p, #event-page .container .event-section--signup .user-request form .user-request__politics p {
  display: flex;
}
.event-page .container .event-section--signup .user-request form .user-request__politics p a, #event-page .container .event-section--signup .user-request form .user-request__politics p a {
  padding-left: 0.25rem;
}
.event-page .container .event-section--signup .user-request form .user-request__politics .user-request__link, #event-page .container .event-section--signup .user-request form .user-request__politics .user-request__link {
  color: #2630f5;
}
.event-page .container .event-section--signup .user-request form .user-request__politics .user-request__link:visited, #event-page .container .event-section--signup .user-request form .user-request__politics .user-request__link:visited {
  color: #2630f5;
}
.event-page .container .event-section--signup .user-request form .user-request__custom-checkbox, #event-page .container .event-section--signup .user-request form .user-request__custom-checkbox {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
}
.event-page .container .event-section--signup .user-request form .user-request__label .user-request__checkbox-input:checked + .user-request__custom-checkbox, #event-page .container .event-section--signup .user-request form .user-request__label .user-request__checkbox-input:checked + .user-request__custom-checkbox {
  background-color: transparent;
  border-color: #ffffff;
}
.event-page .container .event-section--signup .user-request form .user-request__actions, #event-page .container .event-section--signup .user-request form .user-request__actions {
  width: 30%;
}
.event-page .container #end-block.event-section--final, #event-page .container #end-block.event-section--final {
  position: relative;
  z-index: 10;
  margin-bottom: 10rem;
}
.event-page .container .event-final, #event-page .container .event-final {
  position: relative;
  z-index: 10;
}
.event-page .container .event-final__text, .event-page .container .event-final__feature, #event-page .container .event-final__text, #event-page .container .event-final__feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  border: var(--border-thin);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  padding: 3rem;
  color: #ffffff;
}
@supports not (gap: 1rem) {
  .event-page .container .event-final__text > * + *, .event-page .container .event-final__feature > * + *, #event-page .container .event-final__text > * + *, #event-page .container .event-final__feature > * + * {
    margin-top: var(--space-2);
  }
}
.event-page .container .event-final__main, #event-page .container .event-final__main {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
@supports not (gap: 1rem) {
  .event-page .container .event-final__main > * + *, #event-page .container .event-final__main > * + * {
    margin-left: var(--space-2);
  }
}
.event-page .container .event-final__text, #event-page .container .event-final__text {
  flex: 1 1 auto;
}
.event-page .container .event-final__text .text-large, #event-page .container .event-final__text .text-large {
  max-width: 39.75rem;
}
.event-page .container .event-final__media, #event-page .container .event-final__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 0 1 30%;
}
.event-page .container .event-final__media img, #event-page .container .event-final__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.event-page .container .event-final__features, #event-page .container .event-final__features {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
@supports not (gap: 1rem) {
  .event-page .container .event-final__features > * + *, #event-page .container .event-final__features > * + * {
    margin-left: var(--space-2);
  }
}
.event-page .container .event-final__feature, #event-page .container .event-final__feature {
  width: 32.7%;
}
.event-page .container .event-final__icon, #event-page .container .event-final__icon {
  width: 2.5rem;
  height: 2.5rem;
}
.event-page .container .event-final__icon path, #event-page .container .event-final__icon path {
  fill: #2630f5;
}
.event-page .container .event-final__decor, #event-page .container .event-final__decor {
  position: absolute;
}
.event-page .container .event-final__decor--spline, #event-page .container .event-final__decor--spline {
  top: 10%;
  left: -80%;
}
.event-page .container .event-final__decor--ellipse, #event-page .container .event-final__decor--ellipse {
  left: 0;
  bottom: -60%;
}

@media (max-width: 1023px) {
  .event-page .container .event-category, #event-page .container .event-category {
    top: 6%;
  }
}
@media (max-width: 991px) {
  .event-page .container .event-category, #event-page .container .event-category {
    top: 4%;
  }
  .event-page .container .event-category img, #event-page .container .event-category img {
    max-width: 60%;
  }
  .event-page .container .event-category__label, #event-page .container .event-category__label {
    left: 45%;
    font-size: 0.875rem;
  }
  .event-page .container .event-hero, #event-page .container .event-hero {
    max-width: 100%;
    margin-block: 5% 0 !important;
  }
  .event-page .container .event-hero .event-hero__cta, #event-page .container .event-hero .event-hero__cta {
    width: 100%;
    order: 1;
    margin-top: auto;
  }
  .event-page .container .event-section__content, #event-page .container .event-section__content {
    flex-direction: column;
    gap: var(--space-3);
  }
  @supports not (gap: 1rem) {
    .event-page .container .event-section__content > * + *, #event-page .container .event-section__content > * + * {
      margin-left: 0;
      margin-top: var(--space-3);
    }
  }
  .event-page .container .event-section__header, #event-page .container .event-section__header {
    flex: 0 1 auto;
  }
  .event-page .container .event-audience, #event-page .container .event-audience {
    flex-direction: column;
    gap: var(--space-2);
  }
  @supports not (gap: 1rem) {
    .event-page .container .event-audience > * + *, #event-page .container .event-audience > * + * {
      margin-left: 0;
      margin-top: var(--space-2);
    }
  }
  .event-page .container .event-audience__image--desktop, #event-page .container .event-audience__image--desktop {
    display: none;
  }
  .event-page .container .event-audience__image--mobile, #event-page .container .event-audience__image--mobile {
    display: flex;
    inline-size: 100%;
  }
  .event-page .container .event-audience__media, #event-page .container .event-audience__media {
    aspect-ratio: 16/9;
  }
  @supports not (aspect-ratio: 1/1) {
    .event-page .container .event-audience__media, #event-page .container .event-audience__media {
      position: relative;
    }
    .event-page .container .event-audience__media::before, #event-page .container .event-audience__media::before {
      content: "";
      display: block;
      padding-top: 56.25%;
    }
    .event-page .container .event-audience__media .event-audience__image, #event-page .container .event-audience__media .event-audience__image {
      position: absolute;
      inset: 0;
    }
  }
  .event-page .container .event-learning, #event-page .container .event-learning {
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: var(--space-2);
  }
  @supports not (gap: 1rem) {
    .event-page .container .event-learning > * + *, #event-page .container .event-learning > * + * {
      margin-left: 0;
      margin-top: var(--space-2);
    }
  }
  .event-page .container .event-learning__list, #event-page .container .event-learning__list {
    padding: var(--space-2) var(--space-2) var(--space-2) 2.5rem;
  }
  .event-page .container .event-learning__media, #event-page .container .event-learning__media {
    aspect-ratio: 16/9;
  }
  @supports not (aspect-ratio: 1/1) {
    .event-page .container .event-learning__media, #event-page .container .event-learning__media {
      position: relative;
    }
    .event-page .container .event-learning__media::before, #event-page .container .event-learning__media::before {
      content: "";
      display: block;
      padding-top: 56.25%;
    }
    .event-page .container .event-learning__media img, #event-page .container .event-learning__media img {
      position: absolute;
      inset: 0;
    }
  }
  .event-page .container .event-learning__bullet, #event-page .container .event-learning__bullet {
    top: 0.5rem;
  }
  .event-page .container .event-learning__decor--spline, #event-page .container .event-learning__decor--spline {
    display: none;
  }
  .event-page .container .event-program, #event-page .container .event-program {
    max-width: 100%;
  }
  .event-page .container .event-program__date, #event-page .container .event-program__date {
    flex-basis: 8rem;
    min-width: 8rem;
  }
  .event-page .container .event-program__item, #event-page .container .event-program__item {
    gap: var(--space-2);
  }
  @supports not (gap: 1rem) {
    .event-page .container .event-program__item > * + *, #event-page .container .event-program__item > * + * {
      margin-left: var(--space-2);
    }
  }
  .event-page .container .event-program__files, #event-page .container .event-program__files {
    position: relative;
    z-index: 10;
  }
  .event-page .container .event-program__file, #event-page .container .event-program__file {
    padding: 0.75rem var(--space-4);
  }
  .event-page .container .event-section--signup .user-request form .user-request__inputs-list, #event-page .container .event-section--signup .user-request form .user-request__inputs-list {
    flex-direction: column;
  }
  .event-page .container .event-section--signup .user-request form .user-request__politics p, #event-page .container .event-section--signup .user-request form .user-request__politics p {
    flex-direction: column;
  }
  .event-page .container .event-section--signup .user-request form .user-request__politics p a, #event-page .container .event-section--signup .user-request form .user-request__politics p a {
    padding-left: 0;
  }
  .event-page .container .event-section--signup .user-request form .user-request__actions, #event-page .container .event-section--signup .user-request form .user-request__actions {
    width: 100%;
  }
  .event-page .container .event-final__main, #event-page .container .event-final__main {
    display: none;
  }
  .event-page .container .event-final__main .event-final__text, #event-page .container .event-final__main .event-final__text {
    padding: 1.5rem;
  }
  .event-page .container .event-final__features, #event-page .container .event-final__features {
    flex-direction: column;
    gap: var(--space-2);
  }
  @supports not (gap: 1rem) {
    .event-page .container .event-final__features > * + *, #event-page .container .event-final__features > * + * {
      margin-left: 0;
      margin-top: var(--space-2);
    }
  }
  .event-page .container .event-final__feature, #event-page .container .event-final__feature {
    width: 100%;
    padding: 1.5rem;
  }
  .event-page .container .event-final__feature h4, #event-page .container .event-final__feature h4 {
    font-size: 0.875rem;
    line-height: 1.3;
  }
}
@media (max-width: 468px) {
  .event-page .container .event-category img, #event-page .container .event-category img {
    max-width: 50%;
  }
  .event-page .container .event-category__label, #event-page .container .event-category__label {
    left: 40%;
    font-size: 0.75rem;
  }
}
.events-page, #events-page {
  background-color: #000000;
  min-height: 100%;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --radius-md: 1.5rem;
  --border-thin: 0.0625rem solid rgba(255, 255, 255, 0.65);
  --glass-bg: rgba(17, 17, 17, 0.20);
  --glass-blur: 1.25rem;
}
.events-page .container, #events-page .container {
  padding-top: clamp(2rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.events-page__title, #events-page__title {
  margin-bottom: var(--space-3);
}
.events-page__empty, #events-page__empty {
  color: #ffffff;
}
.events-page .events-grid, #events-page .events-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}
.events-page .event-card, #events-page .event-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-thin);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
@supports not (gap: 1rem) {
  .events-page .event-card > * + *, #events-page .event-card > * + * {
    margin-top: var(--space-2);
  }
}
.events-page .event-card:hover, #events-page .event-card:hover {
  transform: translateY(-0.125rem);
  background: rgba(255, 255, 255, 0.08);
}
.events-page .event-card__meta, #events-page .event-card__meta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
@supports not (gap: 1rem) {
  .events-page .event-card__meta > * + *, #events-page .event-card__meta > * + * {
    margin-left: var(--space-2);
  }
}
.events-page .event-card__title, #events-page .event-card__title {
  line-height: 1.2;
}
.events-page .event-card__lead, #events-page .event-card__lead {
  opacity: 0.9;
}
.events-page .event-card__link, #events-page .event-card__link {
  margin-top: auto;
  gap: 0.75rem;
  font-size: 1rem;
  opacity: 0.95;
}

@media (max-width: 1023px) {
  .events-page .event-card, #events-page .event-card {
    grid-column: span 6;
  }
}
@media (max-width: 680px) {
  .events-page .events-grid, #events-page .events-grid {
    grid-template-columns: 1fr;
  }
  .events-page .event-card, #events-page .event-card {
    grid-column: auto;
  }
}
.cart__item--wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 1fr);
}
.cart__item--wrapper--primary, .cart__item--wrapper--secondary {
  display: flex;
  gap: 1rem;
}
.cart__item--wrapper, .cart__item--wrapper--primary, .cart__item--wrapper--secondary {
  border-radius: 1.5rem;
  border: 1px solid #fff;
  padding: 1rem 1.4rem;
}
.cart__item--wrapper--secondary {
  flex-direction: column;
  padding: 0;
}
.cart__wrapper {
  display: flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  gap: 1.125rem;
}
.cart__items {
  display: flex;
  align-content: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 0.625rem;
  flex: 0 1 100%;
}
.cart__items input[type=checkbox] {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  width: 20px;
  height: 20px;
}
.cart__tools img {
  cursor: pointer;
}
.cart__item--link {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.cart__item--img-wrapper {
  height: auto;
  border-radius: 0.5rem;
  overflow: hidden;
}
.cart__item--img-wrapper img {
  width: 100%;
  height: 100%;
}
.cart__item--details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  height: 100%;
}
.cart__item--price {
  display: flex;
  align-items: flex-end;
  gap: 0.625rem;
}
.cart__item--price-old {
  text-decoration: line-through;
  opacity: 0.6;
}
.cart__item--controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.cart__item .entity__controls--frame {
  margin-left: auto;
}
.cart_select--all-enities {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 991px) {
  .cart__wrapper {
    flex-direction: column;
  }
  .cart__item--wrapper, .cart__item--wrapper--secondary {
    padding: 0.625rem;
  }
}
@media (max-width: 801px) {
  .cart__item {
    grid-template-columns: 1fr auto;
  }
  .cart__item--link {
    grid-auto-rows: minmax(auto, 150px);
  }
}
@media (max-width: 768px) {
  .cart__item {
    grid-auto-rows: 3fr 1fr;
    grid-template-columns: initial;
    gap: 0.75rem;
  }
  .cart__item--link {
    gap: 0.75rem;
  }
  .cart__item .entity__controls--frame {
    margin-left: initial;
    min-width: 50%;
  }
}

.order-summary {
  flex: 0 1 40%;
  background-color: #fff;
  width: fit-content;
  height: fit-content;
  position: sticky;
  top: 8rem;
}
.order-summary *:not(.btn-app):not(.order-summary__value--discount) {
  color: #030305;
}
.order-summary__header {
  padding: 1.875rem 1.875rem 0 1.875rem;
}
.order-summary__separator {
  height: 1px;
  background-color: #2630f5;
}
.order-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.875rem;
}
.order-summary__controls {
  padding: 0 1.875rem 1.875rem 1.875rem;
}
.order-summary__value--discount {
  color: #FF0061;
}
.order-summary__button {
  width: 100%;
}
@media (max-width: 991px) {
  .order-summary {
    flex: 0 0 100%;
    width: initial;
  }
  .order-summary__header {
    padding: 1rem 1rem 0 1rem;
  }
  .order-summary__row {
    padding-inline: 1rem;
  }
  .order-summary__controls {
    padding: 0 1rem 1rem 1rem;
  }
}

#not-found-container {
  background: #000;
}
#not-found-container .background-error-page-mob, #not-found-container .background-error-page-desktop {
  display: flex;
  height: 100%;
  width: 100vw;
  top: 0;
  position: absolute;
  z-index: 0;
}
#not-found-container .background-error-page-desktop {
  display: none;
}
#not-found-container .cometa-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
#not-found-container .cometa-wrapper .background-ellipse-blue {
  display: flex;
  position: absolute;
  width: 403px;
  height: 400px;
  left: 142px;
  top: 20px;
  background: #721cb3;
  opacity: 0.6;
  filter: blur(125px);
}
#not-found-container .cometa-wrapper .cometa-full-mob-error, #not-found-container .cometa-wrapper .cometa-full-desktop-error {
  display: flex;
  width: 300%;
  height: 70%;
  margin-left: -25%;
  margin-right: -30%;
}
#not-found-container .cometa-wrapper .cometa-full-desktop-error {
  display: none;
}
#not-found-container .container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#not-found-container .container .label-image-page-not-found {
  position: relative;
  z-index: 10;
  max-width: 100%;
  margin-top: 20vh;
}
#not-found-container .container .info-window {
  position: relative;
  z-index: 10;
  border-radius: 24px;
  border: 1px solid #fff;
  margin-top: 2rem;
  padding: 16px;
  background: rgba(17, 17, 17, 0.2);
  backdrop-filter: blur(20px);
}
#not-found-container .container .info-window h1, #not-found-container .container .info-window p {
  color: #fff;
}
#not-found-container .container .info-window a {
  width: 100%;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  #not-found-container .background-error-page-mob {
    display: none;
  }
  #not-found-container .background-error-page-desktop {
    display: flex;
  }
  #not-found-container .cometa-wrapper .cometa-full-mob-error {
    display: none;
  }
  #not-found-container .cometa-wrapper .cometa-full-desktop-error {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 1600px;
    height: 1600px;
    margin-bottom: -26%;
  }
  #not-found-container .container .label-image-page-not-found {
    margin-top: 15vh;
    z-index: 11;
  }
  #not-found-container .container .info-window {
    padding: 40px;
    margin-top: -3rem;
  }
  #not-found-container .container .info-window a {
    font-size: 24px !important;
  }
}
.dropdowns__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.dropdown {
  display: flex;
  flex-direction: column;
  transition: gap 0.3s ease-in-out;
}
.dropdown--icon {
  flex: 0 0 4%;
  display: block;
  align-self: stretch;
  aspect-ratio: 1;
  width: auto;
  min-width: auto;
  height: 100%;
  max-width: 28px;
  max-height: 28px;
  cursor: pointer;
  position: relative;
}
.dropdown--icon::before, .dropdown--icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 2px;
  background-color: #2630f5;
  transform-origin: center;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.dropdown__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}
.dropdown__header--arrow {
  transition: transform 0.3s ease-in-out;
}
.dropdown__body {
  max-height: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  transition: max-height 0.5s ease-in-out, border 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.dropdown__body td, .dropdown__body th {
  border: 0;
}

.dropdown-active {
  gap: 0.5rem;
}
.dropdown-active .dropdown__header .dropdown__header--arrow {
  transform: rotate(180deg);
}
.dropdown-active .dropdown--icon::after {
  transform: translate(-50%, -50%) rotate(0);
  opacity: 1;
}
.dropdown-active .dropdown__body {
  max-height: 10000px;
  border: initial;
  transition: max-height 0.9s ease-in-out, border 0.9s ease-in-out;
  opacity: 1;
}

#confirm_modal .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
}
#confirm_modal .modal-backdrop .modal-overlay {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 37, 37, 0.75);
  cursor: pointer;
  opacity: 0;
  animation: fadeInOverlay 0.3s ease-out forwards;
}
#confirm_modal .modal-backdrop .modal-window {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  max-width: 768px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  border: 1px solid #fff;
  border-radius: 1.75rem;
  padding: 1.25rem 1.875rem 1.875rem;
  background: rgba(37, 37, 37, 0.75);
  backdrop-filter: blur(18.5px);
  opacity: 0;
  animation: popInModal 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
#confirm_modal .modal-backdrop .modal-window .modal-body,
#confirm_modal .modal-backdrop .modal-window h3,
#confirm_modal .modal-backdrop .modal-window p {
  color: #fff;
}
#confirm_modal .modal-backdrop .modal-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#confirm_modal .modal-backdrop .modal-window__header .modal-close {
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: relative;
}
#confirm_modal .modal-backdrop .modal-window__header .modal-close:before, #confirm_modal .modal-backdrop .modal-window__header .modal-close:after {
  content: "";
  width: 60%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  transform-origin: center;
  border-radius: 0.75rem;
}
#confirm_modal .modal-backdrop .modal-window__header .modal-close:before {
  transform: translateX(-50%) rotate(45deg);
}
#confirm_modal .modal-backdrop .modal-window__header .modal-close:after {
  transform: translateX(-50%) rotate(-45deg);
}
#confirm_modal .modal-backdrop .modal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
#confirm_modal .modal-backdrop .modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popInModal {
  from {
    opacity: 0;
    transform: translate(-50%, -45%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.modal--confirm .modal__content {
  width: min(100%, 640px);
}
.modal--confirm .modal__body {
  gap: 0;
}
.modal--confirm .confirm-modal__message {
  margin: 0;
  color: rgba(220, 226, 245, 0.82);
  line-height: 1.5;
}
.modal--confirm .modal__footer {
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}
.modal--confirm .modal__footer .btn-app {
  min-height: 44px;
}
@media (max-width: 640px) {
  .modal--confirm .modal__footer {
    flex-wrap: wrap;
  }
  .modal--confirm .modal__footer .btn-app {
    width: 100%;
    justify-content: center;
  }
}

.user-avatar__media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  overflow: hidden;
  object-fit: cover;
  text-align: center;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.user-avatar__media.avatar--initials {
  letter-spacing: 0.02em;
}

.avatar {
  display: block;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  container-type: inline-size;
}
.avatar.avatar--circle {
  border-radius: 50%;
}
.avatar.avatar--rounded {
  border-radius: 1rem;
}
.avatar.avatar--square {
  border-radius: 0;
}
.avatar.avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  background: var(--avatar-bg, linear-gradient(140deg, #3A3F8F, #6D4BD0));
  color: var(--avatar-fg, #fff);
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 1rem;
}

.avatar--initials[data-c="0"] {
  --avatar-bg: linear-gradient(140deg, #3A3F8F, #6D4BD0);
}
.avatar--initials[data-c="1"] {
  --avatar-bg: linear-gradient(140deg, #FF8A3D, #E8560A);
}
.avatar--initials[data-c="2"] {
  --avatar-bg: linear-gradient(140deg, #F5B916, #D97706);
}
.avatar--initials[data-c="3"] {
  --avatar-bg: linear-gradient(140deg, #A3E635, #65A30D);
}
.avatar--initials[data-c="4"] {
  --avatar-bg: linear-gradient(140deg, #34D27B, #15903F);
}
.avatar--initials[data-c="5"] {
  --avatar-bg: linear-gradient(140deg, #2DD4BF, #0D9488);
}
.avatar--initials[data-c="6"] {
  --avatar-bg: linear-gradient(140deg, #38BDF8, #0284C7);
}
.avatar--initials[data-c="7"] {
  --avatar-bg: linear-gradient(140deg, #3B9BFF, #1D5FD6);
}
.avatar--initials[data-c="8"] {
  --avatar-bg: linear-gradient(140deg, #C084FC, #7C3AED);
}
.avatar--initials[data-c="9"] {
  --avatar-bg: linear-gradient(140deg, #8B5CF6, #5B21B6);
}
.avatar--initials[data-c="10"] {
  --avatar-bg: linear-gradient(140deg, #E879F9, #A21CAF);
}
.avatar--initials[data-c="11"] {
  --avatar-bg: linear-gradient(140deg, #F472B6, #DB2777);
}
.avatar--initials[data-c="12"] {
  --avatar-bg: linear-gradient(140deg, #FB7185, #E11D48);
}
.avatar--initials[data-c="13"] {
  --avatar-bg: linear-gradient(140deg, #F87171, #DC2626);
}
.avatar--initials[data-c="14"] {
  --avatar-bg: linear-gradient(140deg, #6EE7B7, #059669);
}
.avatar--initials[data-c="15"] {
  --avatar-bg: linear-gradient(140deg, #7B87B8, #4A5490);
}

.avatar__initials {
  display: block;
  max-width: 100%;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(0.7rem, 38cqi, 3rem);
}

.profile__avatar.is-edit {
  position: relative;
  cursor: pointer;
}

.profile__avatar-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  width: 100%;
  z-index: 10000030;
}

.profile__avatar-title {
  margin: 0;
  flex: 1 1 auto;
}

.profile__avatar-popover-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex: 0 0 auto;
  z-index: 10000040;
}
@media (hover: hover) and (pointer: fine) {
  .profile__avatar-popover-toggle:hover {
    z-index: 10000090;
  }
  .profile__avatar-popover-toggle:hover .profile__avatar-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.profile__avatar-popover-toggle:focus-within {
  z-index: 10000090;
}
.profile__avatar-popover-toggle:focus-within .profile__avatar-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.profile__avatar-popover-toggle.is-open {
  z-index: 10000090;
}
.profile__avatar-popover-toggle.is-open .profile__avatar-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.profile__avatar-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
}
.profile__avatar-info:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.72);
  outline-offset: 3px;
}

.profile__avatar-info-button {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  display: block;
  transition: transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
}
.profile__avatar-popover-toggle:hover .profile__avatar-info-button, .profile__avatar-popover-toggle:focus-within .profile__avatar-info-button, .profile__avatar-popover-toggle.is-open .profile__avatar-info-button {
  opacity: 0.92;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.profile__avatar-info-letter {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: #f8fafc;
  font-family: inherit;
}

.profile__avatar-popover {
  position: absolute;
  top: calc(100% + 0.85rem);
  right: -1rem;
  left: auto;
  width: min(22rem, 100vw - 2rem);
  max-width: min(22rem, 100vw - 2rem);
  padding: 1rem 1.125rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(4, 9, 28, 0.94), rgba(15, 23, 42, 0.94));
  box-shadow: 0 32px 80px rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  color: #e2e8f0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0.75rem, 0.4rem, 0) scale(0.96);
  transform-origin: calc(100% - 1.75rem) 0;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s ease;
  z-index: 10000091;
}
.profile__avatar-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.profile__avatar-popover:before {
  content: "";
  position: absolute;
  top: -0.55rem;
  left: var(--avatar-popover-arrow-left, calc(100% - 2.35rem));
  width: 1.15rem;
  height: 0.6rem;
  margin-left: -0.575rem;
  background: rgba(4, 9, 28, 0.94);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .profile__avatar-popover {
    transition: opacity 0.15s ease, visibility 0.15s ease;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.profile__avatar-popover-title {
  margin: 0 0 0.75rem;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.profile__avatar-popover-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.profile__avatar-popover-list li {
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.95rem;
  line-height: 1.5;
}

.profile__info-col--avatar {
  position: relative;
  z-index: 10000020;
  overflow: visible;
}

.avatar-circle {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  border: 2px dashed rgba(148, 163, 184, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.avatar-circle.is-empty {
  background: radial-gradient(circle at 30% 0, rgba(56, 189, 248, 0.25), #020617);
}
.avatar-circle:hover {
  border-style: solid;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}

.avatar-circle__media {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 30%, rgba(2, 6, 23, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.avatar-circle__overlay-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.35);
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.profile__avatar.is-edit {
  border-radius: 50%;
  outline: none;
}
.profile__avatar.is-edit:hover .avatar-circle, .profile__avatar.is-edit:focus-visible .avatar-circle {
  border-style: solid;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}
.profile__avatar.is-edit:hover .avatar-circle__overlay, .profile__avatar.is-edit:focus-visible .avatar-circle__overlay {
  opacity: 1;
}

.avatar-upload-icon img {
  width: 40px;
  height: 40px;
  opacity: 0.9;
}

.profile__avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-file {
  display: none;
}

.avatar-presets {
  margin-top: 1rem;
  width: 100%;
  max-width: 20rem;
}
.avatar-presets__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.avatar-presets__title {
  margin: 0;
  color: rgba(148, 163, 184, 0.92);
  font-weight: 700;
}
.avatar-presets__grid {
  display: grid;
  grid-template-columns: repeat(5, 3.25rem);
  gap: 0.55rem;
}

.avatar-preset {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
}
.avatar-preset__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.avatar-preset__frame {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: radial-gradient(circle at 30% 0, rgba(56, 189, 248, 0.12), rgba(2, 6, 23, 0.6));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.avatar-preset__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-preset__auto-text {
  font-weight: 900;
  letter-spacing: 0.01em;
  color: rgba(226, 232, 240, 0.92);
}
.avatar-preset__frame:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.avatar-preset__input:checked + .avatar-preset__frame {
  border-color: rgba(56, 189, 248, 0.9);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22), 0 12px 22px rgba(0, 0, 0, 0.32);
  transform: translateY(-1px);
}

.avatar-preset--auto {
  flex: 0 0 auto;
}
.avatar-preset--auto .avatar-preset__frame {
  width: auto;
  min-width: 4.5rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.5);
  border-style: dashed;
}

@media (max-width: 980px) {
  .profile__avatar-popover {
    right: -0.75rem;
    width: min(20rem, 100vw - 2rem);
    max-width: min(20rem, 100vw - 2rem);
    --avatar-popover-arrow-left: calc(100% - 2rem);
  }
}
@media (max-width: 640px) {
  .profile__avatar-head {
    gap: 0.5rem;
  }
  .profile__avatar-popover {
    right: -0.5rem;
    width: min(18rem, 100vw - 1rem);
    max-width: min(18rem, 100vw - 1rem);
    max-height: min(74vh, 30rem);
    overflow-y: auto;
    padding: 0.9rem 1rem;
    --avatar-popover-arrow-left: calc(100% - 1.7rem);
  }
  .avatar-presets {
    max-width: 18rem;
  }
  .avatar-presets__grid {
    grid-template-columns: repeat(5, 3rem);
    gap: 0.45rem;
  }
  .avatar-preset__frame {
    width: 3rem;
    height: 3rem;
  }
  .avatar-preset--auto .avatar-preset__frame {
    width: auto;
    min-width: 4.2rem;
  }
  .avatar-circle {
    width: 140px;
    height: 140px;
  }
  .avatar-circle__overlay {
    padding: 0.85rem;
  }
  .avatar-circle__overlay-label {
    min-height: 1.85rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem;
  }
  .avatar-upload-icon img {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 420px) {
  .avatar-circle {
    width: 124px;
    height: 124px;
  }
}
.avatar-cropper {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-cropper__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
}
.avatar-cropper__dialog {
  position: relative;
  z-index: 1;
  background: #020617;
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
  min-width: 360px;
  max-width: 420px;
}
.avatar-cropper__canvas-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.2rem;
  background: radial-gradient(circle at 30% 0, #1e293b, #020617);
  border: 1px solid rgba(148, 163, 184, 0.85);
}
.avatar-cropper__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  touch-action: none;
  cursor: grab;
}
.avatar-cropper__image.is-dragging {
  cursor: grabbing;
}
.avatar-cropper__mask {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.7);
  border: 2px solid rgba(248, 250, 252, 0.9);
}
.avatar-cropper__controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.avatar-cropper__zoom input[type=range] {
  width: 100%;
}
.avatar-cropper__buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cosmetic-avatar-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.cosmetic-avatar-frame > .avatar,
.cosmetic-avatar-frame > img,
.cosmetic-avatar-frame > .profile__avatar-image,
.cosmetic-avatar-frame > .user-avatar__media {
  position: relative;
  z-index: 1;
}
.cosmetic-avatar-frame .user-avatar__frame {
  position: absolute;
  inset: -0.45rem;
  z-index: 2;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.cosmetic-avatar-frame.frame-bronze .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #b87333;
  box-shadow: 0 0 0 0.0625rem rgba(184, 115, 51, 0.4), inset 0 0 0 0.0625rem rgba(255, 235, 198, 0.3);
}

.cosmetic-avatar-frame.frame-silver .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #c7ced8;
  box-shadow: 0 0 0.625rem rgba(199, 206, 216, 0.65), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.3);
}

.cosmetic-avatar-frame.frame-gold .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #e0a21b;
  box-shadow: 0 0 0.75rem rgba(224, 162, 27, 0.75), inset 0 0 0 0.0625rem rgba(255, 244, 201, 0.45);
}

.cosmetic-avatar-frame.frame-arrows .user-avatar__frame {
  background-image: url(/assets/cosmetics/frame-arrows-3ad629a135d3ef2eefa25393d069bf751bcda5b1f3480a032c43e26e37896257.png);
}

.cosmetic-avatar-frame.frame-floral .user-avatar__frame {
  background-image: url(/assets/cosmetics/frame-floral-d49e6066162e5e56a4e721daebc38c5711a77e9cdd8efb3fb6ae3b07785c5ead.png);
}

.cosmetic-avatar-frame.frame-pixel .user-avatar__frame {
  background-image: url(/assets/cosmetics/frame-pixel-01515ceac93d0a61dcc4b521efdfa50244fcd07835a610c9c049b4d7a43d3761.png);
}

.cosmetic-avatar-frame.frame-rainbow .user-avatar__frame {
  background-image: url(/assets/cosmetics/frame-rainbow-8268cab980905798015e7081f59b67e570749da7068e25f85f105233cb10737e.png);
}

.cosmetic-avatar-frame.frame-tech .user-avatar__frame {
  background-image: url(/assets/cosmetics/frame-tech-0b3794fa1b1260d6d8886dba6582ec180d5be3349ddf5f0eacc97f407d5789eb.png);
}

.cosmetic-avatar-frame.frame-water .user-avatar__frame {
  background-image: url(/assets/cosmetics/frame-water-696e95963de7a127c2f7e80112cf788450ecdd35c2eb2dbed357e8899881c500.png);
}

.cosmetic-avatar-frame.frame-emerald .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #2ecc71;
  box-shadow: 0 0 0.75rem rgba(46, 204, 113, 0.6), inset 0 0 0 0.0625rem rgba(214, 255, 232, 0.4);
}

.cosmetic-avatar-frame.frame-ruby .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #e0245e;
  box-shadow: 0 0 0.85rem rgba(224, 36, 94, 0.65), inset 0 0 0 0.0625rem rgba(255, 214, 226, 0.4);
}

.cosmetic-avatar-frame.frame-cosmic .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #8a5bff;
  box-shadow: 0 0 0 0.125rem rgba(53, 217, 255, 0.55), 0 0 0.9rem rgba(176, 107, 255, 0.6), inset 0 0 0 0.0625rem rgba(255, 94, 196, 0.5);
}

.cosmetic-avatar-frame.frame-ice .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #7fd8ff;
  box-shadow: 0 0 0.75rem rgba(127, 216, 255, 0.6), inset 0 0 0 0.125rem rgba(255, 255, 255, 0.45);
}

.cosmetic-avatar-frame.frame-lava .user-avatar__frame {
  inset: -0.32rem;
  border: 0.25rem solid #ff6a2b;
  box-shadow: 0 0 0.85rem rgba(255, 106, 43, 0.65), inset 0 0 0.5rem rgba(255, 178, 62, 0.5);
}

.cosmetic-avatar-frame.frame-galaxy .user-avatar__frame {
  inset: -0.4rem;
  background: conic-gradient(from 0deg, #35d9ff, #8a5bff, #ff5ec4, #ffd166, #35d9ff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.3rem), #000 calc(100% - 0.26rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.3rem), #000 calc(100% - 0.26rem));
  filter: drop-shadow(0 0 0.4rem rgba(138, 91, 255, 0.55));
}

.cosmetic-avatar-frame.frame-royal .user-avatar__frame {
  inset: -0.36rem;
  border: 0.25rem solid #7f29fa;
  box-shadow: 0 0 0 0.125rem rgba(255, 209, 102, 0.9), 0 0 0.9rem rgba(127, 41, 250, 0.65), inset 0 0 0 0.0625rem rgba(255, 209, 102, 0.8);
}

.user-avatar__figure {
  position: absolute;
  top: -9%;
  right: -9%;
  z-index: 6;
  width: 46%;
  min-width: 1.05rem;
  max-width: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.32), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.2);
  pointer-events: none;
  animation: userAvatarFigureFloat 3.4s ease-in-out infinite;
}
.user-avatar__figure::before {
  content: "";
  position: absolute;
  inset: 24%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.user-avatar__figure.badge-star {
  background: radial-gradient(circle at 30% 28%, rgba(255, 236, 155, 0.98), rgba(255, 178, 47, 0.92));
}
.user-avatar__figure.badge-star::before {
  background-image: url(/assets/cosmetics/badges/star-9e90be2706e8bdbafe03e497a83911f87b3f7716b062b229a156cbd5dd4190d8.svg);
}

.user-avatar__figure.badge-flame {
  background: radial-gradient(circle at 30% 28%, rgba(255, 181, 120, 0.98), rgba(255, 79, 79, 0.92));
}
.user-avatar__figure.badge-flame::before {
  background-image: url(/assets/cosmetics/badges/flame-272a61b41bb5e3150f31dc04d5c0d77f449c886746b275ce6c0513ffa6853ef9.svg);
}

.user-avatar__figure.badge-crown {
  background: radial-gradient(circle at 30% 28%, rgba(255, 226, 138, 0.98), rgba(214, 138, 18, 0.92));
}
.user-avatar__figure.badge-crown::before {
  background-image: url(/assets/cosmetics/badges/crown-c93b4de7be6e3544dbe39d0d7d944df9b4a3093a7c253dc81f79725dd23485d6.svg);
}

.user-avatar__figure.badge-bolt {
  background: radial-gradient(circle at 30% 28%, rgba(140, 224, 255, 0.98), rgba(0, 138, 224, 0.92));
}
.user-avatar__figure.badge-bolt::before {
  background-image: url(/assets/cosmetics/badges/bolt-86fac6b15d4d4e5f92c2a2743593561836bd4960ee033a0a8e7ddf5abebfecc7.svg);
}

.user-avatar__figure.badge-heart {
  background: radial-gradient(circle at 30% 28%, rgba(255, 168, 198, 0.98), rgba(235, 60, 114, 0.92));
}
.user-avatar__figure.badge-heart::before {
  background-image: url(/assets/cosmetics/badges/heart-aa3d9e3c6440c02d8a7dcce4bc05d348dcec50d6bbab899ba15a75fd7adf7e1f.svg);
}

.user-avatar__figure.badge-rocket {
  background: radial-gradient(circle at 30% 28%, rgba(178, 198, 255, 0.98), rgba(99, 76, 224, 0.92));
}
.user-avatar__figure.badge-rocket::before {
  background-image: url(/assets/cosmetics/badges/rocket-354a46fa226f88686de4a6f3d27483204164682cda047f5017954cd254c7821f.svg);
}

.user-avatar__figure.badge-gem {
  background: radial-gradient(circle at 30% 28%, rgba(126, 255, 234, 0.98), rgba(22, 200, 168, 0.92));
}
.user-avatar__figure.badge-gem::before {
  background-image: url(/assets/cosmetics/badges/gem-a308f6fd975e3e6f5ed8c2cb32a82f554fbddd9375c5d94582c74d3a5684f854.svg);
}

.user-avatar__figure.badge-moon {
  background: radial-gradient(circle at 30% 28%, rgba(230, 235, 255, 0.98), rgba(122, 138, 224, 0.92));
}
.user-avatar__figure.badge-moon::before {
  background-image: url(/assets/cosmetics/badges/moon-9f984f61ec180607d36246adc38d3c09bdd34692be54cf6449320c902878c28e.svg);
}

.user-avatar__figure.badge-planet {
  background: radial-gradient(circle at 30% 28%, rgba(191, 226, 255, 0.98), rgba(64, 120, 230, 0.92));
}
.user-avatar__figure.badge-planet::before {
  background-image: url(/assets/cosmetics/badges/planet-bfe7bd756cf3320c7fca89a388bb34d0e5aed60ad5c4d1fd796654a66f945e2d.svg);
}

.user-avatar__figure.badge-shield {
  background: radial-gradient(circle at 30% 28%, rgba(190, 255, 219, 0.98), rgba(23, 160, 112, 0.92));
}
.user-avatar__figure.badge-shield::before {
  background-image: url(/assets/cosmetics/badges/shield-5c7d337dcc3622537026e65b42516c2175d9e38267c611d5769930c0564b2b39.svg);
}

.user-avatar__figure.badge-gamepad {
  background: radial-gradient(circle at 30% 28%, rgba(255, 205, 156, 0.98), rgba(238, 106, 68, 0.92));
}
.user-avatar__figure.badge-gamepad::before {
  background-image: url(/assets/cosmetics/badges/gamepad-a4aa1807b5368fd4bf744660f9b6c5cdbda7337a4a588284ee94478cb9dbdacf.svg);
}

.user-avatar__figure.badge-ghost {
  background: radial-gradient(circle at 30% 28%, rgba(232, 220, 255, 0.98), rgba(133, 91, 236, 0.92));
}
.user-avatar__figure.badge-ghost::before {
  background-image: url(/assets/cosmetics/badges/ghost-e4ecf000d2e09a8eda4910487329814d7a6c614ff1d873c81de4948b9d1ca15e.svg);
}

@keyframes userAvatarFigureFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.12rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .user-avatar__figure {
    animation: none;
  }
}
.profile__avatar-cosmetic {
  width: 100%;
  height: 100%;
}

.cosmetic-avatar-frame.is-framed > .avatar,
.cosmetic-avatar-frame.is-framed > img,
.cosmetic-avatar-frame.is-framed > .profile__avatar-image,
.cosmetic-avatar-frame.is-framed > .user-avatar__media {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.user-avatar.cosmetic-avatar-frame,
.header__profile-avatar-media.cosmetic-avatar-frame {
  overflow: visible;
}

.header__profile-avatar-link.is-framed {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.avatar-circle.is-framed {
  border-color: transparent;
  background: transparent;
  overflow: visible;
}
.avatar-circle.is-framed:hover, .avatar-circle.is-framed:focus-visible {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

body.profiles {
  background: radial-gradient(1100px 760px at 20% 0%, rgba(38, 48, 245, 0.92) 0%, rgba(38, 48, 245, 0) 60%), radial-gradient(950px 700px at 85% 10%, rgba(134, 69, 210, 0.85) 0%, rgba(134, 69, 210, 0) 55%), radial-gradient(900px 620px at 90% 92%, rgba(234, 77, 188, 0.55) 0%, rgba(234, 77, 188, 0) 60%), linear-gradient(180deg, rgb(38, 48, 245) 0%, rgb(36, 46, 200) 45%, rgb(77, 38, 186) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.profiles turbo-frame#profile_wrapper {
  display: block;
  width: 100%;
  min-width: 0;
}

.profile {
  display: flex;
  gap: 2.5rem;
  padding: clamp(1rem, 1.5vw + 0.75rem, 2rem) clamp(0.5rem, 2vw, 2rem);
  min-height: 62svh;
  color: rgba(255, 255, 255, 0.92);
}
.profile__sidebar-column {
  --profile-sidebar-expanded-width: clamp(320px, 22vw, 372px);
  --profile-sidebar-collapsed-width: 6.75rem;
  --profile-sidebar-width: var(--profile-sidebar-expanded-width);
  position: sticky;
  top: 1rem;
  display: flex;
  flex: 0 0 var(--profile-sidebar-width);
  flex-direction: column;
  gap: 1rem;
  align-self: flex-start;
  width: var(--profile-sidebar-width);
  min-width: var(--profile-sidebar-width);
  max-width: var(--profile-sidebar-width);
  max-height: calc(100svh - 2rem);
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .profile__sidebar-column {
    max-height: none;
  }
  .profile__sidebar-column > .profile__sidebar {
    flex: 0 1 auto;
    flex-basis: auto;
    min-height: 0;
  }
  .profile__sidebar-column:has(.student-dashboard__sidebar-cards) > .profile__sidebar {
    position: relative;
    top: auto;
  }
  .profile__sidebar-column:has(.profile__sidebar--notifications-open), .profile__sidebar-column:has(.profile__sidebar--notifications-closing) {
    overflow: visible;
    z-index: 1105;
  }
}
.profile__sidebar-column--collapsed {
  --profile-sidebar-width: var(--profile-sidebar-collapsed-width);
}
.profile__sidebar-column--collapsed .student-dashboard__sidebar-cards {
  display: none;
}
.profile turbo-frame {
  width: 100%;
  z-index: 1;
}
.profile > turbo-frame {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.profile .btn-group {
  flex: 0 0 100%;
}
.profile .projects__header {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}
.profile .projects__header .list-items__dropdown {
  margin-left: auto;
}
.profile__block, .profile__block--column, .profile__block--primary, .profile__block--secondary, .profile__block--grid {
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.75rem;
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  padding: 1.875rem;
  position: relative;
  min-width: 0;
}
.profile__block, .profile__block--column, .profile__block--primary, .profile__block--secondary {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}
.profile__block--title, .profile__block--column--title, .profile__block--primary--title, .profile__block--secondary--title {
  display: flex;
}
.profile__block--title .entity-edit, .profile__block--column--title .entity-edit, .profile__block--primary--title .entity-edit, .profile__block--secondary--title .entity-edit {
  margin-left: auto;
  cursor: pointer;
}
.profile__block--title .entity-edit button, .profile__block--column--title .entity-edit button, .profile__block--primary--title .entity-edit button, .profile__block--secondary--title .entity-edit button {
  border: none;
  background-color: transparent;
}
.profile__block--column, .profile__block--primary, .profile__block--secondary {
  flex-direction: column;
}
.profile__block--column {
  justify-content: initial;
}
.profile__block--transparent {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: flex;
  justify-content: initial;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
.profile__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: stretch;
  width: 100%;
}
.profile__content > * {
  height: 100%;
}
.profile__block--title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile__block--actions {
  display: flex;
  justify-content: space-between;
}
.profile__block--test-session.test--result .question-text {
  padding-top: 0;
}
.profile__block--test-session {
  border-radius: 1.75rem;
  border: 1px solid #FF7A00;
  overflow-y: auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.profile__block--test-session::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.profile__block--test-session::-webkit-scrollbar-track {
  background: transparent;
}
.profile__block--test-session::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__block--test-session::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.profile__block--test-session::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.profile__block--test-session::-webkit-scrollbar-corner {
  background: transparent;
}
.profile__block--test-session::-webkit-scrollbar-button, .profile__block--test-session::-webkit-scrollbar-button:single-button, .profile__block--test-session::-webkit-scrollbar-button:vertical:decrement, .profile__block--test-session::-webkit-scrollbar-button:vertical:increment, .profile__block--test-session::-webkit-scrollbar-button:horizontal:decrement, .profile__block--test-session::-webkit-scrollbar-button:horizontal:increment, .profile__block--test-session::-webkit-scrollbar-button:start:decrement, .profile__block--test-session::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.profile__block--test-session .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
}
.profile__block--test-session .question {
  padding-top: clamp(1rem, 6vw, 3.75rem);
}
.profile__block--test-session .question .question-text {
  display: flex;
  align-items: flex-start;
}
.profile__block--test-session .question .profile__block--actions {
  justify-content: flex-end;
}
.profile__block--test-session .answers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.8rem;
  margin: 0;
  height: 100%;
}
.profile__block--test-session .answers .answer {
  position: relative;
  padding-left: 2.5rem;
}
.profile__block--test-session .answers.answers--images {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.profile__block--test-session .answers.answers--images .answer {
  padding-left: 0;
}
@media (min-width: 760px) {
  .profile__block--test-session .answers.answers--images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1500px) {
  .profile__block--test-session .answers.answers--images {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.profile__block .ui-donut {
  flex: 0 1 50%;
  min-width: 0;
}
.profile__block--transparent {
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}
.profile__block--glass {
  background: rgba(37, 37, 37, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.profile__block--test-session.test--result {
  overflow-x: hidden;
  padding-bottom: 1.25rem;
}
.profile__block--test-session.test--result .profile__block--primary {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.profile__block--test-session.test--result .profile__block--primary.test-session-result {
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}
.profile__block--test-session.test--result .test-session-result {
  gap: 1.5rem;
}
.profile__block--test-session.test--result .test-session-result__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: 1.5rem;
  align-items: start;
}
.profile__block--test-session.test--result .test-session-result__items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.profile__block--test-session.test--result .test-session-result__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.profile__block--test-session.test--result .test-session-result__summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.375rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile__block--test-session.test--result .test-session-result__chart {
  display: flex;
  justify-content: center;
}
.profile__block--test-session.test--result .test-session-result__summary-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.profile__block--test-session.test--result .test-session-result__status-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}
.profile__block--test-session.test--result .test-session-result__status-badge.is-passed {
  background: rgba(59, 255, 163, 0.14);
  color: #3BFFA3;
}
.profile__block--test-session.test--result .test-session-result__status-badge.is-failed {
  background: rgba(255, 107, 107, 0.14);
  color: #FF8E8E;
}
.profile__block--test-session.test--result .test-session-result__summary-title {
  margin: 0;
}
.profile__block--test-session.test--result .test-session-result__summary-text {
  color: rgba(255, 255, 255, 0.7);
}
.profile__block--test-session.test--result .question-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile__block--test-session.test--result .question-title {
  display: block;
  text-align: left;
  margin: 0;
  overflow-wrap: anywhere;
}
.profile__block--test-session.test--result .answers {
  gap: 1rem;
  padding-inline: 0;
}
.profile__block--test-session.test--result .answers--result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile__block--test-session.test--result .answers--result .answer--result {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}
.profile__block--test-session.test--result .answers--result .answer--result:not(.answer--with-image) .answer__body {
  justify-content: center;
  min-height: 3.75rem;
}
.profile__block--test-session.test--result .answers--result .answer--result.is-selected .answer__body {
  border-color: rgba(255, 122, 0, 0.55);
  background: rgba(255, 122, 0, 0.08);
}
.profile__block--test-session.test--result .answers--result .answer--result.is-correct .answer__body {
  border-color: rgba(44, 183, 66, 0.45);
}
.profile__block--test-session.test--result .answers--result .answer--result.is-failed .answer__body {
  border-color: rgba(235, 30, 0, 0.45);
}
.profile__block--test-session.test--result .answers--result .answer--result.is-passed .answer-text, .profile__block--test-session.test--result .answers--result .answer--result.is-correct .answer-text {
  color: #2CB742;
}
.profile__block--test-session.test--result .answers--result .answer--result.is-failed .answer-text {
  color: #EB1E00;
}
.profile__block--test-session.test--result .answers--result .answer__status-icon {
  display: inline-flex;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.72);
  position: relative;
  align-self: center;
  background: rgba(255, 255, 255, 0.04);
  margin-top: 0;
}
.profile__block--test-session.test--result .answers--result .answer__status-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78% 78%;
}
.profile__block--test-session.test--result .answers--result .answer__status-icon.is-correct, .profile__block--test-session.test--result .answers--result .answer__status-icon.is-passed {
  border-color: #2CB742;
  background: rgba(44, 183, 66, 0.12);
}
.profile__block--test-session.test--result .answers--result .answer__status-icon.is-correct::after, .profile__block--test-session.test--result .answers--result .answer__status-icon.is-passed::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232CB742' d='M20.3 5.7l-11 11-5-5 1.4-1.4 3.6 3.6 9.6-9.6z'/%3E%3C/svg%3E");
}
.profile__block--test-session.test--result .answers--result .answer__status-icon.is-failed {
  border-color: #EB1E00;
  background: rgba(235, 30, 0, 0.12);
}
.profile__block--test-session.test--result .answers--result .answer__status-icon.is-failed::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EB1E00' d='M18.3 5.7l-1.4-1.4L12 9.17 7.1 4.3 5.7 5.7l4.9 4.9-4.9 4.9 1.4 1.4 4.9-4.9 4.9 4.9 1.4-1.4-4.9-4.9z'/%3E%3C/svg%3E");
}
.profile__block--test-session.test--result .answers--result .answer__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile__block--test-session.test--result .answers--result .answer-text {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.profile__block--test-session.test--result .answers--result-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.profile__block--test-session.test--result .answers--result-media .answer--result {
  min-width: 0;
}
.profile__block--test-session.test--result .answers--result-media .answer__status-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  margin-top: 0;
  background: rgba(11, 14, 78, 0.96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.profile__block--test-session.test--result .answers--result-media .answer__body {
  min-height: 100%;
  padding: 0.9rem;
}
.profile__block--test-session.test--result .answers--result-media .answer-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(10rem, 20vw, 15rem);
  object-fit: contain;
  object-position: center;
  padding: 0.75rem;
  background: rgba(8, 10, 64, 0.45);
  border-radius: 1rem;
}
@media (min-width: 760px) {
  .profile__block--test-session.test--result .answers--result-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1500px) {
  .profile__block--test-session.test--result .answers--result-media {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.profile__block--test-session.test--result .test-result-answer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  min-width: 0;
}
.profile__block--test-session.test--result .test-result-answer-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile__block--test-session.test--result .test-result-answer-group--passed {
  border-color: rgba(44, 183, 66, 0.45);
}
.profile__block--test-session.test--result .test-result-answer-group--failed {
  border-color: rgba(235, 30, 0, 0.45);
}
.profile__block--test-session.test--result .test-result-answer-group--correct {
  border-color: rgba(44, 183, 66, 0.45);
}
.profile__block--test-session.test--result .test-result-answer-label {
  color: rgba(255, 255, 255, 0.65);
}
.profile__block--test-session.test--result .test-result-answer-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.profile__block--test-session.test--result .test-result-answer-value {
  display: block;
  min-width: 0;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.profile__block--test-session.test--result .test-result-answer-value--correct {
  color: #2CB742;
  border-color: rgba(44, 183, 66, 0.35);
}
.profile__block--test-session.test--result .profile__block--actions {
  padding-top: 1rem;
}
.profile__block--test-session.test--result .profile__block--actions .action__next-question {
  margin-left: auto;
  max-width: 100%;
  width: auto;
}
.profile__block--test-session.test--result .profile__block--actions--test-result {
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .profile__block--test-session.test--result .test-session-result__grid {
    grid-template-columns: 1fr;
  }
  .profile__block--test-session.test--result .test-session-result__aside {
    order: -1;
  }
  .profile__block--test-session.test--result .test-session-result__summary {
    max-width: none;
  }
}
@media (max-width: 768px) {
  .profile__block--test-session.test--result .test-result-answer-groups {
    grid-template-columns: 1fr;
  }
  .profile__block--test-session.test--result .test-session-result__summary {
    padding: 1.125rem;
  }
}
.profile__content--primary {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  width: 100%;
}
.profile__content--primary .btn-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-block: 1rem;
}
.profile__content--primary .btn-group .next-step {
  margin-left: auto;
}
.profile__content--secondary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: stretch;
  width: 100%;
}
.profile__content--row {
  display: flex;
  gap: 2.5rem;
}
.profile__block--grid {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(3rem, auto);
  align-items: start;
}
.profile__block--grid .form-grid__group {
  width: 100%;
}
.profile__block--grid .form-grid__group--half {
  grid-column: span 1;
}
.profile__block--grid .form-grid__group--full {
  grid-column: 1/span 2;
}
.profile__block--grid .form-grid__row {
  grid-column: 3;
  grid-row: 1/span 6;
  align-self: start;
  height: max-content;
}
.profile__block--grid .form-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .profile__block--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
  }
  .profile__block--grid .form-grid__group--full {
    grid-column: 1/-1;
  }
  .profile__block--grid .form-grid__row {
    grid-column: 1/-1;
    grid-row: auto;
    height: auto;
  }
}
@media (max-width: 768px) {
  .profile__block--grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .profile__block--grid .form-grid__group,
  .profile__block--grid .form-grid__group--half,
  .profile__block--grid .form-grid__group--full,
  .profile__block--grid .form-grid__row {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
.profile__info {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  max-width: 100%;
  gap: 2rem;
}
.profile__info .profile__action--edit, .profile__info .profile__action--back {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.profile__info .profile__action--edit .text, .profile__info .profile__action--back .text {
  display: flex;
  max-width: 100%;
}
.profile__info .profile__action--edit svg, .profile__info .profile__action--back svg {
  width: 100%;
  max-height: 1.5rem;
}
.profile__info .profile__action--edit svg path {
  fill: #FF7A00;
}
.profile__info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 0 calc(50% - 1.5rem);
}

.profile__info-item--full {
  flex: 0 0 100%;
}
.profile__info-item--full .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1;
  border-radius: 100px;
  background-color: #fff;
  overflow: hidden;
  color: #030305;
  font-weight: 700;
}
.profile__info-item--full .avatar-img {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 1.25em;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.profile__info-item--full .avatar--square {
  border-radius: 0;
  background-color: transparent;
}
.profile__info-item--full__welcome-card {
  grid-column: 1/3;
  grid-row: 1/4;
  padding: 1.875rem;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.profile__info-item--full__welcome-card--img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.profile__info-item--full__welcome-card .btn-app {
  margin-top: auto;
}
.profile__info-item--full__new-project {
  grid-column: 3/4;
  grid-row: 1/2;
  padding: 1.875rem;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.profile__info-item--full__new-project--add {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #7F29FA;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}
.profile__info-item--full__new-project--add::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.profile__info-item--full__balance {
  grid-column: 3/4;
  grid-row: 2/4;
  padding: 1.875rem;
  flex-direction: column;
}
.profile__info-item--full__balance--value {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 1.75rem;
  background-color: #FF7A00;
  padding: 1rem 1.875rem;
  margin-top: 1.25rem;
}
.profile__info-item--full__progress {
  grid-column: 1/2;
  grid-row: 4/7;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 360px;
}
@media (max-width: 1660px) {
  .profile__info-item--full__progress {
    min-height: initial;
    max-height: 380px;
  }
}
.profile__info-item--full__progress__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 0 1 100%;
  padding: 1rem 1.25rem;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0) 55%), linear-gradient(145deg, rgba(34, 15, 94, 0.9), rgba(10, 28, 86, 0.9));
  border-radius: 1.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-height: 260px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.profile__info-item--full__progress__list::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}
.profile__info-item--full__progress__list::-webkit-scrollbar-track {
  background: transparent;
}
.profile__info-item--full__progress__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__info-item--full__progress__list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
.profile__info-item--full__progress__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.profile__info-item--full__progress__list-item:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.profile__info-item--full__progress__bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile__info-item--full__progress__bar-track {
  display: flex;
  width: 100%;
  height: 1rem;
  border-radius: 1.75rem;
  overflow: hidden;
  background-color: #fff;
  position: relative;
}
.profile__info-item--full__progress__bar-fill {
  position: absolute;
  height: 100%;
  width: var(--progress, 0);
  background: linear-gradient(to right, yellow, #FFD700, #FFEC8B, #FF7A00);
  transition: width 1s ease-in-out;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  from {
    width: 0;
  }
  to {
    width: var(--progress);
  }
}
.profile__info-item--full__progress__bar--values {
  display: flex;
  justify-content: space-between;
}
.profile__info-item--full__statistics {
  grid-column: 2/4;
  grid-row: 4/7;
  padding: 1.875rem;
  justify-content: space-between;
}
.profile__info-item--full__statistics--item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.profile__info-item--full__statistics--item-value {
  color: #F63972;
}
.profile__info-item--full__statistics--icon-wrapper {
  display: flex;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate3d(-50%, 25%, 0);
  padding: 0.75rem;
  background-color: #7F29FA;
  border-radius: 50%;
}
.profile__info-item--full__statistics--icon {
  width: 100%;
  height: 100%;
}
.profile__info-item--full__statistics--main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile__info-item--full__statistics--description {
  padding-bottom: 0.5rem;
}
.profile__info-item--full__statistics__summary {
  display: flex;
  justify-content: space-between;
  gap: 4.125rem;
  margin-top: auto;
  background-color: #fff;
  border-radius: 1.75rem;
  padding: 1rem 1.875rem;
  position: relative;
}
.profile__info-item--full__statistics__rating {
  display: flex;
  flex-direction: column;
  flex-direction: column;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.profile__info-item--full__statistics__rating--track__progress {
  --progress: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(rgb(246, 57, 114) 0deg, rgb(255, 122, 0) calc(var(--progress) * 3.6deg), rgba(37, 37, 37, 0.75) calc(var(--progress) * 3.6deg));
}
.profile__info-item--full__statistics__rating--data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  width: 85%;
  height: 85%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
  background-color: #2b2d5a;
  border-radius: 50%;
}
.profile__info-item--full__statistics .total-score {
  margin-top: 1rem;
}
.profile__info-item--full__rating {
  grid-column: 1/4;
  grid-row: 7/8;
  padding: 1.875rem;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.profile__info-item--full__rating .rating__projects {
  margin-top: 1.5rem;
}
.profile__info-item--full__rating .rating__projects tbody {
  display: flex;
  width: 100%;
}
.profile__info-item--full__rating .rating__projects--header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-block: 0.75rem;
}
.profile__info-item--full__rating .rating__projects--header th {
  text-transform: uppercase;
}
.profile__info-item--full__rating .rating__projects .project__name {
  flex: 0 0 40%;
}
.profile__info-item--full__rating .rating__projects .project__participants {
  flex: 0 0 24%;
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participant {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 0;
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participant--captain {
  background: rgba(255, 193, 7, 0.14);
  border-color: rgba(255, 193, 7, 0.28);
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participant-avatar {
  position: relative;
  flex: 0 0 auto;
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participant-avatar .user-avatar__primary {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(34, 39, 88, 0.92);
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participant-avatar .project-team__captain-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.62rem;
}
.profile__info-item--full__rating .rating__projects .project__participants .project__participant-name {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__info-item--full__rating .rating__projects .project__views {
  flex: 0 0 10%;
}
.profile__info-item--full__rating .rating__projects .project__progress {
  flex: 0 0 10%;
}
.profile__info-item--full__rating .rating__projects .projects {
  display: flex;
  flex-direction: column;
  max-height: 50svh;
  overflow: auto;
}
.profile__info-item--full__rating .rating__projects .projects .project {
  display: flex;
  justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid #56577A;
}
.profile__info-item--full__rating .rating__projects .projects .project__name {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile__info-item--full__rating .rating__projects .projects .project__views {
  display: flex;
  justify-content: flex-start;
}
.profile__info-item--full__rating .rating__projects .projects .project__participants {
  display: flex;
}
.profile__info-item--full__rating .rating__projects .projects .project__participants img:first-child {
  background-color: transparent;
}
.profile__info-item--full__rating .rating__projects .projects .project__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.2rem;
}
.profile__info-item--full__rating .rating__projects .projects .project__progress-bar-wrapper, .profile__info-item--full__rating .rating__projects .projects .project__progress-bar {
  width: 100%;
  background-color: rgba(18, 18, 18, 0.6);
  border-radius: 1.75rem;
  height: 4px;
}
.profile__info-item--full__rating .rating__projects .projects .project__progress-bar {
  background-color: #0075FF;
  transition: width 1s ease-in-out;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  from {
    width: 0;
  }
  to {
    width: var(--progress);
  }
}
.profile__info-item--full .order-item {
  cursor: pointer;
}
.profile__info-item--full .order-item.active .profile-item__actions .toggle-icon:before {
  transform: rotate(0);
}
.profile__info-item--full .order-item.active .order-details {
  max-height: 10000px;
  padding: 1.125rem;
}
@media (min-width: 1660px) {
  .profile__info-item--full__welcome-card {
    aspect-ratio: 16/7;
  }
  .profile__info-item--full__progress {
    aspect-ratio: 16/11;
  }
}
@media (max-width: 1450px) {
  .profile__info-item--full__content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    align-items: stretch;
  }
  .profile__info-item--full__welcome-card {
    grid-column: 1/7;
    grid-row: 1/4;
    padding: 1.875rem;
    aspect-ratio: 16/6;
  }
  .profile__info-item--full__new-project {
    grid-column: 1/4;
    grid-row: 4/5;
    padding: 1.875rem;
  }
  .profile__info-item--full__balance {
    grid-column: 1/4;
    grid-row: 5/7;
    padding: 1.875rem;
  }
  .profile__info-item--full__progress {
    grid-column: 4/7;
    grid-row: 4/7;
    padding: 1.875rem;
  }
  .profile__info-item--full__statistics {
    grid-column: 1/7;
    grid-row: 8/10;
    padding: 1.875rem;
    aspect-ratio: 16/5;
  }
  .profile__info-item--full__rating {
    grid-column: 1/7;
    grid-row: 11/14;
    padding: 1.875rem;
  }
}
@media (max-width: 1180px) {
  .profile__info-item--full {
    gap: 1rem;
  }
  .profile__info-item--full.courses_show {
    padding: 1rem 0;
  }
  .profile__info-item--full:not(.courses_show) {
    padding: 1rem;
  }
  .profile__info-item--full__block, .profile__info-item--full__block--column, .profile__info-item--full__block--primary, .profile__info-item--full__block--secondary, .profile__info-item--full__block--grid {
    padding: 1.5rem;
  }
  .profile__info-item--full__info .profile__action--edit, .profile__info-item--full__info .profile__action--back {
    position: absolute;
    top: 2rem;
    right: 2rem;
  }
}
@media (max-width: 1180px) and (max-width: 1180px) {
  .profile__info-item--full__info .profile__action--edit, .profile__info-item--full__info .profile__action--back {
    top: 1.5rem;
    right: 1.5rem;
  }
}
@media (max-width: 991px) {
  .profile__info-item--full__welcome-card {
    grid-column: 1/7;
    grid-row: 1/4;
    padding: 1.875rem;
    aspect-ratio: 16/6;
  }
  .profile__info-item--full__new-project {
    grid-column: 1/7;
    grid-row: 4/5;
    padding: 1.875rem;
  }
  .profile__info-item--full__balance {
    grid-column: 1/7;
    grid-row: 5/7;
    padding: 1.875rem;
  }
  .profile__info-item--full__progress {
    grid-column: 1/7;
    grid-row: 7/10;
    padding: 1.875rem;
  }
  .profile__info-item--full__statistics {
    grid-column: 1/7;
    grid-row: 11/13;
    padding: 1.875rem;
    aspect-ratio: 16/7;
    gap: 0;
  }
  .profile__info-item--full__rating {
    grid-column: 1/7;
    grid-row: 14/16;
    padding: 1.875rem;
  }
  .profile__info-item--full__welcome-card {
    aspect-ratio: initial;
    padding: 1rem;
  }
  .profile__info-item--full__new-project, .profile__info-item--full__balance, .profile__info-item--full__progress, .profile__info-item--full__statistics, .profile__info-item--full__rating {
    padding: 1rem;
  }
}
@media (max-width: 640px) {
  .profile__info-item--full {
    gap: 0.75rem;
  }
  .profile__info-item--full.courses_show {
    padding: 0.75rem 0;
  }
  .profile__info-item--full:not(.courses_show) {
    padding: 0.75rem 0.5rem;
  }
  .profile__info-item--full__block, .profile__info-item--full__block--column, .profile__info-item--full__block--primary, .profile__info-item--full__block--secondary, .profile__info-item--full__block--grid {
    padding: 0.875rem 0.75rem;
  }
}
.profile__info-item--full .page-header__bottom {
  margin-top: 0.25rem;
}
@media (max-width: 1023px) {
  .profile__info-item--full .profile__block.page-header {
    padding: 1rem 1.25rem;
  }
}
@media (max-width: 640px) {
  .profile__info-item--full .profile__block.page-header {
    padding: 0.75rem;
  }
  .profile__info-item--full .page-header {
    gap: 0.75rem !important;
  }
  .profile__info-item--full .page-header__single-row {
    row-gap: 0.625rem;
  }
  .profile__info-item--full .page-header__top {
    gap: 0.625rem;
  }
  .profile__info-item--full .page-header__bottom {
    gap: 0.625rem;
    margin-top: 0;
  }
  .profile__info-item--full .page-header__actions, .profile__info-item--full .page-header__aside {
    gap: 0.5rem;
  }
  .profile__info-item--full .page-header .filters-bar {
    gap: 0.5rem;
    --filters-control-min-height: 32px;
  }
}

.filters-bar {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1rem);
  --form-control-padding-y: .4rem;
  --form-control-padding-x: .8rem;
  --filters-control-icon-space: 2.35rem;
  --filters-control-min-height: clamp(36px, calc(2rem + .45vw), 42px);
}
.filters-bar > .filters-bar__item {
  display: flex;
  flex: 0 1 100%;
  min-width: 0;
}
.filters-bar > .filters-bar__item input, .filters-bar > .filters-bar__item select {
  height: 100%;
}
.filters-bar .filter-search-form,
.filters-bar .filter-select-form {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
}
.filters-bar .input--search,
.filters-bar .custom-select,
.filters-bar .token-select,
.filters-bar .token-select__control {
  width: 100%;
  min-height: var(--filters-control-min-height, 44px);
  box-sizing: border-box;
}
.filters-bar .form-grid__group--icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.filters-bar .form-grid__group {
  margin: 0;
  position: relative;
  width: 100%;
}
.filters-bar .custom-select {
  appearance: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: var(--form-control-padding-y) calc(var(--form-control-padding-x) + var(--filters-control-icon-space)) var(--form-control-padding-y) var(--form-control-padding-x);
  font-size: var(--form-control-font-size);
  line-height: var(--form-control-line-height);
}
.filters-bar .input--search {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: var(--form-control-padding-y) calc(var(--form-control-padding-x) + var(--filters-control-icon-space)) var(--form-control-padding-y) var(--form-control-padding-x);
  font-size: var(--form-control-font-size);
  line-height: var(--form-control-line-height);
}
.filters-bar .token-select__control {
  padding-right: calc(var(--form-control-padding-x) + var(--filters-control-icon-space));
}
.filters-bar .filters-bar__item--mobile-action {
  display: none;
  flex: 0 0 auto;
}
.filters-bar .filters-bar__mobile-action {
  min-width: 44px;
  padding-inline: 0.9rem;
}
@media (max-width: 980px) {
  .filters-bar {
    gap: 0.9rem;
  }
}
@media (max-width: 640px) {
  .filters-bar {
    gap: 0.625rem;
  }
  .filters-bar--compact-mobile {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .filters-bar--compact-mobile > .filters-bar__item--search {
    flex: 1 1 0;
  }
  .filters-bar--compact-mobile > .filters-bar__item--mobile-action {
    display: flex;
    width: auto;
  }
  .filters-bar--compact-mobile > .filters-bar__item--select {
    flex: 1 1 100%;
    width: 100%;
  }
  .filters-bar .filters-bar__mobile-action {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 14px;
  }
  .filters-bar .filters-bar__mobile-action .compact-create-button__label {
    display: none;
  }
}
@media (max-width: 980px) {
  .filters-bar__block--header {
    gap: 1rem;
  }
  .filters-bar__welcome-card {
    aspect-ratio: 16/6;
  }
}
@media (max-width: 768px) {
  .filters-bar__block--header {
    gap: 0.5rem;
  }
  .filters-bar .projects__header .btn__add {
    margin-left: auto;
  }
  .filters-bar .projects__header .list-items__dropdown {
    margin-left: initial;
    order: 2;
    flex: 0 0 60%;
  }
}
@media (max-width: 620px) {
  .filters-bar__info .profile__action--edit, .filters-bar__info .profile__action--back {
    padding-inline: 0.75rem;
  }
  .filters-bar__info .text {
    display: none;
  }
  .filters-bar__info-item {
    flex: 0 0 100%;
  }
  .filters-bar__welcome-card {
    aspect-ratio: 16/8;
  }
  .filters-bar .entities {
    grid-template-columns: initial;
  }
  .filters-bar .entities .entity-card--blue {
    margin-bottom: 1rem;
  }
}
@media (max-width: 540px) {
  .filters-bar__statistics {
    flex-direction: column;
    gap: 2rem;
    aspect-ratio: initial;
  }
  .filters-bar__statistics__rating {
    max-width: 50%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 420px) {
  .filters-bar__welcome-card {
    aspect-ratio: 16/9;
  }
}

.profile-content-container {
  flex: 0 1 100%;
}
.profile-content-container--default {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-content-container--grid-middle {
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  gap: 0.5rem;
}
.profile-content-container--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.profile-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 1.75rem;
  height: fit-content;
}
.profile-item *:not(.btn-app):not(.profile-item__status) {
  color: #1E1D30;
}
.profile-item--grid-middle {
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  gap: 0.5rem;
}
.profile-item--grid-middle .entity-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.125rem;
}
.profile-item--grid-middle .entity-column__items {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.profile-item--grid-middle .entity-column__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.profile-item--grid-middle .entity-column__item .icon {
  min-width: 24px;
}
.profile-item--grid-middle .entity-column__item.address {
  align-items: flex-start;
  max-width: 50%;
}
.profile-item--grid-middle .entity-column__item.messengers {
  display: flex;
  gap: 1rem;
}
.profile-item--grid-middle .entity-column__item.messengers a {
  width: 10%;
  aspect-ratio: 1/1;
}
.profile-item--grid-middle .entity-column__item.messengers a .icon {
  width: 100%;
  height: 100%;
}
.profile-item__actions, .profile-item__section {
  display: flex;
  flex: 0 1 auto;
  padding: 1.125rem;
}
.profile-item__actions {
  gap: 1rem;
  align-items: center;
}
.profile-item__action.toggle-icon {
  width: 1.5rem;
  height: 0.25rem;
  background-color: #2832f5;
  position: relative;
  margin-left: auto;
}
.profile-item__action.toggle-icon:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.25rem;
  background-color: #2832f5;
  transition: transform 0.3s ease-in-out;
  transform: rotate(90deg);
}
.profile-item__status {
  border-radius: 0.75rem;
  padding: 0.375rem 0.625rem;
  color: #fff;
}
.profile-item .status--processing {
  background-color: #FFA500;
}
.profile-item .status--completed {
  background-color: #03D018;
}
.profile-item .status--cancelled {
  background-color: #A9A9A9;
}
.profile-item .status--in_delivery {
  background-color: #2630f5;
}
.profile-item__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 2px solid #030305;
}
.profile-item__section:last-child {
  border-bottom: 0;
}
.profile-item .product {
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}
.profile-item .product__image-wrapper {
  flex: 0 1 20%;
  border-radius: 1.75rem;
  border: 1px solid #030305;
  overflow: hidden;
  padding: 1.125rem 2rem;
}
.profile-item .product__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.profile-item .product__details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.profile-item .product__count {
  display: flex;
  width: fit-content;
  height: fit-content;
  border: 1px solid #030305;
  border-radius: 1rem;
  padding: 0.5rem 1.2rem;
  margin-left: auto;
}
.profile-item .order-details {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.125rem;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.profile-item .order-details__section {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}
.profile-item .order-details__section:nth-last-child(1) {
  flex-direction: column;
}
.profile-item .order-details__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-item .order-details__info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-test__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(4.25rem, 9vw, 6rem) clamp(1rem, 6vw, 6rem) clamp(2rem, 6vw, 4rem);
  position: relative;
  min-height: 0;
  overflow: visible;
}
.user-test__content .progress-bar {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
.user-test__content .question, .user-test__content .question__single-choice, .user-test__content .question__multiple-choice {
  width: 100%;
  min-width: 0;
}
.user-test__content .question-text, .user-test__content .question__text, .user-test__content .answer__value {
  overflow-wrap: anywhere;
}
.user-test__content .question-text figure,
.user-test__content .question__text figure {
  max-width: 100% !important;
  margin: 1rem 0 0 !important;
}
.user-test__content .question-text img,
.user-test__content .question__text img {
  display: block;
  width: min(100%, 30rem) !important;
  max-width: 100% !important;
  max-height: min(45svh, 24rem) !important;
  height: auto !important;
  margin: 1rem auto 0;
  border-radius: 1.25rem;
  object-fit: contain;
  object-position: center;
}
.user-test__content .answers {
  min-width: 0;
}
.user-test__content .action__next-question {
  width: min(100%, 20rem);
  margin: 0 auto;
}
.user-test__analysis {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 1rem;
}
.user-test__analysis .title-medium {
  padding-bottom: 15%;
}
.user-test__analysis .loader-ai {
  aspect-ratio: 1/1;
  height: 15%;
  bottom: 10%;
}
@media (max-width: 620px) {
  .user-test__content {
    padding: clamp(4rem, 12vw, 5rem) 1rem 1.5rem;
  }
}
@media (max-width: 468px) {
  .user-test__content {
    gap: 1.25rem;
  }
}

.support__block {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
.support__block .support__info {
  grid-column: 1/3;
}
.support__block .support__contact {
  grid-column: 3/6;
}
.support__block .support__contact a:not(.btn-app) {
  color: #FF7A00;
}
.support__block .support__contact .btn-app {
  width: 100%;
}
@media (max-width: 768px) {
  .support__block .support__info {
    grid-column: 1/6;
    grid-row: 1/3;
  }
  .support__block .support__contact {
    grid-column: 1/6;
    grid-row: 3/4;
  }
}

.profile__info--two-col {
  display: grid;
  grid-template-columns: clamp(120px, 18vw, 180px) 1fr;
  gap: 2rem;
  align-items: start;
}

.profile__edit-form .profile__info--two-col {
  grid-template-columns: minmax(19rem, 20rem) minmax(0, 1fr);
  gap: 2.5rem;
}
.profile__edit-form .profile__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.profile__edit-form .profile__fields .profile__info-item {
  min-width: 0;
}
.profile__edit-form .profile__fields .profile__info-item--wide {
  grid-column: 1/-1;
}

.profile__edit-form {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  width: 100%;
}

.profile__info-col--avatar {
  grid-column: 1;
  min-width: 0;
}

.profile__info-col--fields {
  grid-column: 2;
  min-width: 0;
}

.profile__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.profile__fields .profile__info-item {
  flex: 0 0 calc(50% - 1.5rem);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile__fields .form-control--invalid {
  border-color: rgba(255, 107, 107, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.3);
}
.profile__fields .profile__field-recovery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  margin-top: 0.1rem;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.26);
}
.profile__fields .profile__field-recovery-text {
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.profile__fields .profile__field-recovery-value {
  color: #ffd479;
  font-weight: 700;
}
.profile__fields .profile__field-recovery-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 193, 7, 0.55);
  background: rgba(255, 193, 7, 0.16);
  color: #ffd479;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.profile__fields .profile__field-recovery-btn:hover {
  background: rgba(255, 193, 7, 0.28);
  transform: translateY(-1px);
}
.profile__fields .profile__field-recovery-btn:focus-visible {
  outline: 2px solid rgba(255, 193, 7, 0.6);
  outline-offset: 2px;
}
.profile__fields .profile__info-item.is-restored .profile__field-recovery {
  display: none;
}

.achievement-image-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #fff;
}

.achievement-image-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.achievement-image-field__title {
  color: rgba(255, 255, 255, 0.94);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.achievement-image-field__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.achievement-image-field__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.5;
}

.achievement-image-preview {
  width: 100%;
}

.achievement-image-preview__media,
.achievement-image-preview__empty {
  min-height: 15rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(120% 120% at 50% 0%, rgba(82, 161, 255, 0.18), rgba(255, 255, 255, 0.04) 56%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 36px rgba(0, 0, 0, 0.22);
}

.achievement-image-preview__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
}

.achievement-image-preview__image {
  display: block;
  width: min(100%, 13.5rem);
  height: auto;
  max-height: 13.5rem;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.26));
}

.achievement-image-preview__delete {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.achievement-image-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.5rem;
  text-align: center;
}

.achievement-image-preview__empty-icon {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.achievement-image-preview__empty-icon:before, .achievement-image-preview__empty-icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 0.1875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}
.achievement-image-preview__empty-icon:before {
  transform: translate(-50%, -50%);
}
.achievement-image-preview__empty-icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.achievement-image-preview__empty-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.achievement-image-preview__empty-text {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.875rem;
  line-height: 1.45;
}

.achievement-image-uploader {
  width: 100%;
}

.profile__edit-form .achievement-image-uploader__button {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.875rem 1rem;
  border-radius: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg, rgba(38, 48, 245, 0.26), rgba(255, 255, 255, 0.05));
  color: #fff;
  cursor: pointer;
  opacity: 1;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.profile__edit-form .achievement-image-uploader__button:hover {
  border-color: rgba(130, 161, 255, 0.72);
  background: linear-gradient(135deg, rgba(38, 48, 245, 0.38), rgba(255, 255, 255, 0.08));
  transform: translateY(-1px);
}

.achievement-image-uploader__icon {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.achievement-image-uploader__icon:before, .achievement-image-uploader__icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 0.1875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}
.achievement-image-uploader__icon:before {
  transform: translate(-50%, -50%);
}
.achievement-image-uploader__icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.achievement-image-uploader__content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.achievement-image-uploader__title {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
}

.achievement-image-uploader__note {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.profile__value {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.profile__info-item--citizenship-status {
  flex: 1 1 100%;
  min-width: 100%;
}

.profile__citizenship-status {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.profile__citizenship-status:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  background: rgba(148, 163, 184, 0.7);
}

.profile__citizenship-status-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.profile__citizenship-status-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
}

.profile__citizenship-status-title {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
}

.profile__citizenship-status-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
}

.profile__citizenship-status-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
}

.profile__citizenship-status--ru:before {
  background: linear-gradient(180deg, #22D3EE, #3B82F6);
}

.profile__citizenship-status--other:before {
  background: linear-gradient(180deg, #FACC15, #F97316);
}

.profile__citizenship-status--pending:before {
  background: linear-gradient(180deg, #818CF8, #3B82F6);
}

.profile__citizenship-status--rejected:before {
  background: linear-gradient(180deg, #FB7185, #EF4444);
}

.profile__citizenship-status--needs_review:before {
  background: linear-gradient(180deg, #FBBF24, #F97316);
}

.profile__citizenship-status-badge--ru {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.34);
  color: #dff6ff;
}

.profile__citizenship-status-badge--other,
.profile__citizenship-status-badge--needs_review {
  background: rgba(250, 204, 21, 0.14);
  border-color: rgba(250, 204, 21, 0.32);
  color: #fff4c2;
}

.profile__citizenship-status-badge--pending {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.34);
  color: #dbeafe;
}

.profile__citizenship-status-badge--rejected {
  background: rgba(255, 49, 49, 0.18);
  border-color: rgba(255, 49, 49, 0.32);
  color: rgb(255, 190, 190);
}

.profile__citizenship-status-badge--empty {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(255, 255, 255, 0.7);
}

.profile__citizenship-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.profile__citizenship-badge--ru {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.34);
  color: #dff6ff;
}

.profile__citizenship-badge--other {
  background: rgba(250, 204, 21, 0.14);
  border-color: rgba(250, 204, 21, 0.32);
  color: #fff4c2;
}

.profile__citizenship-badge--empty {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.24);
  color: rgba(255, 255, 255, 0.68);
}

.profile__citizenship-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
  margin-top: 0.25rem;
}
.profile__citizenship-form .text-hint {
  grid-column: 1/-1;
  margin: 0;
}

@media (max-width: 640px) {
  .profile__citizenship-form {
    grid-template-columns: 1fr;
  }
  .profile__citizenship-form .btn-app {
    width: 100%;
  }
  .profile__citizenship-status {
    flex-direction: column;
  }
  .profile__citizenship-status-badge {
    align-self: flex-start;
  }
}
.profile__experience-form {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0) 58%), linear-gradient(145deg, rgba(7, 9, 28, 0.9), rgba(12, 18, 52, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profile__experience-form-header {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.profile__experience-form-header h3, .profile__experience-form-header p {
  margin: 0;
}

.profile__experience-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
@media (max-width: 980px) {
  .profile__experience-cols {
    grid-template-columns: 1fr;
  }
}

.profile__experience-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem;
  border-radius: 1.25rem;
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 60%), linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}
.profile__experience-col h4 {
  margin: 0;
}

.profile__actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile__info--two-col .profile__actions-row {
  grid-column: 2;
  justify-self: end;
}
@media (max-width: 980px) {
  .profile__info--two-col .profile__actions-row {
    grid-column: 1/-1;
    justify-self: start;
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .profile__info--two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .profile__edit-form .profile__info--two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .profile__edit-form .profile__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile__info-col--avatar {
    grid-column: 1;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .profile__info-col--fields {
    grid-column: 1;
  }
  .profile__fields {
    gap: 1.25rem;
  }
  .profile__fields .profile__info-item {
    flex: 1 1 calc(50% - 1.25rem);
    min-width: 220px;
  }
  .profile__edit-form .profile__fields {
    gap: 1.25rem;
  }
  .profile__edit-form .profile__fields .profile__info-item {
    min-width: 0;
  }
  .profile__avatar-hint {
    max-width: 28rem;
    text-align: center;
  }
  .profile__block--transparent {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .profile__block--transparent .ui-donut {
    flex: 1 1 auto;
    width: 100%;
  }
}
@media (max-width: 640px) {
  .profile__fields .profile__info-item {
    flex: 1 1 100%;
    min-width: 0;
  }
  .profile__edit-form .profile__fields {
    grid-template-columns: 1fr;
  }
  .profile__edit-form .profile__fields .profile__info-item {
    min-width: 0;
  }
  .profile__info--two-col .profile__actions-row {
    width: 100%;
    justify-content: stretch;
  }
  .profile__info--two-col .profile__actions-row .btn-app {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 1023px) {
  .profile {
    padding-top: calc(var(--profiles-header-height, 0px) + 0.75rem);
  }
  .profile .filters-bar {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, calc(100vw - 3rem));
    gap: 1rem;
  }
}
.test-attempts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  padding-top: 0.5rem;
}
.test-attempts__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.test-attempts__title {
  margin: 0;
}
.test-attempts__count {
  color: rgba(255, 255, 255, 0.65);
}
.test-attempts__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.test-attempts__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.test-attempts__item:hover {
  border-color: rgba(255, 122, 0, 0.5);
  background: rgba(255, 122, 0, 0.08);
  transform: translateY(-1px);
}
.test-attempts__item.is-active {
  border-color: rgba(255, 122, 0, 0.65);
  background: rgba(255, 122, 0, 0.12);
}
.test-attempts__item-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.test-attempts__item-title {
  font-weight: 600;
}
.test-attempts__item-meta {
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: anywhere;
}
.test-attempts__item-current {
  color: #FF7A00;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .test-attempts__item {
    flex-direction: column;
    align-items: flex-start;
  }
  .test-attempts__item-current {
    white-space: normal;
  }
}

.test-editor__limits {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.test-editor .btn-app.is-disabled {
  opacity: 0.55;
  filter: saturate(0.7);
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .profile {
    gap: 0.75rem;
    padding: calc(var(--profiles-header-height, 0px) + 0.75rem) calc(0.5rem + env(safe-area-inset-right, 0px)) calc(6.5rem + env(safe-area-inset-bottom, 0px)) calc(0.5rem + env(safe-area-inset-left, 0px));
  }
  .profile__block--test-session {
    padding: 0.875rem;
  }
  .profile__block--test-session.test--result .test-session-result__summary {
    width: 100%;
  }
  .profile__block--test-session.test--result .test-result-answer-group {
    padding: 0.875rem 1rem;
  }
  .profile__block--test-session.test--result .test-result-answer-value {
    padding: 0.875rem 0.95rem;
  }
  .test-attempts {
    gap: 0.875rem;
    padding-top: 0;
    padding-bottom: 0.25rem;
  }
  .test-attempts__list {
    gap: 0.625rem;
  }
  .test-attempts__item {
    padding: 0.875rem 1rem;
  }
}
.profiles .page-header__single-row {
  align-items: center;
}
.profiles .page-header__left {
  align-items: center;
}
.profiles .page-header__titles {
  justify-content: center;
  gap: 0.35rem;
  min-height: 0;
}
.profiles .page-header__title {
  display: block;
  margin: 0;
  line-height: 1.08;
}
@media (max-width: 768px) {
  .profiles .page-header__single-row {
    align-items: center;
    row-gap: 0.75rem;
  }
  .profiles .page-header__left {
    width: 100%;
    align-items: center;
  }
  .profiles .page-header__titles {
    width: 100%;
  }
  .profiles .page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.profile-bottom-nav {
  display: none;
  --profile-bottom-nav-items-count: 4;
}

@media (max-width: 768px) {
  .profile-bottom-nav {
    display: flex;
    justify-content: center;
    position: fixed;
    left: calc(clamp(0.9rem, 3.5vw, 2.5rem) + env(safe-area-inset-left, 0px));
    right: calc(clamp(0.9rem, 3.5vw, 2.5rem) + env(safe-area-inset-right, 0px));
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
    pointer-events: none;
  }
  .profile-bottom-nav__inner {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: repeat(var(--profile-bottom-nav-items-count, 4), minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.3rem;
    border-radius: 1.6rem;
    background: rgba(10, 10, 14, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    overflow: hidden;
    pointer-events: auto;
  }
  .profile-bottom-nav__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 1.3rem;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
    will-change: transform, width, height;
  }
  .profile-bottom-nav__indicator.is-instant {
    transition: none;
  }
  .profile-bottom-nav__item {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.15rem;
    min-height: 3.1rem;
    min-width: 0;
    padding: 0.3rem 0.4rem;
    border-radius: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.22s ease, transform 0.22s ease;
  }
  .profile-bottom-nav__item:active {
    transform: scale(0.98);
  }
  .profile-bottom-nav__item.active {
    color: #4f8dff;
  }
  .profile-bottom-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.4rem;
  }
  .profile-bottom-nav__icon-mask {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    background-color: currentColor;
    -webkit-mask: var(--nav-icon) center/contain no-repeat;
    mask: var(--nav-icon) center/contain no-repeat;
    transition: background-color 0.22s ease, transform 0.22s ease;
  }
  .profile-bottom-nav__label {
    font-size: 0.66rem;
    line-height: 1.1;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }
}
@media (min-width: 769px) {
  .profile-bottom-nav {
    display: none !important;
  }
}
body:has(#profile.conversations_index) .profile-bottom-nav {
  display: none !important;
}

.methodic-materials-page .page-header--methodic-materials .page-header__top {
  align-items: center;
  gap: 1rem;
}
.methodic-materials-page .page-header--methodic-materials .page-header__titles {
  min-width: 0;
}
.methodic-materials-page .page-header--methodic-materials .page-header__actions {
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.methodic-materials-page__access-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  gap: 0;
  border-radius: 14px;
}
.methodic-materials-page__access-btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.methodic-materials-page__access-btn img {
  width: 20px;
  height: 20px;
}
@media (max-width: 768px) {
  .methodic-materials-page .page-header--methodic-materials .page-header__top {
    align-items: stretch;
  }
  .methodic-materials-page .page-header--methodic-materials .page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.methodic-material-item {
  align-items: center;
  gap: 1rem;
  min-height: 104px;
}
.methodic-material-item .list__item__media {
  display: flex;
  align-items: center;
  align-self: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  margin: 0;
  margin-block: 0;
  border-radius: 20px;
  background: transparent;
  border: 0;
}
.methodic-material-item .list__item__media .list__item__media-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.methodic-material-item .list__item__media .list__item__media-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 0.2rem;
}
.methodic-material-item .list__item__main {
  margin-left: 0;
  min-width: 0;
  padding-right: 0.25rem;
}
.methodic-material-item__info {
  gap: 0.4rem;
  min-width: 0;
}
.methodic-material-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-width: 100%;
}
.methodic-material-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: rgba(176, 183, 201, 0.9);
  font-size: 0.875rem;
  line-height: 1.25;
}
.methodic-material-item__status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.methodic-material-item__status--locked {
  color: #ffd479;
}
.methodic-material-item__status--locked::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.35rem;
  vertical-align: text-bottom;
  background: url(/assets/shared/icons/lock-strong-6b7312f213d83cb6cb3f2a8f6e5e63e0cbe9cf9b8058ec4cfac0b771e423526f.svg) center/contain no-repeat;
}
.methodic-material-item__actions {
  gap: 0.625rem;
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
}
.methodic-material-item__action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 42px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.methodic-material-item__action img, .methodic-material-item__action svg {
  width: 18px;
  height: 18px;
}
.methodic-material-item__lock {
  position: relative;
  top: auto;
  right: auto;
  margin-left: 0.25rem;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .methodic-material-item {
    align-items: center;
    gap: 0.75rem;
    padding-right: 0;
  }
  .methodic-material-item .list__item__main {
    width: auto;
    flex: 1 1 auto;
    padding-right: 0;
  }
  .methodic-material-item .list__item__media {
    display: none;
  }
  .methodic-material-item__actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .methodic-material-item__action {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .methodic-material-item__action img, .methodic-material-item__action svg {
    width: 16px;
    height: 16px;
  }
  .methodic-material-item__lock {
    width: 28px;
    height: 28px;
    margin-left: 0;
  }
  .methodic-material-item__lock .list__item-lock-icon {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 1180px) {
  .profile .profile__block,
  .profile .profile__block--column,
  .profile .profile__block--primary,
  .profile .profile__block--secondary,
  .profile .profile__block--grid {
    padding: 1.5rem;
  }
}
@media (max-width: 1024px) {
  .profile .profile__block,
  .profile .profile__block--column,
  .profile .profile__block--primary,
  .profile .profile__block--secondary,
  .profile .profile__block--grid {
    padding: 1rem;
    border-radius: 1.5rem;
  }
  .profile .profile__block.page-header {
    padding: 1rem 1.25rem;
  }
}
@media (max-width: 640px) {
  .profile .profile__block,
  .profile .profile__block--column,
  .profile .profile__block--primary,
  .profile .profile__block--secondary,
  .profile .profile__block--grid {
    padding: 0.875rem 0.75rem;
    border-radius: 1.125rem;
  }
  .profile .profile__block.page-header {
    padding: 0.75rem;
    border-radius: 1.125rem;
  }
}
.profile--data .btn-archived-courses {
  width: 100%;
}
.profile--data .btn-archived-courses turbo-frame {
  width: fit-content;
}
.profile--data .profile__block--primary {
  gap: 2rem;
}

.test-results-page {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.test-results-page::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.test-results-page::-webkit-scrollbar-track {
  background: transparent;
}
.test-results-page::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.test-results-page::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.test-results-page::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.test-results-page::-webkit-scrollbar-corner {
  background: transparent;
}
.test-results-page::-webkit-scrollbar-button, .test-results-page::-webkit-scrollbar-button:single-button, .test-results-page::-webkit-scrollbar-button:vertical:decrement, .test-results-page::-webkit-scrollbar-button:vertical:increment, .test-results-page::-webkit-scrollbar-button:horizontal:decrement, .test-results-page::-webkit-scrollbar-button:horizontal:increment, .test-results-page::-webkit-scrollbar-button:start:decrement, .test-results-page::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}

.test-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.test-results__header {
  grid-column: 1/3;
  grid-row: 1/3;
  padding: 1.875rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.9fr);
  gap: 1.5rem;
  align-items: stretch;
}
.test-results__header-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-width: 0;
}
.test-results__header-side {
  display: flex;
  min-width: 0;
}
.test-results__image-card, .test-results__status-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 1.875rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.test-results__status-card {
  justify-content: center;
}
.test-results__status-loader {
  margin-top: auto;
  max-width: 6rem;
}
.test-results .test-results__image--wrapper {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  border-radius: 1.25rem;
}
.test-results .test-results__image--wrapper .test-results__image {
  width: 100%;
  height: 100%;
  position: relative;
  object-fit: contain;
  z-index: 1;
}
.test-results .test-results__image--wrapper .test-results__image--background {
  position: absolute;
  inset: 0;
  width: 126%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  transform: rotate(-20deg);
}
.test-results .test-results__people {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.test-results__offer--courses {
  grid-column: 3/5;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(130deg, #FF7A00 16.68%, #FB4343 69.36%);
}
.test-results__offer--courses a {
  width: 100%;
}
.test-results__offer--course {
  grid-column: 3/5;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.875rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 29, 126, 0.94), rgba(21, 24, 106, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1.25rem 2.5rem rgba(8, 10, 43, 0.24);
}
.test-results__offer--course-media {
  min-width: 0;
  min-height: 0;
  min-block-size: clamp(16rem, 36vw, 24rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1rem 1rem 0.5rem;
  border-radius: 1.375rem;
  background: radial-gradient(circle at 18% 22%, rgba(106, 119, 255, 0.38), rgba(106, 119, 255, 0) 48%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.test-results__offer--course-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: clamp(14rem, 34vw, 22rem);
  object-fit: contain;
  object-position: center center;
  display: block;
}
.test-results__offer--course-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  letter-spacing: 0.01em;
}
.test-results__offer--course__description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}
.test-results__offer--course__description h3 {
  margin: 0;
  max-width: 24rem;
}
.test-results__offer--course__description p {
  padding: 0;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.5;
}
.test-results__offer--course__description .btn-app {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.test-results__title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  min-width: 0;
  height: 100%;
}
.test-results__title-heading, .test-results__title-copy {
  min-width: 0;
}
.test-results__title h1,
.test-results__title p {
  max-width: 100%;
}
.test-results__subtitle {
  color: rgba(255, 255, 255, 0.9);
}
.test-results .test-purpose__cards {
  padding-block: 2rem;
}
@media (min-width: 1450px) {
  .test-results .test-purpose__cards .test-purpose__card--dark:nth-child(2) {
    grid-row: 1/8;
  }
}
.test-results__analysis {
  grid-column: 1/5;
  grid-row: 4/10;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.test-results__analysis-title {
  margin: 0;
}
.test-results__analysis-grid {
  display: grid;
  grid-template-columns: minmax(26rem, 1.35fr) minmax(18rem, 0.85fr);
  gap: 2rem;
  align-items: stretch;
}
.test-results__competencies {
  position: relative;
  min-width: 0;
  min-height: clamp(28rem, 40vw, 42rem);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.test-results__competencies canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}
.test-results__bars {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.test-results__recommendation {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.test-results__recommendation-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.test-results__recommendation-text ul, .test-results__recommendation-text ol {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.test-results__recommendation-text li {
  list-style: disc;
  list-style-position: outside;
}
.test-results__recommendation-text h3 {
  margin: 0.25rem 0 0;
}
.test-results .course__recommendation {
  grid-column: 1/5;
}
.test-results .support__block {
  grid-column: 1/5;
  grid-row: 11/13;
}

.test-results-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 0.25rem;
  text-align: center;
}
.test-results-pending__loader {
  position: relative;
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto;
}
.test-results-pending__lead {
  max-width: 26rem;
}
.test-results-pending__message {
  max-width: 22rem;
  color: rgba(255, 255, 255, 0.74);
}

.modal.modal--test-results-pending {
  z-index: 120;
}
.modal.modal--test-results-pending .modal__content {
  max-width: 28rem;
}
.modal.modal--test-results-pending .modal__body {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

@media (max-width: 1180px) {
  .test-results__header {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
  .test-results__offer--course {
    grid-template-columns: 1fr;
  }
  .test-results__offer--course-media {
    min-block-size: 18rem;
  }
  .test-results__offer--course-image {
    max-height: 18rem;
  }
  .test-results__offer--course__description {
    padding: 1.25rem 1rem 1rem;
  }
  .test-results__analysis-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (max-width: 768px) {
  .profile {
    gap: 0.625rem;
  }
  .test-results__header {
    grid-row: 1/auto;
    grid-column: 1/5;
    gap: 1rem;
    padding: 1rem;
  }
  .test-results__header-main {
    gap: 1.25rem;
  }
  .test-results__title {
    gap: 1.25rem;
  }
  .test-results__image-card, .test-results__status-card {
    padding: 1rem;
  }
  .test-results__offer--courses, .test-results__offer--course {
    grid-column: 1/5;
    grid-row: auto;
  }
  .test-results__offer--course {
    padding: 0.625rem;
  }
  .test-results__offer--course-media {
    min-block-size: 15rem;
  }
  .test-results__offer--course-image {
    max-height: 15rem;
  }
  .test-results__offer--course__description {
    padding: 1rem 0.875rem 0.875rem;
  }
  .test-results__analysis {
    grid-row: auto;
    padding: 1rem;
  }
  .test-results__competencies {
    min-height: clamp(22rem, 92vw, 34rem);
    padding: 0.5rem;
  }
  .test-results__competencies canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
  }
  .test-results .test-purpose__cards {
    padding: 0;
  }
  .test-results .support__block {
    grid-row: auto;
  }
  .test-results .support__info,
  .test-results .support__contact,
  .test-results .course__recommendation .page-header, .test-results__offer--courses, .test-results__recommendation, .test-results__analysis {
    padding: 1rem;
  }
}
@media (max-width: 568px) {
  .test-results-page {
    overflow-x: clip;
  }
  .test-results {
    gap: 0.625rem;
  }
  .test-results__header {
    padding: 0.75rem;
  }
  .test-results__image-card, .test-results__status-card {
    border-radius: 1.25rem;
  }
  .test-results__offer--courses {
    padding: 0.875rem;
  }
  .test-results__offer--course {
    padding: 0.5rem;
  }
  .test-results__offer--course-media {
    border-radius: 1.125rem;
  }
  .test-results__offer--course-media {
    min-block-size: 13rem;
    padding: 0.75rem;
  }
  .test-results__offer--course-image {
    max-height: 13rem;
  }
  .test-results__offer--course__description {
    gap: 0.75rem;
    padding: 0.875rem 0.75rem 0.75rem;
  }
  .test-results__offer--course__description h3 {
    font-size: 1.625rem;
  }
  .test-results .test-results__image--wrapper {
    min-height: 13rem;
  }
  .modal.modal--test-results-pending .modal__content {
    width: calc(100vw - 2rem);
    max-width: none;
  }
}
.profile__content--secondary .project__button {
  cursor: pointer;
}
.profile__content--secondary .project-launch {
  grid-column: 1/5;
  grid-row: 1/6;
  padding: 1.875rem;
  flex-direction: column;
  gap: 0;
  aspect-ratio: 6/5;
  position: relative;
  padding: 0;
  overflow: initial;
}
.profile__content--secondary .project-launch__actions {
  flex: 0 0 10%;
}
.profile__content--secondary .project-launch__preview {
  position: relative;
  flex: 0 0 90%;
  border-radius: 1.75rem 1.75rem 0 0;
  overflow: hidden;
}
.profile__content--secondary .project-launch__preview--project, .profile__content--secondary .project-launch__preview--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile__content--secondary .project-launch__preview .image--not {
  object-fit: contain;
}
.profile__content--secondary .project-launch__preview .project-launch__start-button--wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7607843137);
  border-radius: 50%;
  transition: box-shadow 0.3s ease-in-out;
  padding: 1.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
@media (hover: hover) and (pointer: fine) {
  .profile__content--secondary .project-launch__preview .project-launch__start-button--wrapper:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
.profile__content--secondary .project-launch__actions {
  display: flex;
  align-items: center;
  padding-inline: 1.5rem;
  gap: 1.25rem;
  height: 100%;
}
.profile__content--secondary .project-launch__actions .project__button {
  max-height: 1.5rem;
  aspect-ratio: 1/1;
}
.profile__content--secondary .project-launch__actions .project__button img {
  width: 100%;
  height: 100%;
}
.profile__content--secondary .project-launch__fullscreen-button {
  margin-left: auto;
}
.profile__content--secondary .project-info {
  grid-column: 5/7;
  grid-row: 1/2;
  padding: 1.875rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
}
.profile__content--secondary .project-info__team {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile__content--secondary .project-info__team--highlighted {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.profile__content--secondary .project-info__team-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.profile__content--secondary .project-info__team-heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.profile__content--secondary .project-info__team-title {
  font-size: 1.75rem;
  line-height: 1.1;
  color: #fff;
}
.profile__content--secondary .project-info__team-note {
  color: rgba(255, 255, 255, 0.62);
}
.profile__content--secondary .project-info__team-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}
.profile__content--secondary .project-info__team-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  white-space: nowrap;
}
.profile__content--secondary .project-info__team-members {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.profile__content--secondary .project-info__team-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.profile__content--secondary .project-info__team-member--captain {
  background: rgba(255, 193, 7, 0.12);
  border-color: rgba(255, 193, 7, 0.28);
}
.profile__content--secondary .project-info__team-avatar {
  position: relative;
  flex: 0 0 auto;
}
.profile__content--secondary .project-info__team-avatar .project-team__captain-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.3rem;
}
.profile__content--secondary .project-info__team-member-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.profile__content--secondary .project-info__team-member-name, .profile__content--secondary .project-info__team-member-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content--secondary .project-info__stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.profile__content--secondary .project-info__stats .stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background-color: rgba(74, 74, 74, 0.42);
  border-radius: 100px;
  transition: background-color 0.3s ease-in-out;
}
.profile__content--secondary .project-info__stats .stat .icon path {
  transition: fill 0.3s ease-in-out;
}
.profile__content--secondary .project-info__likes {
  color: rgb(235, 60, 114);
}
@media (hover: hover) and (pointer: fine) {
  .profile__content--secondary .project-info__likes:hover {
    color: rgba(235, 60, 114, 0.42);
    background: rgba(235, 60, 114, 0.42);
  }
}
.profile__content--secondary .project-info .likes--active {
  color: rgb(235, 60, 114);
  background: rgb(235, 60, 114);
}
.profile__content--secondary .project-info .likes--active .icon path {
  fill: #fff;
}
.profile__content--secondary .project-info .project--delete {
  width: 100%;
}
.profile__content--secondary .project-info .project--delete-icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  aspect-ratio: 1/1;
  flex: 0 0 42px;
  align-self: flex-start;
}
.profile__content--secondary .project-info .project--delete-icon .icon {
  width: 18px;
  height: 18px;
}
.profile__content--secondary .project-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.profile__content--secondary .project-section__header .profile__block--title {
  margin: 0;
  min-width: 0;
}
.profile__content--secondary .project-section__header .entity-edit {
  margin-left: 0;
  flex: 0 0 auto;
  line-height: 0;
}
.profile__content--secondary .project-section__header .entity-edit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.profile__content--secondary .project-section__header .entity-edit button .icon {
  width: 2rem;
  height: 2rem;
}
.profile__content--secondary .project-instructions {
  grid-column: 5/7;
  grid-row: 2/6;
  padding: 1.875rem;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.profile__content--secondary .project-instructions .project-categories__tags {
  margin-top: auto;
}
.profile__content--secondary .project-instructions * {
  color: #fff;
}
.profile__content--secondary .project-description {
  grid-column: 1/7;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.profile__content--secondary .project-description * {
  color: #fff;
}

@media (max-width: 1510px) {
  .project-show {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
    align-items: stretch;
  }
  .project-show .project-launch {
    grid-column: 1/5;
    grid-row: 1/6;
    padding: 0;
  }
  .project-show .project-info {
    grid-column: 5/8;
    grid-row: 1/2;
    padding: 1.875rem;
  }
  .project-show .project-instructions {
    grid-column: 5/8;
    grid-row: 2/6;
    padding: 1.875rem;
  }
  .project-show .project-description {
    grid-column: 1/8;
  }
}
@media (max-width: 1248px) {
  .project-show .project-info, .project-show .project-instructions, .project-show .project-description {
    padding: 1.25rem;
  }
}
@media (max-width: 1168px) {
  .project-show .project-launch {
    grid-column: 1/8;
    grid-row: 1/6;
    padding: 0;
  }
  .project-show .project-info {
    grid-column: 1/4;
    grid-row: 6/8;
    padding: 1rem;
  }
  .project-show .project-instructions {
    grid-column: 4/8;
    grid-row: 6/8;
    padding: 1rem;
  }
  .project-show .project-description {
    grid-column: 1/8;
    grid-row: 8/10;
    padding: 1rem;
  }
}
@media (max-width: 1128px) {
  .project-show .project-info {
    grid-column: 1/8;
    grid-row: 6/8;
    padding: 1rem;
  }
  .project-show .project-instructions {
    grid-column: 1/8;
    grid-row: 8/10;
    padding: 1rem;
  }
  .project-show .project-description {
    grid-column: 1/8;
    grid-row: 10/12;
    padding: 1rem;
  }
}
@media (max-width: 768px) {
  .project-show .project-launch__actions {
    padding-inline: 1rem;
  }
  .project-show .project-info__team-title {
    font-size: 1.375rem;
  }
  .project-show .project-info__team-summary {
    width: 100%;
    align-items: flex-start;
  }
}
@media (max-width: 512px) {
  .project-show .project-info__stats {
    flex-wrap: wrap;
    gap: 0.875rem;
  }
}

.projects-slider__wrapper.primary-slider .swiper-container .swiper-actions-move .swiper-button-prev, .projects-slider__wrapper.primary-slider .swiper-container .swiper-actions-move .swiper-button-next {
  border-color: #FF7A00;
}

#project, .projects_new {
  width: 100%;
}
#project .profile__content--primary, .projects_new .profile__content--primary {
  min-width: 0;
  width: 100%;
}
#project .form--primary__project, .projects_new .form--primary__project {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 1.75rem;
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  overflow: visible;
  padding: 1.875rem;
  position: relative;
}
#project .form--primary__project .actions, .projects_new .form--primary__project .actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.project-team__captain-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.95), rgba(255, 143, 0, 0.92));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: 0.8rem;
  line-height: 1;
  flex: 0 0 auto;
}

body.project-form--cropper-open {
  overflow: hidden;
}

.project-form {
  position: relative;
  isolation: isolate;
}
.project-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.project-form__grid--single {
  grid-template-columns: 1fr;
}
.project-form__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-width: 0;
  min-height: 0;
  overflow: visible;
}
.project-form__section--hero, .project-form__section--images {
  position: relative;
  z-index: 1;
}
.project-form__section--categories {
  position: relative;
  z-index: 35;
}
.project-form__section--team {
  position: relative;
  z-index: 25;
}
.project-form__section--richtext {
  min-width: 0;
}
.project-form__heading-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.project-form__heading-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.project-form__heading-main--wide {
  width: 100%;
}
.project-form__visibility {
  justify-content: flex-end;
  align-self: flex-end;
  min-height: 52px;
}
.project-form__file-upload {
  margin-top: 0.25rem;
}
.project-form__name-row {
  width: 100%;
}
.project-form__name-input {
  width: 100%;
  min-height: 58px;
}
.project-form__editor {
  min-width: 0;
}
.project-form__errors {
  padding: 1rem 1.125rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 101, 101, 0.35);
  background: rgba(255, 101, 101, 0.14);
}
.project-form__errors-title {
  margin: 0 0 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.project-form__errors-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.project-form__errors-list li {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}
.project-form__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.45;
}
.project-form__categories {
  gap: 1rem;
}
.project-form__captain-field {
  margin-top: 0.5rem;
}
.project-form__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
  min-height: 56px;
  line-height: 1.35;
}
.project-form__images {
  gap: 1rem;
}
.project-form__images-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  overflow: visible !important;
}
.project-form .input__wrapper,
.project-form .input__wrapper--wrap {
  row-gap: 0.75rem;
  overflow: visible;
}
.project-form .input__wrapper textarea,
.project-form .input__wrapper--wrap textarea {
  min-height: 240px;
  resize: vertical;
}
.project-form .input__wrapper .cke,
.project-form .input__wrapper .ck-editor,
.project-form .input__wrapper--wrap .cke,
.project-form .input__wrapper--wrap .ck-editor {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.project-form .input__wrapper .cke_inner,
.project-form .input__wrapper .cke_top,
.project-form .input__wrapper .cke_contents,
.project-form .input__wrapper--wrap .cke_inner,
.project-form .input__wrapper--wrap .cke_top,
.project-form .input__wrapper--wrap .cke_contents {
  background: rgba(255, 255, 255, 0.98);
}
.project-form .input__wrapper .cke_contents,
.project-form .input__wrapper .ck-editor__editable_inline,
.project-form .input__wrapper--wrap .cke_contents,
.project-form .input__wrapper--wrap .ck-editor__editable_inline {
  min-height: 220px;
}
.project-form .categories {
  min-width: 0;
  gap: 0.875rem;
}
.project-form .categories .ui-nested-dropdown__trigger {
  width: 100%;
  min-height: 54px;
  padding-inline: 1.125rem;
  justify-content: space-between;
}
.project-form .categories .ui-nested-dropdown__panel {
  min-width: 0;
  width: 100%;
  max-width: min(420px, 100vw - 5rem);
  max-height: 320px;
  overflow-y: auto;
  z-index: 100020;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-track {
  background: transparent;
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-corner {
  background: transparent;
}
.project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:single-button, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:vertical:decrement, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:vertical:increment, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:horizontal:decrement, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:horizontal:increment, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:start:decrement, .project-form .categories .ui-nested-dropdown__panel::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.project-form .categories .ui-nested-dropdown__menu {
  gap: 0.375rem;
}
.project-form .categories .ui-nested-dropdown__content {
  min-height: 48px;
  padding: 0.75rem 0.875rem;
}
.project-form .categories .ui-nested-dropdown__text {
  font-size: 0.95rem;
  padding-right: 2rem;
}
.project-form .project-categories__tags {
  min-height: 0;
  padding: 0.25rem 0 0;
  gap: 0.625rem;
  align-content: flex-start;
}
.project-form__categories-list {
  display: flex;
  flex-wrap: wrap;
}
.project-form__category-chip {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.45rem 0.875rem;
  font-size: 0.95rem;
  line-height: 1.2;
}
.project-form .token-select {
  width: 100%;
}
.project-form .token-select__control {
  min-height: 56px;
}
.project-form .token-select__dropdown {
  z-index: 100010;
}
.project-form .file-upload {
  gap: 0.875rem;
}
.project-form .file-upload__btn--icon-only {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  gap: 0;
  aspect-ratio: 1/1;
  flex: 0 0 42px;
}
.project-form .file-upload__icon {
  width: 18px;
  height: 18px;
}
.project-form .project-form__images {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.project-form .project-form__images .input__wrapper--title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.06rem;
  line-height: 1.2;
}
.project-form .project-form__images .input__wrapper--title:before {
  content: "";
  flex: 0 0 auto;
  width: 0.35rem;
  height: 1.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffb347, #ff7a1a);
}
.project-form .project-form__hint {
  margin: 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
  line-height: 1.45;
}
.project-form .project-form__images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
  align-items: stretch;
  justify-content: start;
  gap: 1.125rem;
  overflow: visible;
  margin-top: 0.25rem;
}
.project-form .input__images-item {
  width: 100%;
  max-width: 320px;
  min-height: 0;
  padding: 0.75rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 0.7rem;
  overflow: visible;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.project-form .input__images-item--preview {
  justify-content: flex-start;
}
.project-form .input__images-item--preview:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.project-form .input__images-item--preview:hover .input__image-thumb {
  transform: scale(1.03);
}
.project-form .input__images-item--upload {
  min-height: 322px;
  justify-content: stretch;
}
.project-form .input__images-item.is-cover {
  border-color: rgba(255, 193, 7, 0.62);
  background: rgba(255, 193, 7, 0.075);
  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.22) inset;
}
.project-form .input__images-item.is-removed {
  border-color: rgba(255, 96, 96, 0.24);
  background: rgba(255, 96, 96, 0.06);
}
.project-form .input__images-item.is-removed .input__image-thumb {
  filter: grayscale(1);
}
.project-form .input__images-item.is-removed .input__images-removed-state {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.project-form .input__images-item.is-removed .input__images-action[data-cover-button=true],
.project-form .input__images-item.is-removed .input__images-action[data-action*=openExistingImageCropper] {
  opacity: 0.45;
  pointer-events: none;
}
.project-form .input__images-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}
.project-form .input__image-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.project-form .input__images-cover-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.96);
  color: #281900;
  font-family: "Inter Medium";
  font-size: 0.78rem;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.project-form .input__images-item.is-cover .input__images-cover-badge {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.project-form .input__images-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(9, 11, 32, 0.78) url(/assets/shared/icons/trash--white-5df3e922852cee65e3286b99684dfde27ec67fd1e5b0b6a567ecd9a834ec4fa4.svg) center/0.875rem 0.875rem no-repeat;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.project-form .input__images-remove:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 85, 85, 0.92);
}
.project-form .input__images-removed-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: rgba(8, 10, 26, 0.82);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.project-form .input__images-removed-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}
.project-form .input__images-meta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  flex: 0 0 auto;
  width: 100%;
}
.project-form .input__images-caption {
  min-width: 0;
  min-height: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-form .input__images-item--actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  width: 100%;
  margin-top: 0;
}
.project-form .input__images-item--actions > * {
  width: 100%;
  min-width: 0;
}
.project-form .input__images-action,
.project-form .input__images-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  font-family: "Inter Medium";
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.project-form .input__images-action:hover,
.project-form .input__images-secondary-action:hover {
  transform: translateY(-1px);
}
.project-form .input__images-action {
  background: rgba(55, 72, 255, 0.92);
}
.project-form .input__images-action:hover {
  background: rgba(74, 90, 255, 0.96);
}
.project-form .input__images-action.is-selected {
  background: rgba(255, 193, 7, 0.95);
  border-color: rgba(255, 193, 7, 0.95);
  color: #221500;
}
.project-form .input__images-action--secondary {
  background: rgba(255, 255, 255, 0.08);
}
.project-form .input__images-action--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}
.project-form .input__images-secondary-action {
  background: rgba(255, 255, 255, 0.08);
}
.project-form .input__image-empty {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}
.project-form .image-upload__trigger {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  text-align: center;
  padding: 1.25rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.project-form .image-upload__trigger:hover {
  border-color: rgba(82, 121, 255, 0.42);
  background: rgba(38, 48, 245, 0.08);
  transform: translateY(-1px);
}
.project-form .input__images-item--upload.is-dragover .image-upload__trigger {
  border-color: rgba(82, 121, 255, 0.85);
  border-style: solid;
  background: rgba(38, 48, 245, 0.16);
  box-shadow: inset 0 0 0 2px rgba(82, 121, 255, 0.4);
  transform: none;
}
.project-form .image-upload__trigger-plus {
  position: relative;
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.project-form .image-upload__trigger-plus:before, .project-form .image-upload__trigger-plus:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 0.1875rem;
  border-radius: 999px;
  background: currentColor;
}
.project-form .image-upload__trigger-plus:before {
  transform: translate(-50%, -50%);
}
.project-form .image-upload__trigger-plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.project-form .image-upload__trigger--icon-only {
  min-height: 0;
}
.project-form .image-upload__trigger-text {
  color: rgba(255, 255, 255, 0.92);
  font-family: "Inter Medium";
  font-size: 0.92rem;
  line-height: 1.3;
}
.project-form .image-upload__trigger-hint {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  line-height: 1.3;
}
.project-form__cropper {
  position: fixed;
  inset: 0;
  z-index: 100200;
}
.project-form__cropper-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 22, 0.72);
  backdrop-filter: blur(8px);
}
.project-form__cropper-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 760px);
  margin: 6vh auto;
  padding: 1.25rem;
  border-radius: 1.75rem;
  background: rgba(27, 28, 76, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}
.project-form__cropper-stage {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1/1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1.75rem;
  background: rgba(0, 0, 0, 0.35);
  touch-action: none;
}
.project-form__cropper-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  cursor: grab;
}
.project-form__cropper-image.is-dragging {
  cursor: grabbing;
}
.project-form__cropper-mask {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(7, 10, 25, 0.4) inset;
  pointer-events: none;
}
.project-form__cropper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.project-form__cropper-zoom {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1 1 260px;
}
.project-form__cropper-zoom input[type=range] {
  width: 100%;
}
.project-form__cropper-zoom-label {
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.project-form__cropper-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .project-form__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .project-form {
    padding: 1.25rem;
  }
  .project-form__heading-row {
    align-items: stretch;
  }
  .project-form__visibility {
    justify-content: flex-start;
  }
  .project-form .categories .ui-nested-dropdown__panel {
    max-width: calc(100vw - 3rem);
  }
  .project-form .project-form__images-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-form .input__images-item {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }
  .project-form__cropper-dialog {
    width: calc(100vw - 1.5rem);
    margin: 3vh auto;
    padding: 1rem;
  }
  .project-form__cropper-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .project-form__cropper-actions {
    width: 100%;
  }
  .project-form__cropper-actions .btn-app {
    flex: 1 1 0;
  }
}

.projects-slider__wrapper.primary-slider .swiper-container .swiper-actions-move .swiper-button-prev, .projects-slider__wrapper.primary-slider .swiper-container .swiper-actions-move .swiper-button-next {
  border-color: #FF7A00;
}

#project, .projects_new {
  width: 100%;
}
#project .profile__content--primary, .projects_new .profile__content--primary {
  min-width: 0;
  width: 100%;
}
#project .form--primary__project, .projects_new .form--primary__project {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 1.75rem;
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  overflow: visible;
  padding: 1.875rem;
  position: relative;
}
#project .form--primary__project .actions, .projects_new .form--primary__project .actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.profile-docs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.profile-docs__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-docs__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-docs__section + .profile-docs__section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
}
.profile-docs__section-title {
  margin: 0;
}
.profile-docs__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 980px) {
  .profile-docs__cols {
    grid-template-columns: 1fr;
  }
}
.profile-docs__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-docs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 980px) {
  .profile-docs__grid {
    grid-template-columns: 1fr;
  }
}

.doc-card {
  position: relative;
  border-radius: 1.75rem;
  padding: 1rem 1rem 1rem 1rem;
  background: rgba(18, 18, 65, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  overflow: visible;
}
.doc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #fff;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22));
}
.doc-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.doc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.doc-card__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.doc-card__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}
.doc-card__top-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.doc-card__status {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 14px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.doc-card__file {
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.doc-card__file-name {
  color: rgba(255, 255, 255, 0.9);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-card__link {
  color: #82a1ff;
  text-decoration: underline;
}
.doc-card__reject {
  margin-top: 0.25rem;
  color: rgba(255, 49, 49, 0.9);
}
.doc-card__error {
  margin-top: 0.25rem;
  color: rgba(255, 49, 49, 0.95);
  font-weight: 700;
}
.doc-card__actions {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  position: relative;
  z-index: 2;
  overflow: visible;
}
.doc-card__actions-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: visible;
}
.doc-card__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
}
.doc-card__file-input {
  display: none;
}
.doc-card__upload-state {
  min-height: 22px;
}
.doc-card.is-empty .doc-card__status {
  background: rgba(120, 119, 131, 0.18);
  color: rgba(255, 255, 255, 0.75);
}
.doc-card.is-pending .doc-card__status {
  background: rgba(38, 48, 245, 0.18);
  color: rgb(160, 182, 255);
}
.doc-card.is-approved .doc-card__status {
  background: rgba(52, 199, 89, 0.18);
  color: rgb(120, 255, 170);
}
.doc-card.is-rejected .doc-card__status {
  background: rgba(255, 49, 49, 0.18);
  color: rgb(255, 140, 140);
}

.doc-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.doc-preview__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.doc-preview__image {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.doc-preview__pdf {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 12px;
}

.profile-experience {
  gap: 1.25rem;
}
.profile-experience__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-experience__section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.profile-experience__group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.profile-experience__group + .profile-experience__group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.25rem;
}
.profile-experience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-experience__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-experience__item-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.profile-experience__place {
  line-height: 120%;
}
.profile-experience__item-subtitle {
  line-height: 140%;
}
.profile-experience__item-description {
  color: rgba(255, 255, 255, 0.75);
}
.profile-experience__period {
  color: rgba(255, 255, 255, 0.65);
}

.profile__nested-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile__nested-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin: 0;
}
.profile__nested-row .text-hint {
  margin: 0;
}
.profile__nested-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 980px) {
  .profile__nested-row--two {
    grid-template-columns: 1fr;
  }
}
.profile__nested-row--remove {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile__nested-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .profile__block.profile__block--column.profile-docs {
    padding: 0.875rem 0.75rem;
    gap: 1rem;
  }
  .profile-docs {
    gap: 1rem;
  }
  .profile-docs__grid {
    gap: 0.75rem;
  }
  .doc-card {
    padding: 0.875rem;
  }
  .doc-card__top {
    position: relative;
    display: block;
    min-height: 2rem;
    padding-right: 7.5rem;
  }
  .doc-card__title {
    margin: 0;
  }
  .doc-card__status {
    position: absolute;
    top: -0.125rem;
    right: 0;
  }
}
#course.profile-course {
  --min-h-mobile: clamp(360px, 80svh, 460px);
  --min-h-tablet: clamp(420px, 72svh, 520px);
  --course-module-item-height: clamp(5rem, 6vw, 6rem);
  --course-lessons-max-height: clamp(22rem, 54vh, 31rem);
  z-index: 1001;
  background-color: transparent;
}
#course.profile-course::before {
  display: none;
}
#course.profile-course .ellipse, #course.profile-course .asteroid {
  display: none;
}
#course.profile-course .swiper-container {
  padding-bottom: 0;
}
#course.profile-course .swiper-container .swiper-container__header {
  border-radius: 1.75rem;
}
@media (max-width: 768px) {
  #course.profile-course .swiper-container .swiper-container__header {
    border-radius: 1.75rem;
  }
}
#course.profile-course .swiper-container .swiper-container__header {
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  position: relative;
  padding: clamp(1rem, 10vw, 1.875rem);
}
#course.profile-course .swiper-container .swiper-container__header .swiper-actions-move .swiper-button-prev, #course.profile-course .swiper-container .swiper-container__header .swiper-actions-move .swiper-button-next {
  border-color: #FF7A00;
}
#course.profile-course .swiper-container .swiper-wrapper .swiper-slide .title-middle-small, #course.profile-course .swiper-container .swiper-wrapper .swiper-slide .text-large {
  padding-inline: 1.875rem;
}
#course.profile-course .swiper-container .swiper-wrapper .swiper-slide .entity-card__info {
  background: transparent;
}
#course.profile-course #main {
  border-radius: 1.75rem;
}
@media (max-width: 768px) {
  #course.profile-course #main {
    border-radius: 1.75rem;
  }
}
#course.profile-course #main {
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  position: relative;
  overflow: hidden;
  height: fit-content;
}
#course.profile-course #main .background {
  display: none;
}
#course.profile-course #main .asteroid {
  display: block;
}
#course.profile-course #main .page-image {
  height: 60%;
  width: auto;
  right: 20%;
  bottom: 0;
  display: block;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}
#course.profile-course #main .container {
  position: relative;
  min-height: clamp(440px, 72svh, 620px);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  justify-content: space-between;
  padding: clamp(1rem, 2.8vw, 1.5rem);
}
#course.profile-course #main .container .course-hero__header {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 100%;
}
#course.profile-course #main .container .course-hero__preview {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 6vw, 8rem);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: translateY(-50%);
  min-width: 0;
  padding-right: 0;
}
#course.profile-course #main .container .info-block {
  max-width: min(100%, 38rem);
  gap: clamp(0.875rem, 2.6vw, 1.5rem);
  margin-block: initial;
}
#course.profile-course #main .container .info-block .title-large {
  max-width: 100%;
}
#course.profile-course #main .container .info-block .categories {
  flex-wrap: wrap;
  gap: 0.625rem;
}
#course.profile-course #main .container .info-block .page-description {
  max-width: min(100%, 34rem);
}
#course.profile-course #main .container .btn--preview {
  position: static;
  width: auto;
  min-width: clamp(17rem, 21vw, 21rem);
  min-height: 3.75rem;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
#course.profile-course #main .container .actions--profile-course {
  position: relative;
  z-index: 2;
  align-self: flex-start;
}
#course.profile-course .promo-banner.container {
  padding: 0;
  margin-top: clamp(1.25rem, 4vw, 1.5rem);
}
#course.profile-course .promo-banner.container .promo-banner__content {
  border-radius: 1.75rem;
}
@media (max-width: 768px) {
  #course.profile-course .promo-banner.container .promo-banner__content {
    border-radius: 1.75rem;
  }
}
#course.profile-course .promo-banner.container .promo-banner__content {
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  position: relative;
}
#course.profile-course .promo-banner.container .promo-banner__content .promo-banner__ball, #course.profile-course .promo-banner.container .promo-banner__content .promo-banner__title {
  display: none;
}
#course.profile-course .study-periods {
  padding: 0;
  margin-top: clamp(1.5rem, 4vw, 1.875rem) !important;
  gap: clamp(1.125rem, 3vw, 1.625rem);
}
#course.profile-course .study-periods__title {
  display: none;
}
#course.profile-course .study-periods__content {
  align-items: stretch;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}
#course.profile-course .study-periods__content .periods-age {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-track {
  background: transparent;
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-corner {
  background: transparent;
}
#course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:single-button, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:vertical:decrement, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:vertical:increment, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:horizontal:decrement, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:horizontal:increment, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:start:decrement, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#course.profile-course .study-periods__content .periods-age {
  flex: 0 0 clamp(18rem, 24vw, 22rem);
  max-height: calc(var(--course-module-item-height) * 5 + 0.5rem);
  overflow-y: auto;
  overflow-x: hidden;
}
#course.profile-course .study-periods__content .periods-age__list {
  min-height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
#course.profile-course .study-periods__content .periods-age__list:before {
  border-radius: inherit;
  background-image: url(/assets/features/landing/main/bable-course-period--secondary-9482552a25973ecdcd266791dc344279010d86a875d221d1bad794042729fdca.png);
}
#course.profile-course .study-periods__content .periods-age__item {
  min-height: var(--course-module-item-height);
  padding: clamp(1rem, 2vw, 1.125rem);
  overflow: hidden;
}
#course.profile-course .study-periods__content .training-stages-lists {
  min-width: 0;
}
#course.profile-course .study-periods__content .training-stages-list {
  max-block-size: min(68vh, 42rem);
}
#course.profile-course .study-periods__content .training-stages-list.active {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-track {
  background: transparent;
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-corner {
  background: transparent;
}
#course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:single-button, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:vertical:decrement, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:vertical:increment, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:horizontal:decrement, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:horizontal:increment, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:start:decrement, #course.profile-course .study-periods__content .training-stages-list.active::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#course.profile-course .study-periods__content .training-stages-list.active {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: var(--course-lessons-max-height);
  overflow-y: auto;
  overflow-x: hidden;
}
#course.profile-course .study-periods__content .training-stages-list__item {
  flex: 0 0 auto;
  border-radius: 1.75rem;
}
@media (max-width: 768px) {
  #course.profile-course .study-periods__content .training-stages-list__item {
    border-radius: 1.75rem;
  }
}
#course.profile-course .study-periods__content .training-stages-list__item {
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  position: relative;
  border: 0;
}
#course.profile-course .study-periods__content .periods-age__item.active {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 36px rgba(8, 11, 38, 0.24);
}
#course.profile-course .study-periods__content .periods-age__item.active .period-age__opacity {
  background: linear-gradient(135deg, rgba(255, 99, 155, 0.96) 0%, rgba(113, 189, 255, 0.9) 100%);
}
#course.profile-course .study-periods__content .periods-age__item.active .period-age__text,
#course.profile-course .study-periods__content .periods-age__item.active .type__kind,
#course.profile-course .study-periods__content .periods-age__item.active .type__desc {
  color: #030305;
}
#course.profile-course .study-periods__content .drop-down__item--tool, #course.profile-course .study-periods__content .drop-down__item--tool:before {
  border-color: #FF7A00;
}
#course.profile-course .introductory {
  padding: 0;
  margin-top: clamp(1.5rem, 4vw, 2rem) !important;
}
#course.profile-course .introductory__title {
  display: none;
}
#course.profile-course .introductory__video-container {
  margin-top: clamp(0.875rem, 2.4vw, 1.25rem) !important;
}
#course.profile-course .introductory__info {
  border-radius: 1.75rem;
}
@media (max-width: 768px) {
  #course.profile-course .introductory__info {
    border-radius: 1.75rem;
  }
}
#course.profile-course .introductory__info {
  background: rgba(37, 37, 37, 0.75);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
  position: relative;
}
#course.profile-course .introductory__info * {
  color: #fff;
}
#course.profile-course .introductory__info-items svg path {
  fill: #fff;
}
#course.profile-course .students-projects {
  padding: 0;
}
#course.profile-course .custom-form, #course.profile-course .user-request-trial, #course.profile-course .filials {
  display: none;
}
#course.profile-course .courses-list .swiper-container .swiper-wrapper .entity-card.swiper-slide {
  padding-bottom: 0;
}
#course.profile-course .courses-list .swiper-container .swiper-wrapper .entity-card.swiper-slide .entity-card__info1 {
  background: transparent;
}
#course.profile-course .entities-slider--wrapper.primary-slider {
  margin-top: clamp(1.5rem, 4vw, 2rem);
}
#course.profile-course .entities-slider--wrapper.primary-slider .swiper-container {
  margin-top: 0;
}
#course.profile-course .entities-slider--wrapper + .entities-slider--wrapper {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
#course.profile-course .entities-slider--wrapper.teachers .swiper-container .swiper-wrapper .teacher__name {
  padding-inline: 0;
}
#course.profile-course .entities-slider--wrapper.teachers .swiper-container .swiper-wrapper .teacher__info {
  padding: clamp(0.5rem, 10vw, 1.25rem) clamp(1rem, 10vw, 1.875rem);
}
@media (max-width: 1180px) {
  #course.profile-course #main .page-image {
    width: min(34%, 320px);
    min-width: 180px;
    max-height: 74%;
    right: clamp(0.5rem, 2vw, 1.5rem);
  }
  #course.profile-course #main .container .course-hero__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.875rem, 2.4vw, 1.25rem);
    max-width: min(100%, 36rem);
    padding: clamp(1rem, 2.8vw, 1.5rem);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: 0 20px 48px rgba(6, 7, 28, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  #course.profile-course #main .container .course-hero__preview {
    position: static;
    transform: none;
    justify-content: flex-start;
    padding-right: 0;
  }
  #course.profile-course #main .container .btn--preview {
    align-self: flex-start;
  }
}
@media (max-width: 1023px) {
  #course.profile-course {
    z-index: 1;
  }
  #course.profile-course .study-periods__content {
    gap: 1rem;
  }
  #course.profile-course .study-periods__content .periods-age {
    flex: none;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.375rem;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: auto;
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
    background: transparent;
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-track {
    background: transparent;
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
    border-radius: 999px;
    transition: background 0.3s ease-in-out;
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-corner {
    background: transparent;
  }
  #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:single-button, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:vertical:decrement, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:vertical:increment, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:horizontal:decrement, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:horizontal:increment, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:start:decrement, #course.profile-course .study-periods__content .periods-age::-webkit-scrollbar-button:end:increment {
    display: none;
    width: 0;
    height: 0;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
  }
  #course.profile-course .study-periods__content .periods-age__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.625rem;
    width: max-content;
    min-width: 0;
    overflow: visible;
    padding-left: 0.125rem;
    padding-right: clamp(3.75rem, 16vw, 5.5rem);
    padding-bottom: 0.125rem;
    border-bottom: 0;
    scroll-snap-type: x proximity;
  }
  #course.profile-course .study-periods__content .periods-age__list:before {
    display: none;
  }
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item {
    flex: 0 0 auto;
    width: clamp(132px, 39vw, 152px);
    min-width: clamp(132px, 39vw, 152px);
    max-width: clamp(132px, 39vw, 152px);
    min-height: clamp(4.75rem, 14vw, 5.5rem);
    padding: clamp(0.875rem, 2.6vw, 1rem) clamp(0.8125rem, 2.8vw, 0.9375rem);
    gap: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    scroll-snap-align: start;
  }
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item .period-age__type {
    gap: 0.2rem;
  }
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item .period-age__type .type__kind {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item .period-age__type .type__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.15;
    min-height: 2.3em;
  }
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item:nth-child(1),
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item:nth-last-child(1) {
    border-radius: 22px !important;
  }
  #course.profile-course .study-periods__content .periods-age__list .periods-age__item.active {
    border-color: rgba(255, 122, 0, 0.48);
    background: linear-gradient(135deg, rgba(255, 99, 155, 0.96) 0%, rgba(113, 189, 255, 0.9) 100%);
    box-shadow: 0 14px 32px rgba(8, 11, 38, 0.22), 0 0 0 1px rgba(255, 122, 0, 0.14);
  }
  #course.profile-course .study-periods__content .training-stages-list {
    max-block-size: clamp(18rem, 52vh, 34rem);
  }
  #course.profile-course .study-periods__content .training-stages-list.active {
    max-height: clamp(20rem, 50svh, 28rem);
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #course.profile-course {
    min-height: var(--min-h-tablet);
    min-block-size: var(--min-h-tablet);
  }
}
@media (min-width: 1024px) {
  #course.profile-course {
    min-height: var(--teacher-min-h-desktop);
    min-block-size: var(--teacher-min-h-desktop);
  }
  #course.profile-course #main {
    min-height: var(--teacher-min-h-desktop);
    min-block-size: var(--teacher-min-h-desktop);
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  body.profiles:has(#course.profile-course) {
    scrollbar-gutter: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar {
    width: 0.22rem;
    height: 0.22rem;
    background: transparent;
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar-track {
    background: transparent;
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    transition: background 0.3s ease-in-out;
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.38);
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar-corner {
    background: transparent;
  }
  body.profiles:has(#course.profile-course)::-webkit-scrollbar-button, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:single-button, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:vertical:decrement, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:vertical:increment, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:horizontal:decrement, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:horizontal:increment, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:start:decrement, body.profiles:has(#course.profile-course)::-webkit-scrollbar-button:end:increment {
    display: none;
    width: 0;
    height: 0;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
  }
  #course.profile-course {
    padding-inline: clamp(0.375rem, 2vw, 0.75rem);
  }
  #course.profile-course #main .page-image {
    width: min(92%, 430px);
    min-width: 0;
    max-height: 58%;
    right: -4%;
  }
  #course.profile-course #main .container {
    gap: clamp(0.75rem, 3vw, 1rem);
    min-height: clamp(420px, 84svh, 560px);
    padding: clamp(0.625rem, 2.2vw, 0.875rem) clamp(0.625rem, 2.2vw, 0.875rem) clamp(0.75rem, 4vw, 1rem);
  }
  #course.profile-course #main .container .course-hero__header {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 0.875rem;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #course.profile-course #main .container .course-hero__preview {
    width: auto;
    padding-right: 0;
  }
  #course.profile-course #main .container .info-block {
    gap: 0.875rem;
  }
  #course.profile-course #main .container .info-block .categories {
    gap: 0.5rem;
  }
  #course.profile-course #main .container .btn--preview {
    width: auto;
    min-width: clamp(15rem, 72vw, 18.5rem);
    max-width: 100%;
    align-self: flex-start;
    min-height: 3.25rem;
    padding-inline: 1rem;
  }
  #course.profile-course #main .container .actions--profile-course {
    padding-left: 0.125rem;
  }
  #course.profile-course .entities-slider--wrapper.primary-slider {
    margin-top: clamp(1.25rem, 5vw, 1.75rem);
  }
  #course.profile-course .entities-slider--wrapper + .entities-slider--wrapper {
    margin-top: clamp(1rem, 4vw, 1.5rem);
  }
  #course.profile-course .profile {
    padding: 0.5rem;
    gap: 0.75rem;
  }
  #course.profile-course .profile__block, #course.profile-course .profile__block--column, #course.profile-course .profile__block--primary, #course.profile-course .profile__block--secondary, #course.profile-course .profile__block--grid {
    padding: 0.875rem;
    border-radius: 20px;
  }
  #course.profile-course .page-header {
    gap: 0.75rem !important;
  }
  #course.profile-course .page-header__single-row {
    row-gap: 0.625rem;
  }
  #course.profile-course .page-header__actions {
    gap: 0.5rem;
  }
  #course.profile-course .page-header__subtitles {
    font-size: 14px;
  }
  #course.profile-course .profile__block.page-header {
    padding: 0.75rem;
  }
}
.courses_new .profile--data .dropdowns__wrapper, .courses_edit .profile--data .dropdowns__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.courses_new .profile--data .dropdown, .courses_edit .profile--data .dropdown {
  display: flex;
  flex-direction: column;
  transition: gap 0.3s ease-in-out;
}
.courses_new .profile--data .dropdown--icon, .courses_edit .profile--data .dropdown--icon {
  flex: 0 0 4%;
  display: block;
  align-self: stretch;
  aspect-ratio: 1;
  width: auto;
  min-width: auto;
  height: 100%;
  max-width: 28px;
  max-height: 28px;
  cursor: pointer;
  position: relative;
}
.courses_new .profile--data .dropdown--icon::before, .courses_new .profile--data .dropdown--icon::after, .courses_edit .profile--data .dropdown--icon::before, .courses_edit .profile--data .dropdown--icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 2px;
  background-color: #2630f5;
  transform-origin: center;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.courses_new .profile--data .dropdown__header, .courses_edit .profile--data .dropdown__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}
.courses_new .profile--data .dropdown__header--arrow, .courses_edit .profile--data .dropdown__header--arrow {
  transition: transform 0.3s ease-in-out;
}
.courses_new .profile--data .dropdown__body, .courses_edit .profile--data .dropdown__body {
  max-height: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  transition: max-height 0.5s ease-in-out, border 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.courses_new .profile--data .dropdown__body td, .courses_new .profile--data .dropdown__body th, .courses_edit .profile--data .dropdown__body td, .courses_edit .profile--data .dropdown__body th {
  border: 0;
}
.courses_new .profile--data .dropdown-active, .courses_edit .profile--data .dropdown-active {
  gap: 0.5rem;
}
.courses_new .profile--data .dropdown-active .dropdown__header .dropdown__header--arrow, .courses_edit .profile--data .dropdown-active .dropdown__header .dropdown__header--arrow {
  transform: rotate(180deg);
}
.courses_new .profile--data .dropdown-active .dropdown--icon::after, .courses_edit .profile--data .dropdown-active .dropdown--icon::after {
  transform: translate(-50%, -50%) rotate(0);
  opacity: 1;
}
.courses_new .profile--data .dropdown-active .dropdown__body, .courses_edit .profile--data .dropdown-active .dropdown__body {
  max-height: 10000px;
  border: initial;
  transition: max-height 0.9s ease-in-out, border 0.9s ease-in-out;
  opacity: 1;
}
.courses_new .profile--data .modules__list h2, .courses_new .profile--data .modules__list a, .courses_new .profile--data .modules__list span, .courses_edit .profile--data .modules__list h2, .courses_edit .profile--data .modules__list a, .courses_edit .profile--data .modules__list span {
  white-space: nowrap;
}
.courses_new .profile--data .modules__list .nested-module, .courses_edit .profile--data .modules__list .nested-module {
  gap: 0;
}
.courses_new .profile--data .modules__list .course-program__lessons, .courses_edit .profile--data .modules__list .course-program__lessons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.courses_new .profile--data .modules__list .course-program__module-body > .btn-app, .courses_edit .profile--data .modules__list .course-program__module-body > .btn-app {
  margin-top: 1rem;
}
.courses_new .profile--data .modules__list .dropdown-active, .courses_edit .profile--data .modules__list .dropdown-active {
  gap: 1.875rem;
}
.courses_new .profile--data .modules__list .dropdown-active .dropdown__header--arrow, .courses_edit .profile--data .modules__list .dropdown-active .dropdown__header--arrow {
  transform: rotate(90deg);
}
.courses_new .profile--data .modules__list .course-program__module-header,
.courses_new .profile--data .modules__list .course-program__lesson-row, .courses_edit .profile--data .modules__list .course-program__module-header,
.courses_edit .profile--data .modules__list .course-program__lesson-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  width: 100%;
}
.courses_new .profile--data .modules__list .course-program__module-header, .courses_edit .profile--data .modules__list .course-program__module-header {
  column-gap: 2rem;
}
.courses_new .profile--data .modules__list .course-program__module-index,
.courses_new .profile--data .modules__list .course-program__lesson-label, .courses_edit .profile--data .modules__list .course-program__module-index,
.courses_edit .profile--data .modules__list .course-program__lesson-label {
  margin: 0;
  min-width: 0;
  padding-top: 0.875rem;
}
.courses_new .profile--data .modules__list .course-program__lesson-label, .courses_edit .profile--data .modules__list .course-program__lesson-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.courses_new .profile--data .modules__list .course-program__field, .courses_edit .profile--data .modules__list .course-program__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.courses_new .profile--data .modules__list .course-program__field-hint, .courses_edit .profile--data .modules__list .course-program__field-hint {
  margin: 0;
  color: rgba(176, 183, 201, 0.7);
  line-height: 1.35;
}
.courses_new .profile--data .modules__list .course-program__input, .courses_edit .profile--data .modules__list .course-program__input {
  width: 100%;
  min-width: 0;
}
.courses_new .profile--data .modules__list .course-program__module-actions,
.courses_new .profile--data .modules__list .course-program__lesson-actions, .courses_edit .profile--data .modules__list .course-program__module-actions,
.courses_edit .profile--data .modules__list .course-program__lesson-actions {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.875rem;
}
.courses_new .profile--data .modules__list .course-program__module-actions, .courses_edit .profile--data .modules__list .course-program__module-actions {
  justify-self: end;
}
.courses_new .profile--data .modules__list .course-program__lesson-actions, .courses_edit .profile--data .modules__list .course-program__lesson-actions {
  justify-self: end;
}
.courses_new .profile--data .modules__list .nested-module__remove,
.courses_new .profile--data .modules__list .nested-module__icon,
.courses_new .profile--data .modules__list .drag-handle, .courses_edit .profile--data .modules__list .nested-module__remove,
.courses_edit .profile--data .modules__list .nested-module__icon,
.courses_edit .profile--data .modules__list .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.courses_new .profile--data .modules__list .lesson-editor__title-group,
.courses_new .profile--data .modules__list .lesson-editor__field-group, .courses_edit .profile--data .modules__list .lesson-editor__title-group,
.courses_edit .profile--data .modules__list .lesson-editor__field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.courses_new .profile--data .modules__list .lesson-editor__field-meta, .courses_edit .profile--data .modules__list .lesson-editor__field-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.courses_new .profile--data .modules__list .lesson-editor__field-hint, .courses_edit .profile--data .modules__list .lesson-editor__field-hint {
  margin: 0;
  opacity: 0.78;
  line-height: 1.35;
}
.courses_new .profile--data .modules__list .lesson-editor__title-input, .courses_edit .profile--data .modules__list .lesson-editor__title-input {
  width: 100%;
}
@media (max-width: 1024px) {
  .courses_new .profile--data .modules__list .course-program__module-header,
  .courses_new .profile--data .modules__list .course-program__lesson-row, .courses_edit .profile--data .modules__list .course-program__module-header,
  .courses_edit .profile--data .modules__list .course-program__lesson-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .courses_new .profile--data .modules__list .course-program__module-index,
  .courses_new .profile--data .modules__list .course-program__lesson-label,
  .courses_new .profile--data .modules__list .course-program__field, .courses_edit .profile--data .modules__list .course-program__module-index,
  .courses_edit .profile--data .modules__list .course-program__lesson-label,
  .courses_edit .profile--data .modules__list .course-program__field {
    grid-column: 1/2;
  }
  .courses_new .profile--data .modules__list .course-program__module-actions,
  .courses_new .profile--data .modules__list .course-program__lesson-actions, .courses_edit .profile--data .modules__list .course-program__module-actions,
  .courses_edit .profile--data .modules__list .course-program__lesson-actions {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
@media (max-width: 768px) {
  .courses_new .profile--data .modules__list .course-program__module-header,
  .courses_new .profile--data .modules__list .course-program__lesson-row, .courses_edit .profile--data .modules__list .course-program__module-header,
  .courses_edit .profile--data .modules__list .course-program__lesson-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
  }
  .courses_new .profile--data .modules__list .course-program__module-index,
  .courses_new .profile--data .modules__list .course-program__lesson-label,
  .courses_new .profile--data .modules__list .course-program__field,
  .courses_new .profile--data .modules__list .course-program__module-actions,
  .courses_new .profile--data .modules__list .course-program__lesson-actions, .courses_edit .profile--data .modules__list .course-program__module-index,
  .courses_edit .profile--data .modules__list .course-program__lesson-label,
  .courses_edit .profile--data .modules__list .course-program__field,
  .courses_edit .profile--data .modules__list .course-program__module-actions,
  .courses_edit .profile--data .modules__list .course-program__lesson-actions {
    grid-column: 1/-1;
  }
  .courses_new .profile--data .modules__list .course-program__module-index,
  .courses_new .profile--data .modules__list .course-program__lesson-label,
  .courses_new .profile--data .modules__list .course-program__module-actions,
  .courses_new .profile--data .modules__list .course-program__lesson-actions, .courses_edit .profile--data .modules__list .course-program__module-index,
  .courses_edit .profile--data .modules__list .course-program__lesson-label,
  .courses_edit .profile--data .modules__list .course-program__module-actions,
  .courses_edit .profile--data .modules__list .course-program__lesson-actions {
    padding-top: 0;
  }
  .courses_new .profile--data .modules__list .course-program__module-actions,
  .courses_new .profile--data .modules__list .course-program__lesson-actions, .courses_edit .profile--data .modules__list .course-program__module-actions,
  .courses_edit .profile--data .modules__list .course-program__lesson-actions {
    justify-self: start;
  }
  .courses_new .profile--data .modules__list .lesson-editor__field-meta, .courses_edit .profile--data .modules__list .lesson-editor__field-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

.group-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: fit-content;
  padding: 1rem 1.25rem;
  border-radius: 1.75rem;
  background: rgba(37, 37, 37, 0.75);
  backdrop-filter: blur(18.5px);
  -webkit-backdrop-filter: blur(18.5px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .group-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}
.group-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.group-card__title {
  font-family: "DrukWideCyr Bold";
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  color: #fff;
  margin: 0;
}
.group-card__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
}
.group-card__menu-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.group-card__members {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  isolation: isolate;
}
.group-card__members > * + * {
  margin-left: -12px;
}
.group-card__members .group-card__counter {
  margin-left: -12px;
}
.group-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 42px;
  height: 42px;
  position: relative;
  overflow: hidden;
  background: #262249;
  border-radius: 50%;
  border: 3px solid #3A2B54;
}
.group-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-card__avatar--me, .group-card__avatar--initials {
  background: #fff;
  color: #030305;
  font-family: "DrukWideCyr Bold";
  font-size: 12px;
  line-height: 1;
}
.group-card__counter {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 3px solid #3A2B54;
  backdrop-filter: blur(2px);
}
.group-card__status {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.group-card__status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.group-card__status-text {
  line-height: 1.3;
}

.group-card--drawer {
  display: none;
}

@media (max-width: 767px) {
  .group-card--desktop {
    display: none;
  }
  .group-card--drawer {
    display: flex;
    margin-top: 12px;
    padding: 0.75rem 0.875rem;
    gap: 0.75rem;
    border-radius: 0.75rem;
  }
  .group-card--drawer .group-card__menu {
    display: none;
  }
  .group-card--drawer .group-card__status {
    display: none;
  }
  .group-card--drawer .group-card__title {
    font-size: 16px;
  }
  .group-card--drawer .group-card__avatar,
  .group-card--drawer .group-card__counter {
    width: 34px;
    height: 34px;
    border-width: 2px;
  }
}
.print-accesses {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.5rem);
  color: #0B1020;
}
.print-accesses__card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.25);
  padding: clamp(1rem, 2.2vw, 1.6rem);
}
.print-accesses__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.print-accesses__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: 0.2px;
}
.print-accesses__meta {
  margin: 0.25rem 0 0;
  opacity: 0.78;
  font-size: 0.95rem;
}
.print-accesses__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.print-accesses__notice {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(11, 16, 32, 0.04);
  border: 1px solid rgba(11, 16, 32, 0.08);
  font-size: 0.95rem;
  line-height: 1.45;
}
.print-accesses__table-wrap {
  margin-top: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(11, 16, 32, 0.08);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.print-accesses__table-wrap::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.print-accesses__table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.print-accesses__table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.print-accesses__table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.print-accesses__table-wrap::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.print-accesses__table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}
.print-accesses__table-wrap::-webkit-scrollbar-button, .print-accesses__table-wrap::-webkit-scrollbar-button:single-button, .print-accesses__table-wrap::-webkit-scrollbar-button:vertical:decrement, .print-accesses__table-wrap::-webkit-scrollbar-button:vertical:increment, .print-accesses__table-wrap::-webkit-scrollbar-button:horizontal:decrement, .print-accesses__table-wrap::-webkit-scrollbar-button:horizontal:increment, .print-accesses__table-wrap::-webkit-scrollbar-button:start:decrement, .print-accesses__table-wrap::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.print-accesses__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px;
  background: rgba(255, 255, 255, 0.98);
}
.print-accesses__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(11, 16, 32, 0.03);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: left;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid rgba(11, 16, 32, 0.1);
}
.print-accesses__table tbody td {
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid rgba(11, 16, 32, 0.08);
  vertical-align: top;
  font-size: 0.95rem;
}
.print-accesses__table tbody tr:last-child td {
  border-bottom: 0;
}
.print-accesses__table-url {
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  opacity: 0.95;
}
@media (max-width: 768px) {
  .print-accesses__table {
    min-width: 740px;
  }
}
@media (max-width: 420px) {
  .print-accesses__table {
    min-width: 680px;
  }
}

@media print {
  body.profiles {
    background: none !important;
  }
  .print-accesses {
    max-width: none;
    padding: 0;
  }
  .print-accesses__card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .print-accesses__actions {
    display: none;
  }
  .print-accesses__table-wrap {
    border: 0;
    border-radius: 0;
  }
  .print-accesses__table {
    min-width: 0;
  }
  .print-accesses__table thead th {
    position: static;
  }
}
@keyframes methodic_sidebar_in {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes methodic_sidebar_item_in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#profile.lessens--course {
  padding-inline: clamp(0.75rem, 2vw, 2rem);
}

#profile.lessens--course .profile--data .lesson--content {
  justify-content: flex-start;
  flex: 1;
  max-width: initial;
  min-width: 0;
}
#profile.lessens--course .profile--data .lesson--content ul:not(.nav):not(.toc) {
  padding-left: 1.1rem;
}
#profile.lessens--course .profile--data .lesson--content .lesson--video {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  overflow: hidden;
  background: #000;
  border-radius: 0.75rem;
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}
#profile.lessens--course .profile--data .lesson--content .lesson--video video, #profile.lessens--course .profile--data .lesson--content .lesson--video iframe {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
#profile.lessens--course .profile--data .lesson--content .lesson-description *:not(a):not(a *) {
  color: #fff;
}
#profile.lessens--course .profile--data .lesson--content .lessens--actions {
  flex: 0 0 30%;
  min-width: 320px;
}
#profile.lessens--course .profile--data .lesson--content .lessens--actions .btn-app {
  width: 100%;
}
#profile.lessens--course .profile--data .lesson--content .lessens--actions .lesson-materials .profile-content-container--default {
  width: 100%;
  min-width: 0;
}
#profile.lessens--course .profile--data .lesson--content .lessens--actions .lesson-materials__item {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  color: #FF7A00;
  padding-bottom: 1%;
  overflow-wrap: anywhere;
  min-width: 0;
}
#profile.lessens--course .profile--data .lesson--content .lessens--actions .lesson-materials__item:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #FF7A00;
}
#profile.lessens--course .profile__block h1, #profile.lessens--course .profile__block h2, #profile.lessens--course .profile__block h3, #profile.lessens--course .profile__block h4, #profile.lessens--course .profile__block p {
  color: #fff;
}
#profile.lessens--course .profile__content--row {
  align-items: flex-start;
}
#profile.lessens--course .profile__content--row turbo-frame#course_content,
#profile.lessens--course .profile__content--row turbo-frame#lesson_edit {
  display: block;
  flex: 1;
  min-width: 0;
  width: 100%;
}
#profile.lessens--course .lesson-course-layout {
  --lesson-sidebar-width: clamp(320px, 24vw, 388px);
  --lesson-layout-gap: 1rem;
  --lesson-media-height: clamp(320px, 39.5vw, calc(100dvh - 7.5rem));
  display: grid;
  grid-template-columns: var(--lesson-sidebar-width) minmax(0, 1fr);
  gap: var(--lesson-layout-gap);
  align-items: start;
}
#profile.lessens--course .lesson-course-layout turbo-frame#course_content {
  display: contents;
}
#profile.lessens--course .lesson-course-content.profile__content--primary {
  display: contents;
}
#profile.lessens--course .lesson-course-content__media,
#profile.lessens--course .lesson-course-content .lesson-subheader {
  grid-column: 2;
  min-width: 0;
  width: 100%;
}
#profile.lessens--course .lesson-course-content__media .lesson--video {
  height: var(--lesson-media-height);
  max-height: var(--lesson-media-height);
  aspect-ratio: auto;
}
#profile.lessens--course .lesson-course-content__body,
#profile.lessens--course .lesson-course-content .interactive-games {
  grid-column: 1/-1;
  min-width: 0;
  width: 100%;
}
#profile.lessens--course .lesson-page-progress {
  margin-left: auto;
  min-width: 172px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
#profile.lessens--course .lesson-page-progress__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#profile.lessens--course .lesson-page-progress__label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}
#profile.lessens--course .lesson-page-progress__value {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 1.1rem;
  line-height: 1.1;
}
#profile.lessens--course .lesson-page-progress__ring {
  width: 56px;
  height: 56px;
  position: relative;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  background: conic-gradient(#ff8a1f 0 var(--lesson-progress-percent), #f4f4f4 var(--lesson-progress-percent) 100%);
}
#profile.lessens--course .lesson-page-progress__ring:before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #2f2f60;
}
#profile.lessens--course .lesson-page-progress__ring-value {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
#profile.lessens--course .lesson-aside__cards {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
#profile.lessens--course .lesson-aside__card {
  position: relative;
  padding: 2px;
  border-radius: 1.5rem;
  background: var(--lesson-sidebar-card-border);
  box-shadow: 0 16px 32px rgba(7, 11, 37, 0.18);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#profile.lessens--course .lesson-aside__card:before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg, var(--lesson-sidebar-card-color-a), var(--lesson-sidebar-card-color-b), var(--lesson-sidebar-card-color-a));
  animation: lesson_aside_card_border_spin 2.4s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 0;
}
@media (hover: hover) {
  #profile.lessens--course .lesson-aside__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(7, 11, 37, 0.28);
  }
  #profile.lessens--course .lesson-aside__card:hover:before {
    opacity: 1;
    animation-play-state: running;
  }
  #profile.lessens--course .lesson-aside__card:hover .lesson-aside__card-image {
    transform: scale(1.035);
  }
}
#profile.lessens--course .lesson-aside__card-surface {
  position: relative;
  z-index: 1;
  border-radius: calc(1.5rem - 2px);
  overflow: hidden;
  background: #1f2147;
  aspect-ratio: 396/132;
}
#profile.lessens--course .lesson-aside__card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.26s ease;
}
#profile.lessens--course .lesson-aside__group {
  width: 100%;
}
#profile.lessens--course .aside_combo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: clamp(320px, 24vw, 388px);
  flex: 0 0 clamp(320px, 24vw, 388px);
  align-self: flex-start;
  --aside-sidebar-max-height: 80vh;
  height: auto;
  min-height: 0;
}
@supports (height: 1svh) {
  #profile.lessens--course .aside_combo {
    --aside-sidebar-max-height: 80svh;
  }
}
#profile.lessens--course .aside_combo {
  position: sticky;
  top: 1rem;
  --aside-sidebar-max-height: var(--lesson-media-height);
}
#profile.lessens--course .aside_combo .sidebar {
  height: var(--aside-sidebar-max-height);
  display: flex;
  flex-direction: column;
}
#profile.lessens--course .aside_combo.aside_combo--methodic-admin {
  width: clamp(320px, 30vw, 420px);
  flex: 0 0 clamp(320px, 30vw, 420px);
}
#profile.lessens--course .sidebar {
  flex: 1 1 auto;
  min-height: 0;
  height: fit-content;
  max-height: var(--aside-sidebar-max-height);
  overflow: hidden;
  padding: 0;
}
#profile.lessens--course .sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: var(--aside-sidebar-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0 0.75rem 1.875rem;
  padding-right: 0;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar-track {
  background: transparent;
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar-corner {
  background: transparent;
}
#profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:single-button, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:vertical:decrement, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:vertical:increment, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:horizontal:decrement, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:horizontal:increment, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:start:decrement, #profile.lessens--course .sidebar__scroll::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#profile.lessens--course .sidebar.sidebar--wheel {
  position: relative;
}
#profile.lessens--course .sidebar.sidebar--wheel .sidebar__header,
#profile.lessens--course .sidebar.sidebar--wheel .sidebar__sublink {
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
#profile.lessens--course .sidebar__list.dropdowns__wrapper {
  gap: 1.25rem;
  padding-right: 1.875rem;
}
#profile.lessens--course .sidebar__list, #profile.lessens--course .sidebar__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
#profile.lessens--course .sidebar__header {
  padding: 0.25rem 0;
  align-items: flex-start;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#profile.lessens--course .sidebar__index, #profile.lessens--course .sidebar__title {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}
#profile.lessens--course .sidebar__index {
  flex: 0 0 auto;
  white-space: nowrap;
}
#profile.lessens--course .sidebar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#profile.lessens--course .sidebar__icon {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.9;
}
#profile.lessens--course .sidebar__icon.dropdown__header--arrow {
  margin-top: 2px;
}
#profile.lessens--course .sidebar__sublist {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.25rem;
}
#profile.lessens--course .sidebar__sublink {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.5rem 0.45rem;
  border-radius: 0.8rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  transition: background 0.18s ease, color 0.18s ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#profile.lessens--course .sidebar__sublink:hover {
  background: rgba(255, 255, 255, 0.06);
}
#profile.lessens--course .sidebar__state {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-top: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  position: relative;
}
#profile.lessens--course .sidebar__state-icon {
  width: 12px;
  height: 12px;
  display: block;
}
#profile.lessens--course .sidebar__state--done {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
#profile.lessens--course .sidebar__state--done .sidebar__state-icon {
  display: none;
}
#profile.lessens--course .sidebar__state--done::before {
  content: "✓";
  font-weight: 900;
}
#profile.lessens--course .sidebar__state--current {
  background: rgba(255, 122, 0, 0.2);
  border-color: rgba(255, 122, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1);
}
#profile.lessens--course .sidebar__state--current .sidebar__state-icon {
  display: none;
}
#profile.lessens--course .sidebar__state--current::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #FF7A00;
  display: block;
}
#profile.lessens--course .sidebar__state--locked {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
#profile.lessens--course .sidebar__state--open:not(.sidebar__state--current):not(.sidebar__state--done) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
#profile.lessens--course .sidebar__state--open:not(.sidebar__state--current):not(.sidebar__state--done) .sidebar__state-icon {
  opacity: 0.88;
}
#profile.lessens--course .sidebar__subindex {
  min-width: 2.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
  padding-top: 2px;
}
#profile.lessens--course .sidebar .subitem__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#profile.lessens--course .sidebar__subtitle {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}
#profile.lessens--course .sidebar__subtitle-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#profile.lessens--course .sidebar__badge {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  flex: 0 0 18px;
  margin-top: 1px;
}
#profile.lessens--course .sidebar__badge--done {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}
#profile.lessens--course .sidebar__badge--current {
  background: rgba(255, 122, 0, 0.18);
  color: #FF7A00;
}
#profile.lessens--course .sidebar__sublink--done .sidebar__subindex {
  color: rgba(255, 255, 255, 0.45);
}
#profile.lessens--course .sidebar__sublink--done .sidebar__subtitle {
  color: rgba(255, 255, 255, 0.78);
}
#profile.lessens--course .sidebar__sublink--current .sidebar__subindex,
#profile.lessens--course .sidebar__sublink--current .sidebar__subtitle {
  color: #FF7A00;
}
#profile.lessens--course .sidebar__sublink--active {
  background: rgba(255, 122, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.18);
}
#profile.lessens--course .sidebar__sublink--active .sidebar__subindex,
#profile.lessens--course .sidebar__sublink--active .sidebar__subtitle {
  color: #FF7A00;
}
#profile.lessens--course .sidebar__sublink--locked {
  opacity: 0.62;
}
#profile.lessens--course .sidebar__sublink--locked .sidebar__subindex,
#profile.lessens--course .sidebar__sublink--locked .sidebar__subtitle {
  color: rgba(255, 255, 255, 0.7);
}
#profile.lessens--course .sidebar__header--locked {
  opacity: 0.72;
}
#profile.lessens--course .sidebar__lock {
  display: inline-flex;
  margin-left: 0.5rem;
  vertical-align: middle;
}
#profile.lessens--course .sidebar__lock-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__add-btn {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__subitem {
  position: relative;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__sublink {
  padding-right: 4rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__sublink--active {
  box-shadow: none;
  background: rgba(255, 122, 0, 0.08);
  position: relative;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__sublink--active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 122, 0, 0.85);
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__actions {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0.95;
  transition: opacity 0.15s ease;
}
@media (hover: hover) {
  #profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__actions {
    opacity: 0;
  }
  #profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__subitem:hover .sidebar__actions {
    opacity: 1;
  }
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__action {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.08s ease;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__action:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__action img {
  width: 16px;
  height: 16px;
  display: block;
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__action--delete:hover {
  background: rgba(255, 62, 75, 0.12);
  border-color: rgba(255, 62, 75, 0.22);
}
#profile.lessens--course .sidebar.sidebar--methodic-editor .sidebar__action--edit:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.22);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin {
  background: linear-gradient(135deg, rgba(29, 31, 78, 0.92), rgba(62, 30, 117, 0.9), rgba(29, 31, 78, 0.92));
  border: 1px solid rgba(134, 69, 210, 0.25);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.38);
  border-radius: 2rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__scroll {
  padding: 1.5rem 1.5rem 1.25rem;
  max-height: var(--aside-sidebar-max-height);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__list.dropdowns__wrapper {
  gap: 1.05rem;
  padding-right: 0;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__item--hero {
  margin-bottom: 0.35rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__hero {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__hero-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.85rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__hero-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  flex: 0 0 48px;
  aspect-ratio: 1/1;
  border-radius: 1.1rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgb(134, 69, 210), rgb(91, 33, 182));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__hero-icon-svg {
  width: 22px;
  height: 22px;
  color: #fff;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__hero-text {
  font-size: 1.45rem;
  font-family: "DrukWideCyr Bold";
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(90deg, rgb(255, 255, 255), rgba(214, 193, 255, 0.95), rgb(255, 255, 255));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__hero-action {
  width: 100%;
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__open-btn {
  width: 100%;
  background: linear-gradient(90deg, rgb(38, 48, 245), rgb(30, 64, 175));
  padding: 0.95rem 1.25rem;
  border-radius: 1.25rem;
  font-weight: 800;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__open-btn:hover {
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.05);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 420px) {
  #profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__section-header {
    grid-template-columns: 1fr;
  }
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  overflow: hidden;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__section-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: rgba(180, 140, 255, 0.95);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__header {
  font-size: 1.15rem;
  padding: 0;
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__add-btn {
  margin-left: 0;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, rgb(34, 197, 94), rgb(16, 185, 129));
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  border-radius: 1.1rem;
  font-weight: 800;
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__add-btn:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
}
@media (max-width: 420px) {
  #profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__add-btn {
    justify-self: start;
  }
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__add-btn--icon-only {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__btn-icon {
  width: 16px;
  height: 16px;
  color: #fff;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__btn-text {
  line-height: 1;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__sublist {
  gap: 0.55rem;
  padding-top: 0;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__subitem {
  position: relative;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__sublink {
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(134, 69, 210, 0.2);
  border-radius: 1.1rem;
  padding: 0.75rem 4.15rem 0.75rem 0.85rem;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__sublink:hover {
  transform: translateY(-1px);
  border-color: rgba(134, 69, 210, 0.4);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__sublink--active {
  background: linear-gradient(90deg, rgba(255, 122, 0, 0.16), rgba(255, 255, 255, 0.03));
  border-color: rgba(255, 122, 0, 0.35);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__sublink--active::before {
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: rgba(255, 122, 0, 0.9);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__subindex {
  min-width: 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgb(255, 122, 0), rgb(255, 176, 0));
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .subitem__body {
  justify-content: center;
  gap: 0.1rem;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__subtitle {
  align-items: center;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__subtitle {
  color: rgba(255, 160, 70, 0.98);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__subtitle-text {
  color: inherit;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__actions {
  right: 0.9rem;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(-50%) scale(0.86);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@media (hover: hover) {
  #profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__subitem:hover .sidebar__actions {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
@media (hover: none) {
  #profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__actions {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action {
  width: 32px;
  height: 32px;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action:hover {
  transform: translateY(-1px);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action-icon {
  width: 16px;
  height: 16px;
  display: block;
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action--edit .sidebar__action-icon {
  color: rgba(56, 189, 248, 0.95);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action--edit:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.24);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action--delete .sidebar__action-icon {
  color: rgba(248, 113, 113, 0.95);
}
#profile.lessens--course .sidebar.sidebar--methodic-admin .sidebar__action--delete:hover {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.26);
}
#profile.lessens--course .sidebar.sidebar--wheel.sidebar--has-scroll .sidebar__scroll {
  --sidebar-wheel-fade: 24px;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#profile.lessens--course .sidebar.sidebar--wheel.sidebar--has-scroll.sidebar--fade-top.sidebar--fade-bottom .sidebar__scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
}
#profile.lessens--course .sidebar.sidebar--wheel.sidebar--has-scroll.sidebar--fade-top:not(.sidebar--fade-bottom) .sidebar__scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) 100%);
}
#profile.lessens--course .sidebar.sidebar--wheel.sidebar--has-scroll.sidebar--fade-bottom:not(.sidebar--fade-top) .sidebar__scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
}
#profile.lessens--course .ui_tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(0.985);
  transition: opacity 0.08s ease, transform 0.08s ease, visibility 0s linear 0.08s;
}
#profile.lessens--course .ui_tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.08s ease, transform 0.08s ease, visibility 0s;
}
#profile.lessens--course .ui_tooltip__inner {
  position: relative;
  max-width: min(380px, 42vw);
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(18, 18, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
}
#profile.lessens--course .ui_tooltip__inner:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: rgba(18, 18, 28, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(-50%) rotate(45deg);
}
#profile.lessens--course .ui_tooltip.is-left .ui_tooltip__inner:before {
  left: auto;
  right: -5px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(-50%) rotate(45deg);
}
#profile.lessens--course .interactive-games {
  margin: -1.75rem 0 -1.25rem;
  width: 100%;
  max-width: none;
  overflow: visible;
  padding: 1.75rem 0 1.75rem;
}
#profile.lessens--course .interactive-games__viewport {
  overflow-x: auto;
  overflow-y: visible;
  padding: 1.25rem 0 1.75rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  scrollbar-width: none;
}
#profile.lessens--course .interactive-games__viewport::-webkit-scrollbar {
  display: none;
}
#profile.lessens--course .interactive-games__viewport.is-dragging {
  cursor: grabbing;
}
#profile.lessens--course .interactive-games__track {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-width: max-content;
}
#profile.lessens--course .interactive-games__card {
  --interactive-game-hover-glow: rgba(255, 255, 255, .95);
  --interactive-game-surface-background: rgba(255,255,255,.08);
  --interactive-game-surface-border: rgba(210, 220, 255, .72);
  --interactive-game-hover-surface-background: #fff;
  --interactive-game-hover-border: #b7daff;
  --interactive-game-hover-shadow: 0 0 33px 17px rgba(255, 255, 255, .95);
  position: relative;
  min-height: 0;
  border-radius: 28px;
  overflow: visible;
  scroll-snap-align: start;
  isolation: isolate;
  transition: transform 0.22s ease;
  text-decoration: none;
  color: inherit;
}
#profile.lessens--course .interactive-games__card:before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 36px;
  border: 2px solid var(--interactive-game-hover-border);
  background: var(--interactive-game-hover-surface-background);
  box-shadow: var(--interactive-game-hover-shadow), 0 10px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) {
  #profile.lessens--course .interactive-games__card:hover {
    transform: translateY(-4px);
  }
  #profile.lessens--course .interactive-games__card:hover:before {
    opacity: 1;
  }
  #profile.lessens--course .interactive-games__card:hover .interactive-games__card-surface {
    box-shadow: 0 18px 32px rgba(5, 8, 27, 0.24);
  }
}
#profile.lessens--course .interactive-games__card--wide {
  flex: 0 0 388px;
  aspect-ratio: 16/9;
}
#profile.lessens--course .interactive-games__card--square {
  flex: 0 0 236px;
  aspect-ratio: 1/1;
}
#profile.lessens--course .interactive-games__card--orange {
  --interactive-game-hover-glow: rgba(255, 255, 255, .95);
  --interactive-game-hover-surface-background: #fff;
  --interactive-game-hover-shadow: 0 0 33px 17px rgba(255, 255, 255, .95);
}
#profile.lessens--course .interactive-games__card--coral {
  --interactive-game-hover-glow: #0ef;
  --interactive-game-hover-surface-background: #0ef;
  --interactive-game-hover-shadow: 2px 2px 33.8px 17px #0ef;
}
#profile.lessens--course .interactive-games__card--violet {
  --interactive-game-hover-glow: #ff2b2b;
  --interactive-game-hover-surface-background: #ff2b2b;
  --interactive-game-hover-shadow: 2px 2px 33.8px 17px #ff2b2b;
}
#profile.lessens--course .interactive-games__card--green {
  --interactive-game-hover-glow: #0dff00;
  --interactive-game-hover-surface-background: #0dff00;
  --interactive-game-hover-shadow: 2px 2px 33.8px 17px #0dff00;
}
#profile.lessens--course .interactive-games__card--pink {
  --interactive-game-hover-glow: #ff76ed;
  --interactive-game-hover-surface-background: #ff76ed;
  --interactive-game-hover-shadow: 2px 2px 33.8px 17px #ff76ed;
}
#profile.lessens--course .interactive-games__card--blue {
  --interactive-game-hover-glow: #4ca6ff;
  --interactive-game-hover-surface-background: #4ca6ff;
  --interactive-game-hover-shadow: 2px 2px 33.8px 17px #4ca6ff;
}
#profile.lessens--course .interactive-games__card--inactive {
  opacity: 0.72;
}
#profile.lessens--course .interactive-games__card--inactive .interactive-games__card-surface:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(41, 43, 90, 0.5);
  pointer-events: none;
  z-index: 2;
}
#profile.lessens--course .interactive-games__card--inactive .interactive-games__card-content {
  padding-right: 1rem;
}
@media (hover: hover) {
  #profile.lessens--course .interactive-games__card--inactive:hover {
    transform: none;
  }
  #profile.lessens--course .interactive-games__card--inactive:hover .interactive-games__card-surface {
    box-shadow: 0 18px 32px rgba(5, 8, 27, 0.24);
  }
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-surface:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(41, 43, 90, 0.5);
  pointer-events: none;
  z-index: 2;
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-content {
  padding-top: 0;
  padding-right: 1rem;
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-title::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.82em;
  height: 0.82em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V7a3 3 0 0 1 3-3z'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V7a3 3 0 0 1 3-3z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-hover-panel {
  position: absolute;
  inset: 0.85rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0.95rem;
  border-radius: 24px;
  border: 1px solid rgba(183, 218, 255, 0.4);
  background: linear-gradient(180deg, rgba(77, 84, 180, 0.18) 0%, rgba(21, 24, 60, 0.92) 100%);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32);
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-hover-content {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-hover-title {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-hover-description {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.76rem;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}
#profile.lessens--course .interactive-games__card--locked .interactive-games__card-hover-lock {
  width: 5.5rem;
  height: 5.5rem;
  opacity: 0;
  transform: translateY(-12px) rotate(-9deg);
  transition: opacity 0.28s ease, transform 0.28s ease;
  transform-origin: center top;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}
@media (hover: hover) {
  #profile.lessens--course .interactive-games__card--locked:hover .interactive-games__card-content {
    opacity: 0.12;
    transform: translateY(8px);
  }
  #profile.lessens--course .interactive-games__card--locked:hover .interactive-games__card-hover-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  #profile.lessens--course .interactive-games__card--locked:hover .interactive-games__card-hover-lock {
    opacity: 1;
    transform: translateY(0) rotate(0);
    animation: interactive_games_lock_swing 1.8s ease-in-out 0.12s infinite;
  }
}
#profile.lessens--course .interactive-games__card-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 2px solid var(--interactive-game-surface-border);
  background: var(--interactive-game-surface-background);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 18px 32px rgba(5, 8, 27, 0.24);
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  z-index: 1;
}
#profile.lessens--course .interactive-games__card-surface:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(7, 9, 29, 0.04) 0%, rgba(7, 10, 28, 0.18) 36%, rgba(7, 10, 28, 0.72) 100%);
  z-index: 1;
  pointer-events: none;
}
#profile.lessens--course .interactive-games__card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 26px;
}
#profile.lessens--course .interactive-games__card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
#profile.lessens--course .interactive-games__card-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  min-height: 100%;
  padding: 1.1rem 4.75rem 1.1rem 1.1rem;
  color: #fff;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#profile.lessens--course .interactive-games__card-title {
  margin: auto 0 0;
  font-size: 1.28rem;
  line-height: 1.04;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}
#profile.lessens--course .interactive-games__card-description {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.32;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}
#profile.lessens--course .interactive-games__card-action {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 4;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffc75d, #ff961f);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 12px 24px rgba(255, 167, 36, 0.52);
}
#profile.lessens--course .interactive-games__card-action-icon {
  width: 0.78rem;
  height: 0.78rem;
  display: block;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
  margin-left: -0.18rem;
}
#profile.lessens--course .interactive-games__card-hover-lock-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 640px) {
  #profile.lessens--course .interactive-games {
    margin: -1rem 0 -0.75rem;
    padding: 1rem 0 1rem;
  }
  #profile.lessens--course .interactive-games__viewport {
    padding: 1rem 0 1.25rem;
  }
  #profile.lessens--course .interactive-games__track {
    gap: 0.625rem;
  }
  #profile.lessens--course .interactive-games__card {
    border-radius: 22px;
  }
  #profile.lessens--course .interactive-games__card:before {
    inset: -5px;
    border-radius: 27px;
  }
  #profile.lessens--course .interactive-games__card--wide {
    flex: 0 0 min(82vw, 320px);
  }
  #profile.lessens--course .interactive-games__card--square {
    flex: 0 0 min(48vw, 168px);
  }
  #profile.lessens--course .interactive-games__card-surface {
    border-radius: 22px;
  }
  #profile.lessens--course .interactive-games__card-media {
    border-radius: 20px;
  }
  #profile.lessens--course .interactive-games__card-content {
    gap: 0.25rem;
    padding: 0.8rem 3.3rem 0.8rem 0.8rem;
  }
  #profile.lessens--course .interactive-games__card-title {
    font-size: 1rem;
  }
  #profile.lessens--course .interactive-games__card-description {
    font-size: 0.72rem;
  }
  #profile.lessens--course .interactive-games__card-action {
    right: 0.65rem;
    bottom: 0.65rem;
    width: 2.35rem;
    height: 2.35rem;
  }
}
#profile.lessens--course .lesson-game-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#profile.lessens--course .lesson-game-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#profile.lessens--course .lesson-game-preview__fullscreen, #profile.lessens--course .lesson-game-preview__fullscreen-close {
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
#profile.lessens--course .lesson-game-preview__stage {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 420px;
  background: rgba(255, 255, 255, 0.06);
}
#profile.lessens--course .lesson-game-preview__inline-host, #profile.lessens--course .lesson-game-preview__mount {
  width: 100%;
  min-height: 420px;
}
#profile.lessens--course .lesson-game-preview__inline-host iframe,
#profile.lessens--course .lesson-game-preview__inline-host canvas, #profile.lessens--course .lesson-game-preview__mount iframe,
#profile.lessens--course .lesson-game-preview__mount canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
  display: block;
}
#profile.lessens--course .lesson-game-preview__start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#profile.lessens--course .lesson-game-preview__status {
  margin: 0;
}
#profile.lessens--course .lesson-game-preview__fullscreen-layer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.78);
  padding: 1rem;
}
#profile.lessens--course .lesson-game-preview__fullscreen-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 1rem;
  background: #11142f;
  overflow: hidden;
}
#profile.lessens--course .lesson-game-preview__fullscreen-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  color: #fff;
}
#profile.lessens--course .lesson-game-preview__fullscreen-stage {
  flex: 1;
  min-height: 0;
}
#profile.lessens--course .lesson-game-preview__fullscreen-stage iframe,
#profile.lessens--course .lesson-game-preview__fullscreen-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
@keyframes lesson_aside_card_border_spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes interactive_games_lock_swing {
  0% {
    transform: translateY(0) rotate(-7deg);
  }
  50% {
    transform: translateY(-4px) rotate(7deg);
  }
  100% {
    transform: translateY(0) rotate(-7deg);
  }
}
#profile.lessens--course .lesson-tabs {
  display: none;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-track {
  background: transparent;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-corner {
  background: transparent;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:single-button, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:vertical:decrement, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:vertical:increment, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:horizontal:decrement, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:horizontal:increment, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:start:decrement, #profile.lessens--course .lesson-tabs .lesson-tabs__header::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#profile.lessens--course .lesson-tabs .toggle-switch__item {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  padding: 10px 12px;
  border-radius: 0.5rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
#profile.lessens--course .lesson-tabs .toggle-switch__item.toggle-switch__item--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
#profile.lessens--course .lesson-tabs .toggle-switch__item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}
#profile.lessens--course .lesson-tabs .lesson-tabs__panels {
  margin-top: 12px;
}
#profile.lessens--course .lesson-desktop-stack {
  display: block;
}
#profile.lessens--course .lesson-desktop-stack .desktop-three-col {
  display: grid;
  grid-template-columns: clamp(320px, 24vw, 388px) minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}
#profile.lessens--course .lesson-desktop-stack .desktop-three-col--without-actions {
  grid-template-columns: clamp(320px, 24vw, 388px) minmax(0, 1fr);
}
#profile.lessens--course .lesson-desktop-stack .lesson-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
#profile.lessens--course .lesson-desktop-stack .lessens--actions {
  min-width: 0;
}
#profile.lessens--course .lesson-desktop-stack .lesson-main {
  width: 100%;
  min-width: 0;
  justify-self: center;
}
#profile.lessens--course .lesson-desktop-stack .lesson-main .lesson--content {
  margin: 0 auto;
}
#profile.lessens--course .lesson-subheader {
  display: none;
}
#profile.lessens--course .lesson-subheader__inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
#profile.lessens--course .lesson-subheader__arrow {
  height: 44px;
  width: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, opacity 0.2s ease;
}
#profile.lessens--course .lesson-subheader__arrow .icon-chevron {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}
#profile.lessens--course .lesson-subheader__arrow:hover {
  background: rgba(255, 255, 255, 0.08);
}
#profile.lessens--course .lesson-subheader__arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
#profile.lessens--course .lesson-subheader__title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  text-align: initial;
  width: 100%;
  appearance: none;
  border: 0;
  background: linear-gradient(180deg, #FF7A00, #FF7A00);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) inset, 0 0 0 0 rgba(255, 122, 0, 0.45);
  color: #fff;
  border-radius: 100px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
}
#profile.lessens--course .lesson-subheader__index {
  white-space: nowrap;
  font-weight: 700;
}
#profile.lessens--course .lesson-subheader__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-align: left;
  overflow-wrap: anywhere;
  font-weight: 700;
}
#profile.lessens--course .aside_combo .aside_combo__close {
  display: none;
}
@media (max-width: 1199px) {
  #profile.lessens--course .lesson-subheader {
    display: block;
  }
  #profile.lessens--course .page-header__single-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #profile.lessens--course .lesson-page-progress {
    min-width: 0;
    width: 100%;
    margin-left: 0;
  }
  #profile.lessens--course .lesson-aside__cards,
  #profile.lessens--course .lesson-aside__group.group-card--desktop {
    display: none;
  }
  #profile.lessens--course .lesson-tabs {
    display: block;
  }
  #profile.lessens--course .lessens--actions {
    display: none;
  }
  #profile.lessens--course .lesson--video {
    aspect-ratio: 16/9;
    height: auto;
    max-height: none;
    border-radius: 0.75rem;
    margin-bottom: 12px;
  }
  #profile.lessens--course .lesson-desktop-stack {
    display: none;
  }
  #profile.lessens--course .lesson-course-layout {
    display: block;
  }
  #profile.lessens--course .lesson-course-layout turbo-frame#course_content {
    display: block;
  }
  #profile.lessens--course .lesson-course-content.profile__content--primary {
    display: flex;
    flex-direction: column;
  }
  #profile.lessens--course .lesson-course-content__media, #profile.lessens--course .lesson-course-content__body,
  #profile.lessens--course .lesson-course-content .lesson-subheader,
  #profile.lessens--course .lesson-course-content .interactive-games {
    grid-column: auto;
  }
  #profile.lessens--course .aside_combo {
    width: clamp(280px, 82vw, 360px);
    height: 100dvh;
    position: fixed;
    top: 0;
    --aside-sidebar-max-height: calc(100dvh - 56px);
    left: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    pointer-events: none;
  }
  #profile.lessens--course .aside_combo .sidebar {
    height: 100%;
  }
  #profile.lessens--course .aside_combo .aside_combo__close {
    display: inline-flex;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, transform 0.08s ease, opacity 0.2s ease;
  }
  #profile.lessens--course .aside_combo .aside_combo__close::before, #profile.lessens--course .aside_combo .aside_combo__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.9);
    transform-origin: center;
    transition: background 0.2s ease;
  }
  #profile.lessens--course .aside_combo .aside_combo__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #profile.lessens--course .aside_combo .aside_combo__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  #profile.lessens--course .aside_combo .aside_combo__close:hover {
    background: rgba(255, 255, 255, 0.16);
  }
  #profile.lessens--course .aside_combo .aside_combo__close:hover::before, #profile.lessens--course .aside_combo .aside_combo__close:hover::after {
    background: #fff;
  }
  #profile.lessens--course .aside_combo .aside_combo__close:active {
    transform: scale(0.96);
    opacity: 0.95;
  }
  #profile.lessens--course .aside_combo > .profile__block {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 56px;
  }
  #profile.lessens--course .aside_combo > .profile__block .sidebar {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  #profile.lessens--course .aside_combo .aside_combo__backdrop {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }
  #profile.lessens--course .aside_combo.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }
  #profile.lessens--course .aside_combo.is-open .aside_combo__backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 767px) {
  #profile.lessens--course .lesson-page-progress {
    padding: 0.625rem 0.75rem;
    gap: 0.75rem;
  }
  #profile.lessens--course .lesson-page-progress__label {
    font-size: 0.9rem;
  }
  #profile.lessens--course .lesson-page-progress__value {
    font-size: 1rem;
  }
  #profile.lessens--course .lesson-page-progress__ring {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
  #profile.lessens--course .lesson-page-progress__ring-value {
    font-size: 0.9rem;
  }
  #profile.lessens--course .aside_combo {
    width: 100svw;
    max-height: 100dvh;
    height: 100dvh;
    --aside-sidebar-max-height: calc(100dvh - 56px);
  }
  #profile.lessens--course .aside_combo .sidebar {
    max-height: 100%;
    border-radius: 0;
  }
  #profile.lessens--course .aside_combo .aside_combo__close {
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
  }
  #profile.lessens--course .aside_combo .aside_combo__close::before, #profile.lessens--course .aside_combo .aside_combo__close::after {
    width: 16px;
  }
  #profile.lessens--course .lesson-subheader__inner {
    grid-template-columns: 40px 1fr 40px;
  }
  #profile.lessens--course .lesson-subheader__arrow {
    width: 40px;
    height: 40px;
  }
  #profile.lessens--course .lesson-subheader__arrow .icon-chevron {
    font-size: 20px;
  }
  #profile.lessens--course .lesson-subheader__title {
    min-height: 40px;
    padding: 0.375rem 0.75rem;
  }
  #profile.lessens--course .lesson-tabs__header {
    padding: 0.5rem;
    gap: 0.375rem;
  }
  #profile.lessens--course .toggle-switch__item {
    padding: 0.75rem 0.625rem;
    font-size: 14px;
  }
  #profile.lessens--course .lesson-tabs__panels {
    margin-top: 10px;
  }
  #profile.lessens--course .profile__block,
  #profile.lessens--course .profile__block--primary,
  #profile.lessens--course .profile__block--secondary {
    border-radius: 0.75rem;
    padding: 14px;
  }
  #profile.lessens--course .btn-app {
    height: 48px;
    font-size: 15px;
  }
}

#profile.lessens--edit .profile__content--row {
  align-items: flex-start;
}
#profile.lessens--edit .aside_combo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: clamp(320px, 24vw, 388px);
  flex: 0 0 clamp(320px, 24vw, 388px);
  align-self: flex-start;
  --aside-sidebar-max-height: 80vh;
  height: auto;
  min-height: 0;
}
@supports (height: 1svh) {
  #profile.lessens--edit .aside_combo {
    --aside-sidebar-max-height: 80svh;
  }
}
#profile.lessens--edit .sidebar {
  flex: 1 1 auto;
  min-height: 0;
  height: fit-content;
  max-height: var(--aside-sidebar-max-height);
  overflow: hidden;
  padding: 0;
}
#profile.lessens--edit .sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: var(--aside-sidebar-max-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.125rem 0 1.125rem 1.875rem;
  padding-right: 0;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-track {
  background: transparent;
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-corner {
  background: transparent;
}
#profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:single-button, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:vertical:decrement, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:vertical:increment, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:horizontal:decrement, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:horizontal:increment, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:start:decrement, #profile.lessens--edit .sidebar__scroll::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
#profile.lessens--edit .sidebar.sidebar--wheel {
  position: relative;
}
#profile.lessens--edit .sidebar.sidebar--wheel .sidebar__header,
#profile.lessens--edit .sidebar.sidebar--wheel .sidebar__sublink {
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
#profile.lessens--edit .sidebar__list.dropdowns__wrapper {
  gap: 1.25rem;
  padding-right: 1.875rem;
}
#profile.lessens--edit .sidebar__list, #profile.lessens--edit .sidebar__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
#profile.lessens--edit .sidebar__header {
  padding: 0.25rem 0;
  align-items: flex-start;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#profile.lessens--edit .sidebar__index, #profile.lessens--edit .sidebar__title {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}
#profile.lessens--edit .sidebar__index {
  flex: 0 0 auto;
  white-space: nowrap;
}
#profile.lessens--edit .sidebar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#profile.lessens--edit .sidebar__icon {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.9;
}
#profile.lessens--edit .sidebar__icon.dropdown__header--arrow {
  margin-top: 2px;
}
#profile.lessens--edit .sidebar__sublist {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: 0.25rem;
}
#profile.lessens--edit .sidebar__sublink {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.5rem 0.45rem;
  border-radius: 0.8rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  transition: background 0.18s ease, color 0.18s ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
#profile.lessens--edit .sidebar__sublink:hover {
  background: rgba(255, 255, 255, 0.06);
}
#profile.lessens--edit .sidebar__state {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-top: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
  position: relative;
}
#profile.lessens--edit .sidebar__state-icon {
  width: 12px;
  height: 12px;
  display: block;
}
#profile.lessens--edit .sidebar__state--done {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
#profile.lessens--edit .sidebar__state--done .sidebar__state-icon {
  display: none;
}
#profile.lessens--edit .sidebar__state--done::before {
  content: "✓";
  font-weight: 900;
}
#profile.lessens--edit .sidebar__state--current {
  background: rgba(255, 122, 0, 0.2);
  border-color: rgba(255, 122, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.1);
}
#profile.lessens--edit .sidebar__state--current .sidebar__state-icon {
  display: none;
}
#profile.lessens--edit .sidebar__state--current::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #FF7A00;
  display: block;
}
#profile.lessens--edit .sidebar__state--locked {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
#profile.lessens--edit .sidebar__state--open:not(.sidebar__state--current):not(.sidebar__state--done) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
#profile.lessens--edit .sidebar__state--open:not(.sidebar__state--current):not(.sidebar__state--done) .sidebar__state-icon {
  opacity: 0.88;
}
#profile.lessens--edit .sidebar__subindex {
  min-width: 2.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
  padding-top: 2px;
}
#profile.lessens--edit .sidebar .subitem__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#profile.lessens--edit .sidebar__subtitle {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
}
#profile.lessens--edit .sidebar__subtitle-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
#profile.lessens--edit .sidebar__badge {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1;
  flex: 0 0 18px;
  margin-top: 1px;
}
#profile.lessens--edit .sidebar__badge--done {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}
#profile.lessens--edit .sidebar__badge--current {
  background: rgba(255, 122, 0, 0.18);
  color: #FF7A00;
}
#profile.lessens--edit .sidebar__sublink--done .sidebar__subindex {
  color: rgba(255, 255, 255, 0.45);
}
#profile.lessens--edit .sidebar__sublink--done .sidebar__subtitle {
  color: rgba(255, 255, 255, 0.78);
}
#profile.lessens--edit .sidebar__sublink--current .sidebar__subindex,
#profile.lessens--edit .sidebar__sublink--current .sidebar__subtitle {
  color: #FF7A00;
}
#profile.lessens--edit .sidebar__sublink--active {
  background: rgba(255, 122, 0, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 0, 0.18);
}
#profile.lessens--edit .sidebar__sublink--active .sidebar__subindex,
#profile.lessens--edit .sidebar__sublink--active .sidebar__subtitle {
  color: #FF7A00;
}
#profile.lessens--edit .sidebar__sublink--locked {
  opacity: 0.62;
}
#profile.lessens--edit .sidebar__sublink--locked .sidebar__subindex,
#profile.lessens--edit .sidebar__sublink--locked .sidebar__subtitle {
  color: rgba(255, 255, 255, 0.7);
}
#profile.lessens--edit .sidebar__header--locked {
  opacity: 0.72;
}
#profile.lessens--edit .sidebar__lock {
  display: inline-flex;
  margin-left: 0.5rem;
  vertical-align: middle;
}
#profile.lessens--edit .sidebar__lock-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}
#profile.lessens--edit .sidebar.sidebar--wheel.sidebar--has-scroll .sidebar__scroll {
  --sidebar-wheel-fade: 24px;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#profile.lessens--edit .sidebar.sidebar--wheel.sidebar--has-scroll.sidebar--fade-top.sidebar--fade-bottom .sidebar__scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
}
#profile.lessens--edit .sidebar.sidebar--wheel.sidebar--has-scroll.sidebar--fade-top:not(.sidebar--fade-bottom) .sidebar__scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--sidebar-wheel-fade), rgb(0, 0, 0) 100%);
}
#profile.lessens--edit .sidebar.sidebar--wheel.sidebar--has-scroll.sidebar--fade-bottom:not(.sidebar--fade-top) .sidebar__scroll {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - var(--sidebar-wheel-fade)), rgba(0, 0, 0, 0) 100%);
}

#new-year-modal form.form--horizontal,
#edit-year-modal form.form--horizontal,
#new-module-modal form.form--horizontal,
#edit-module-modal form.form--horizontal,
#new-lesson-modal form.form--horizontal,
#edit-lesson-modal form.form--horizontal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
#new-year-modal form.form--horizontal .title-small,
#edit-year-modal form.form--horizontal .title-small,
#new-module-modal form.form--horizontal .title-small,
#edit-module-modal form.form--horizontal .title-small,
#new-lesson-modal form.form--horizontal .title-small,
#edit-lesson-modal form.form--horizontal .title-small {
  margin: 0 0 0.25rem;
}
#new-year-modal form.form--horizontal .input__wrapper,
#edit-year-modal form.form--horizontal .input__wrapper,
#new-module-modal form.form--horizontal .input__wrapper,
#edit-module-modal form.form--horizontal .input__wrapper,
#new-lesson-modal form.form--horizontal .input__wrapper,
#edit-lesson-modal form.form--horizontal .input__wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 0.6rem;
}
#new-year-modal form.form--horizontal .form__label,
#edit-year-modal form.form--horizontal .form__label,
#new-module-modal form.form--horizontal .form__label,
#edit-module-modal form.form--horizontal .form__label,
#new-lesson-modal form.form--horizontal .form__label,
#edit-lesson-modal form.form--horizontal .form__label {
  text-align: left;
  align-self: flex-start;
}
#new-year-modal form.form--horizontal .input-row,
#edit-year-modal form.form--horizontal .input-row,
#new-module-modal form.form--horizontal .input-row,
#edit-module-modal form.form--horizontal .input-row,
#new-lesson-modal form.form--horizontal .input-row,
#edit-lesson-modal form.form--horizontal .input-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#new-year-modal form.form--horizontal .form__actions,
#edit-year-modal form.form--horizontal .form__actions,
#new-module-modal form.form--horizontal .form__actions,
#edit-module-modal form.form--horizontal .form__actions,
#new-lesson-modal form.form--horizontal .form__actions,
#edit-lesson-modal form.form--horizontal .form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.submodule-filter-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  flex-wrap: nowrap;
}
.submodule-filter-bar > .toggle-switch--secondary {
  flex: 0 0 auto;
}
.submodule-filter-bar__search {
  flex: 1 1 auto;
  min-width: 0;
}
.submodule-filter-bar__status {
  flex: 0 1 auto;
  min-width: 10rem;
  max-width: 14rem;
}
@media (max-width: 700px) {
  .submodule-filter-bar {
    flex-wrap: wrap;
  }
  .submodule-filter-bar > .toggle-switch--secondary {
    flex: 0 0 100%;
    width: 100%;
  }
  .submodule-filter-bar__search {
    flex: 1 1 auto;
  }
  .submodule-filter-bar__status {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
}

.entity-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 16rem;
  padding: 2.5rem 1rem;
  text-align: center;
}
.entity-list__empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  opacity: 0.45;
}
.entity-list__empty-title {
  color: rgba(255, 255, 255, 0.92);
}
.entity-list__empty-text {
  color: rgba(255, 255, 255, 0.55);
  max-width: 22rem;
}

.submodule-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.submodule-search-wrap .submodule-search-input {
  width: 100%;
  padding-right: 2.75rem;
  box-sizing: border-box;
}
.submodule-search-wrap .submodule-search-icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  opacity: 0.65;
  flex-shrink: 0;
}
.submodule-search-wrap .submodule-search-icon img, .submodule-search-wrap .submodule-search-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.lesson--manual-waiting {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(38, 48, 245, 0.22) 0, rgba(38, 48, 245, 0.06) 38%, transparent 100%), rgba(17, 17, 17, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.lesson--manual-waiting__art {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 9vw, 112px);
  height: clamp(72px, 9vw, 112px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lesson--manual-waiting__icon {
  width: 56%;
  height: 56%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.lesson--manual-waiting__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #fff;
}
.lesson--manual-waiting__text {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}
@media (max-width: 575px) {
  .lesson--manual-waiting {
    flex-direction: column;
    align-items: flex-start;
  }
}

.lesson-game-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lesson-game-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lesson-game-preview__fullscreen, .lesson-game-preview__fullscreen-close {
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.lesson-game-preview__stage {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 420px;
  background: rgba(255, 255, 255, 0.06);
}
.lesson-game-preview__inline-host, .lesson-game-preview__mount {
  width: 100%;
  min-height: 420px;
}
.lesson-game-preview__inline-host iframe,
.lesson-game-preview__inline-host canvas, .lesson-game-preview__mount iframe,
.lesson-game-preview__mount canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
  display: block;
}
.lesson-game-preview__start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.lesson-game-preview__status {
  margin: 0;
}
.lesson-game-preview__fullscreen-layer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.78);
  padding: 1rem;
}
.lesson-game-preview__fullscreen-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 1rem;
  background: #11142f;
  overflow: hidden;
}
.lesson-game-preview__fullscreen-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  color: #fff;
}
.lesson-game-preview__fullscreen-stage {
  flex: 1;
  min-height: 0;
}
.lesson-game-preview__fullscreen-stage iframe,
.lesson-game-preview__fullscreen-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.answer-image-cropper-modal {
  z-index: 100200;
}
.answer-image-cropper-modal__dialog {
  width: min(92vw, 760px);
}
.answer-image-cropper-modal__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.answer-image-cropper-modal .modal__body {
  padding: 1.25rem;
}
.answer-image-cropper-modal .answer-image-field__cropper-stage {
  --answer-image-cropper-stage-width: 360px;
  position: relative;
  width: min(100%, var(--answer-image-cropper-stage-width));
  aspect-ratio: 32/21;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.35);
  touch-action: none;
}
.answer-image-cropper-modal .answer-image-field__cropper-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  cursor: grab;
}
.answer-image-cropper-modal .answer-image-field__cropper-image.is-dragging {
  cursor: grabbing;
}
.answer-image-cropper-modal .answer-image-field__cropper-mask {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(7, 10, 25, 0.4) inset;
  pointer-events: none;
}
.answer-image-cropper-modal .answer-image-field__cropper-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.answer-image-cropper-modal .answer-image-field__cropper-sliders {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1 1 280px;
}
.answer-image-cropper-modal .answer-image-field__cropper-zoom,
.answer-image-cropper-modal .answer-image-field__cropper-size {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.answer-image-cropper-modal .answer-image-field__cropper-zoom input[type=range],
.answer-image-cropper-modal .answer-image-field__cropper-size input[type=range] {
  width: 100%;
}
.answer-image-cropper-modal .answer-image-field__cropper-zoom-label {
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.answer-image-cropper-modal .answer-image-field__cropper-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .answer-image-cropper-modal__dialog {
    width: calc(100vw - 1.5rem);
  }
  .answer-image-cropper-modal .modal__body {
    padding: 1rem;
  }
  .answer-image-cropper-modal .answer-image-field__cropper-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .answer-image-cropper-modal .answer-image-field__cropper-sliders {
    width: 100%;
  }
  .answer-image-cropper-modal .answer-image-field__cropper-actions {
    width: 100%;
  }
  .answer-image-cropper-modal .answer-image-field__cropper-actions .btn-app {
    flex: 1 1 0;
  }
}
.test-editor {
  gap: 3.75rem;
  width: 100%;
  min-width: 0;
}
.test-editor__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.test-editor__questions {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  width: 100%;
}
.test-editor__questions .question {
  width: 100%;
  min-width: 0;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.test-editor__questions .question--invalid {
  border-color: var(--form-error-color);
  box-shadow: var(--form-error-shadow);
}
.test-editor__questions .question__header {
  display: flex;
  align-items: center;
  gap: 1.875rem;
}
.test-editor__questions .question__type-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: min(23rem, 100%);
  flex: 1 1 23rem;
}
.test-editor__questions .question__type-label {
  color: rgba(255, 255, 255, 0.72);
}
.test-editor__questions .question__type-select {
  width: 100%;
}
.test-editor__questions .question__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  padding: 0;
}
.test-editor__questions .question__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}
.test-editor__questions .question__toggle img {
  display: block;
  transition: transform 0.2s ease;
}
.test-editor__questions .question__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.test-editor__questions .question__body .answers__wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 0;
  width: 100%;
}
.test-editor__questions .question__body .answers__wrapper--text .answer-row__field {
  gap: 0;
}
.test-editor__questions .question__body .answers__wrapper .answers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.test-editor__questions .question__body .answers__wrapper .answers .answer-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}
.test-editor__questions .question__body .answers__wrapper .answers .answer-row--invalid .input,
.test-editor__questions .question__body .answers__wrapper .answers .answer-row--invalid .question__input-free,
.test-editor__questions .question__body .answers__wrapper .answers .answer-row--invalid input,
.test-editor__questions .question__body .answers__wrapper .answers .answer-row--invalid textarea {
  border-color: var(--form-error-color);
  box-shadow: var(--form-error-shadow);
}
.test-editor__questions .question__body .answers__wrapper .answers .answer-row__selector {
  flex: 0 0 auto;
  padding-top: 0.9rem;
}
.test-editor__questions .question__body .answers__wrapper .answers .answer-row__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.test-editor__questions .question--collapsed .question__toggle img {
  transform: rotate(-90deg);
}
.test-editor__questions .question__text-answer-note {
  margin-left: 0;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
}
.test-editor__control--invalid {
  border-color: var(--form-error-color) !important;
  box-shadow: var(--form-error-shadow);
}
.test-editor__error-box {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  margin-top: 0.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 82, 82, 0.55);
  background: rgba(255, 82, 82, 0.1);
  box-shadow: 0 16px 40px rgba(14, 18, 56, 0.22);
  backdrop-filter: blur(16px);
}
.test-editor__error-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}
.test-editor__error-icon img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) saturate(100%) invert(41%) sepia(89%) saturate(2721%) hue-rotate(333deg) brightness(104%) contrast(101%);
}
.test-editor__error-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.test-editor__error-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 700;
  color: #ffb3b3;
}
.test-editor__error-list {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.test-editor__error-item {
  color: #ffd2d2;
  font-size: 0.95rem;
  line-height: 1.45;
}
.test-editor .answer-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}
.test-editor .answer-action img {
  display: block;
}
.test-editor .question__add-answer {
  align-self: flex-start;
}
@media (max-width: 768px) {
  .test-editor__questions .question__header {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .test-editor__questions .question__type-picker {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }
  .test-editor__questions .question__actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    padding-top: 0;
  }
  .test-editor__questions .question__body .answers__wrapper {
    padding-left: 0;
  }
  .test-editor__questions .question__body .answers__wrapper .answers .answer-row {
    flex-wrap: wrap;
  }
  .test-editor__questions .question__text-answer-note {
    margin-left: 0;
  }
}

.test-editor .question__field-hint {
  margin: 0.5rem 0 0;
  color: rgba(255, 255, 255, 0.64);
}
.test-editor .question__type-select .token-select__control {
  min-height: 3rem;
  padding: 0.85rem 3rem 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(14px);
}
.test-editor .question__type-select .token-select__control:focus {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.test-editor .question__type-select .token-select__single {
  color: #fff;
  font-weight: 600;
}
.test-editor .question__type-select .token-select__caret {
  opacity: 0.95;
}
.test-editor .answer-image-field {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.25rem;
  width: clamp(16rem, 58%, 32rem);
  max-width: 100%;
  align-self: flex-start;
}
.test-editor .answer-image-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.test-editor .answer-image-field__heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.test-editor .answer-image-field__label {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}
.test-editor .answer-image-field__hint {
  color: rgba(255, 255, 255, 0.54);
}
.test-editor .answer-image-field__surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13.5rem;
  cursor: pointer;
  border-radius: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.test-editor .answer-image-field__surface.is-empty {
  padding: 0.75rem;
}
.test-editor .answer-image-field__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}
.test-editor .answer-image-field__placeholder-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.test-editor .answer-image-field__placeholder-title {
  font-weight: 600;
}
.test-editor .answer-image-field__placeholder-text {
  max-width: 16rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
}
.test-editor .answer-image-field__preview {
  display: block;
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
}
.test-editor .answer-image-field__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.test-editor .answer-image-field__upload-button {
  display: inline-flex;
  align-items: center;
}
.test-editor .answer-image-field__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.test-editor .answer-image-field__icon-button:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}
.test-editor .answer-image-field__icon-button img {
  display: block;
  width: 1rem;
  height: 1rem;
}
.test-editor .answer-image-field__cropper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(27, 28, 76, 0.9);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.test-editor .answer-image-field__cropper[hidden] {
  display: none;
}
.test-editor .answer-image-field__cropper-stage {
  --answer-image-cropper-stage-width: 360px;
  position: relative;
  width: min(100%, var(--answer-image-cropper-stage-width));
  aspect-ratio: 16/10;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.35);
  touch-action: none;
}
.test-editor .answer-image-field__cropper-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  cursor: grab;
}
.test-editor .answer-image-field__cropper-image.is-dragging {
  cursor: grabbing;
}
.test-editor .answer-image-field__cropper-mask {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(7, 10, 25, 0.4) inset;
  pointer-events: none;
}
.test-editor .answer-image-field__cropper-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.test-editor .answer-image-field__cropper-zoom {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1 1 260px;
}
.test-editor .answer-image-field__cropper-zoom input[type=range] {
  width: 100%;
}
.test-editor .answer-image-field__cropper-zoom-label {
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.test-editor .answer-image-field__cropper-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.test-editor .answer-image-field__cancel-button {
  background: rgba(76, 97, 255, 0.16);
  border: 1px solid rgba(125, 145, 255, 0.32);
  color: rgba(236, 241, 255, 0.94);
}
.test-editor .answer-image-field__cancel-button:hover {
  background: rgba(76, 97, 255, 0.24);
  border-color: rgba(160, 178, 255, 0.42);
}
@media (max-width: 768px) {
  .test-editor .answer-image-field {
    width: 100%;
  }
  .test-editor .answer-image-field__header {
    align-items: flex-start;
  }
  .test-editor .answer-image-field__surface {
    min-height: clamp(7rem, 26vw, 10rem);
  }
  .test-editor .answer-image-field__placeholder {
    gap: 0.3rem;
  }
  .test-editor .answer-image-field__placeholder-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .test-editor .answer-image-field__placeholder-text {
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .test-editor .answer-image-field__preview {
    max-height: clamp(8rem, 30vw, 12rem);
  }
  .test-editor .answer-image-field__cropper {
    padding: 0.875rem;
  }
  .test-editor .answer-image-field__cropper-stage {
    --answer-image-cropper-stage-width: clamp(16rem, 80vw, 22rem);
  }
  .test-editor .answer-image-field__cropper-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .test-editor .answer-image-field__cropper-actions {
    width: 100%;
  }
  .test-editor .answer-image-field__cropper-actions .btn-app {
    flex: 1 1 0;
  }
}

.chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  flex: 1;
  min-height: 100%;
  max-height: 100%;
  position: relative;
}
.chat__preload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.chat {
  --composer-bg: #f4f6f8;
  --composer-border: rgba(0,0,0,.08);
  --composer-radius: 1.25rem;
  --composer-pad-y: .375rem;
  --composer-pad-x: .5rem;
  --chat-input-max-height: 132px;
}
.chat.chat--dark {
  --composer-bg: rgba(255,255,255,.06);
  --composer-border: rgba(255,255,255,.12);
}
.chat.chat--dark .chat__controls {
  padding: 0.75rem 1rem 1rem 1rem;
}
.chat.chat--dark .chat__composer {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  min-height: 3rem;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.chat.chat--dark .chat__input-clip {
  align-items: center;
  min-height: 2.75rem;
  background: transparent;
  border: none;
}
.chat.chat--dark .chat__input-clip:focus-within {
  box-shadow: none;
}
.chat.chat--dark .btn-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.24), rgba(139, 92, 246, 0.18));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.26);
}
.chat.chat--dark .btn-icon img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.chat.chat--dark .btn-icon:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(168, 85, 247, 0.24));
  transform: translateY(-1px);
}
.chat.chat--dark .chat__send {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.45);
}
.chat.chat--dark .chat__send img {
  filter: brightness(0) invert(1);
}
.chat.chat--dark .chat__send:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.38);
}
.chat.chat--dark .chat__send:disabled {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.chat.chat--dark .chat__attach,
.chat.chat--dark .conversation-panel__attach,
.chat.chat--dark .swp-chat__attach {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(245, 158, 11, 0.22));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.2);
}
.chat.chat--dark .chat__attach:hover:not(:disabled),
.chat.chat--dark .conversation-panel__attach:hover:not(:disabled),
.chat.chat--dark .swp-chat__attach:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.34), rgba(250, 204, 21, 0.26));
}
.chat.chat--dark .btn-icon,
.chat.chat--dark .chat__send {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
}
.chat.chat--dark .chat__textarea {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.96) !important;
  caret-color: rgba(255, 255, 255, 0.96);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
}
.chat.chat--dark .chat__textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.chat.chat--dark .chat__textarea.chat__textarea--multiline {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.chat.chat--dark .messages .message {
  --attach-bg: rgba(255,255,255,.07);
  --attach-border: rgba(255,255,255,.12);
  --attach-text: rgba(255,255,255,.92);
  --attach-hover: rgba(255,255,255,.10);
  --attach-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.chat.chat--dark .messages .message--incoming .message__bubble {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}
.chat.chat--dark .messages .message--incoming .message__bubble .message__content * {
  color: rgba(255, 255, 255, 0.92);
}
.chat.chat--dark .messages .message--incoming .message__bubble .message__time {
  color: rgba(255, 255, 255, 0.55);
}
.chat.chat--dark .messages .message--outgoing .message__bubble {
  background: rgba(95, 99, 239, 0.28);
  border-color: rgba(95, 99, 239, 0.28);
  color: rgba(255, 255, 255, 0.92);
}
.chat.chat--dark .messages .message--outgoing .message__bubble .message__content * {
  color: rgba(255, 255, 255, 0.92);
}
.chat.chat--dark .messages .message--outgoing .message__bubble .message__time {
  color: rgba(255, 255, 255, 0.55);
}
.chat.chat--dark .messages .message--system .message__bubble {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(124, 58, 237, 0.22);
}
.chat .messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.chat .messages::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.chat .messages::-webkit-scrollbar-track {
  background: transparent;
}
.chat .messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.chat .messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.chat .messages::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.chat .messages::-webkit-scrollbar-corner {
  background: transparent;
}
.chat .messages::-webkit-scrollbar-button, .chat .messages::-webkit-scrollbar-button:single-button, .chat .messages::-webkit-scrollbar-button:vertical:decrement, .chat .messages::-webkit-scrollbar-button:vertical:increment, .chat .messages::-webkit-scrollbar-button:horizontal:decrement, .chat .messages::-webkit-scrollbar-button:horizontal:increment, .chat .messages::-webkit-scrollbar-button:start:decrement, .chat .messages::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.chat .messages__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  width: 100%;
  padding: 1.875rem 1.875rem 0 1.875rem;
}
.chat .messages__inner .message {
  margin-top: 0.75rem;
}
.chat .messages__inner .message:first-child {
  margin-top: 0;
}
.chat .messages__inner .message.message--group-middle,
.chat .messages__inner .message.message--group-end {
  margin-top: 0.2rem;
}
.chat .messages .message {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: 85%;
  font-size: 1.25em;
  line-height: 1.35;
  --attach-bg: #f4f6f8;
  --attach-border: rgba(0,0,0,.10);
  --attach-text: #0f172a;
  --attach-hover: rgba(0,0,0,.08);
  --attach-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.chat .messages .message__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.25rem 0;
}
.chat .messages .message__attachments--in-bubble {
  margin: 0;
  gap: 0.5rem;
}
.chat .messages .message--incoming .chat .messages .message__attachments {
  justify-content: flex-start;
}
.chat .messages .message--outgoing .chat .messages .message__attachments {
  justify-content: flex-end;
}
.chat .messages .message--incoming {
  --attach-bg: $bg-incoming;
  --attach-border: rgba(0,0,0,.10);
  --attach-text: $black;
}
.chat .messages .message--outgoing {
  --attach-bg: lighten($bg-outgoing, 2%);
  --attach-border: rgba(38,48,245,.18);
  --attach-text: $black;
}
.chat .messages .message--system {
  --attach-bg: rgba(255,255,255,.10);
  --attach-border: rgba(255,255,255,.22);
  --attach-text: $black;
}
.chat .messages .message--system .message__bubble {
  background: #EEF2FF;
  color: #030305;
  border-color: rgba(38, 48, 245, 0.18);
}
.chat .messages .message--attachments-only .message__bubble {
  padding: 0.5rem 0.75rem;
  gap: 0.35rem;
}
.chat .messages .message--attachments-only .message__content {
  display: none;
}
.chat .messages .message__media {
  display: block;
  text-decoration: none;
}
.chat .messages .message__media img {
  display: block;
  max-height: 240px;
  max-width: 360px;
  object-fit: cover;
  border-radius: 0.75rem;
}
.chat .messages .message__attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--attach-border);
  border-radius: 0.75rem;
  background: var(--attach-bg);
  max-width: 100%;
  text-decoration: none;
  color: var(--attach-text) !important;
  box-shadow: var(--attach-shadow);
  transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.chat .messages .message__attachment:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  border-color: var(--attach-hover);
}
.chat .messages .message__attachment:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.chat .messages .message__attachment-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.9;
}
.chat .messages .message__attachment-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: inherit;
}
.chat .messages .message__attachment--image {
  padding: 0.25rem;
}
.chat .messages .message__attachment--image img {
  display: block;
  max-height: 160px;
  max-width: 280px;
  object-fit: cover;
  border-radius: 0.5rem;
}
.chat .messages .message__bubble {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 1rem;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(0px);
  overflow-wrap: anywhere;
  text-align: start;
}
.chat .messages .message__bubble p {
  margin: 0 0 0.4rem;
}
.chat .messages .message__bubble p:last-child {
  margin-bottom: 0;
}
.chat .messages .message__bubble ul, .chat .messages .message__bubble ol {
  margin: 0.4rem 0 0.4rem 1.2rem;
}
.chat .messages .message__bubble a {
  text-decoration: underline;
}
.chat .messages .message__time {
  margin-top: 0.25rem;
  align-self: flex-end;
  font-size: 0.875em;
  color: #A1AAB3;
  white-space: nowrap;
  line-height: 1;
}
.chat .messages .message__sender {
  display: none;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.2rem 0;
  opacity: 0.9;
}
.chat .messages .message.message--show-sender .message__sender {
  display: inline-flex;
}
.chat .messages .message[data-sender-kind=admin] .message__sender {
  color: #ef4444;
}
.chat .messages .message[data-sender-kind=moderator] .message__sender {
  color: #f97316;
}
.chat .messages .message[data-sender-kind=methodist] .message__sender {
  color: #8b5cf6;
}
.chat .messages .message[data-sender-kind=teacher] .message__sender, .chat .messages .message[data-sender-kind=support_manager] .message__sender {
  color: #2563eb;
}
.chat .messages .message[data-sender-kind=student] .message__sender, .chat .messages .message[data-sender-kind=participant] .message__sender, .chat .messages .message[data-sender-kind=user] .message__sender, .chat .messages .message[data-sender-kind=member] .message__sender {
  color: #22c55e;
}
.chat .messages .message[data-sender-kind=parent] .message__sender, .chat .messages .message[data-sender-kind=child] .message__sender, .chat .messages .message[data-sender-kind=school] .message__sender {
  color: #06b6d4;
}
.chat .messages .message[data-sender-kind=guest] .message__sender {
  color: #f59e0b;
}
.chat .messages .message[data-sender-kind=ai] .message__sender, .chat .messages .message[data-sender-kind=system] .message__sender {
  color: #7c3aed;
}
.chat .messages .message--incoming {
  align-self: flex-start;
  margin-right: auto;
}
.chat .messages .message--incoming .message__avatar {
  display: flex;
}
.chat .messages .message--incoming .message__bubble {
  background: #FFFFFF;
  color: #030305;
  border-radius: 1rem;
  border-color: rgba(15, 23, 42, 0.08);
}
.chat .messages .message--incoming .message__bubble .message__content * {
  color: #030305;
}
.chat .messages .message--incoming.loader .message__bubble {
  display: block;
  background-color: #2630f5;
}
.chat .messages .message--outgoing {
  flex-direction: column;
  align-self: flex-end;
  margin-left: auto;
  align-items: flex-end;
}
.chat .messages .message--outgoing .message__bubble {
  background: #DFF9D2;
  color: #030305;
  border-radius: 1rem;
  border-color: rgba(15, 23, 42, 0.06);
}
.chat .messages .message--outgoing .message__bubble .message__time {
  color: #030305;
}
.chat .messages .message__avatar {
  flex: 0 0 2.875rem;
  display: none;
  align-items: flex-end;
}
.chat .messages .message__avatar .avatar-initials,
.chat .messages .message__avatar .avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: var(--avatar-bg, linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.88)));
  color: var(--avatar-fg, #fff);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
}
.chat .messages .message__avatar .avatar-img {
  display: block;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}
.chat .messages .message__avatar--hidden {
  visibility: hidden;
}
.chat .messages .message.message--incoming.message--single .message__bubble {
  border-radius: 1rem 1rem 1rem 0.25rem;
}
.chat .messages .message.message--incoming.message--group-start .message__bubble {
  border-radius: 1rem 1rem 1rem 0.35rem;
}
.chat .messages .message.message--incoming.message--group-middle .message__bubble {
  border-radius: 0.35rem 1rem 1rem 0.35rem;
}
.chat .messages .message.message--incoming.message--group-end .message__bubble {
  border-radius: 0.35rem 1rem 1rem 0.25rem;
}
.chat .messages .message.message--outgoing.message--single .message__bubble {
  border-radius: 1rem 1rem 0.25rem 1rem;
}
.chat .messages .message.message--outgoing.message--group-start .message__bubble {
  border-radius: 1rem 1rem 0.35rem 1rem;
}
.chat .messages .message.message--outgoing.message--group-middle .message__bubble {
  border-radius: 1rem 0.35rem 0.35rem 1rem;
}
.chat .messages .message.message--outgoing.message--group-end .message__bubble {
  border-radius: 1rem 0.35rem 0.25rem 1rem;
}
.chat .messages .message.message--enter {
  animation: chatMessageIn 0.22s ease-out both;
}
@keyframes chatMessageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat .messages #chat_loader {
  height: fit-content;
  width: fit-content;
  margin-top: 1rem;
  margin-left: 3.625rem;
}
.chat .messages #chat_loader .message__bubble {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(124, 58, 237, 0.22);
}
.chat .messages #chat_loader .loader-dots {
  display: flex;
  gap: 4px;
}
.chat .messages #chat_loader .loader-dots .dot {
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  animation: bounce 1s infinite ease-in-out both;
}
.chat .messages #chat_loader .loader-dots .dot:nth-child(1) {
  animation-delay: 0s;
}
.chat .messages #chat_loader .loader-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.chat .messages #chat_loader .loader-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}
.chat__triggers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: none;
  padding: 0.25rem 0.5rem;
  margin: 0 0 0.25rem 0;
  background: transparent;
  color: #030305;
}
.chat__triggers--title {
  display: flex;
  align-items: flex-start;
  color: #fff;
}
.chat__triggers .trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 1.7rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease, border-color 0.18s ease, color 0.18s ease;
}
.chat__triggers .trigger-btn__spinner {
  display: none;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: trigger-btn-spin 0.85s linear infinite;
}
.chat__triggers .trigger-btn.is-loading {
  pointer-events: none;
  cursor: default;
  transform: none;
  opacity: 0.9;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
}
.chat__triggers .trigger-btn.is-loading .trigger-btn__spinner {
  display: inline-block;
}
.chat__triggers .trigger-btn.is-loading:hover {
  transform: none;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
}
.chat__triggers .trigger-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}
.chat__triggers .trigger-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.chat__triggers .trigger-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}
.chat__triggers .trigger-btn--primary {
  background: linear-gradient(135deg, #ffb347, #ff8a2f);
  border-color: rgba(255, 138, 47, 0.5);
  box-shadow: 0 18px 36px rgba(255, 138, 47, 0.7);
  color: #fff;
}
.chat__triggers .trigger-btn--primary:hover {
  background: linear-gradient(135deg, #ffc25d, #ff9336);
}
.chat__triggers .trigger-btn--primary:active {
  background: linear-gradient(135deg, #ff9a3a, #ff7f2a);
}
.chat__triggers .trigger-btn--easy {
  background-color: #048BF2;
}
.chat__triggers .trigger-btn--medium {
  background-color: #7F29FA;
}
.chat__triggers .trigger-btn--hard {
  background-color: #F63972;
}
@keyframes trigger-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.chat__triggers ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  margin: 0;
}
.chat__triggers ul li {
  flex: 1;
  list-style-type: none;
}
.chat__triggers .chat-attach__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.chat__triggers .chat-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.1));
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
  max-width: 100%;
  color: inherit;
}
.chat__triggers .chat-attach__thumb {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.chat__triggers .chat-attach__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat__triggers .chat-attach__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(236, 72, 153, 0.16));
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.chat__triggers .chat-attach__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.chat__triggers .chat-attach__name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.chat__triggers .chat-attach__size {
  opacity: 0.7;
  font-size: 0.85em;
  color: #fff;
}
.chat__triggers .chat-attach__remove {
  margin-left: 0.25rem;
  border: 0;
  background: transparent;
  font-size: 1.1em;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 0 0.125rem;
}
.chat__triggers .chat-attach__remove:hover {
  opacity: 0.8;
}
.chat__triggers-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(0.75rem, 3vw, 1.25rem);
  width: 100%;
  padding: clamp(0.5rem, 3vw, 1rem);
  margin-top: 0.25rem;
  border-radius: 1.5rem;
  background: radial-gradient(130% 150% at 0% 0%, rgba(38, 48, 245, 0.28) 0, rgba(38, 48, 245, 0.06) 35%, transparent 100%), rgba(5, 8, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
  position: relative;
}
.chat__trigger-btn.is-selected .trigger-btn {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.22);
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.chat__trigger-btn.is-selected .trigger-btn:hover {
  transform: none;
  box-shadow: none;
}
.chat__completed-options {
  display: flex;
  gap: 1rem;
}
.chat__confirmation-message {
  max-width: 40rem;
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.chat__confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.chat__confirmation-actions .chat__button {
  min-width: 9rem;
  font-weight: 600;
  white-space: nowrap;
}
.chat__confirmation-actions .chat__button.chat__button_confirm {
  box-shadow: 0 10px 22px rgba(255, 138, 60, 0.45);
}
.chat__confirmation-actions .chat__button.chat__button_cancel {
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  color: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}
.chat__confirmation-actions .chat__button.chat__button_cancel:hover {
  background: rgba(255, 255, 255, 0.24);
}
.chat.chat--dark .chat__triggers {
  color: #fff;
}
.chat.chat--dark .chat__triggers .chat-attach {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.24), rgba(124, 58, 237, 0.18));
  border-color: rgba(255, 255, 255, 0.16);
}
.chat.chat--dark .chat__triggers .chat-attach .chat-attach__thumb {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
.chat.chat--dark .chat__triggers .chat-attach .chat-attach__icon {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.18);
}
.chat.chat--dark .messages .message {
  --attach-bg: rgba(255,255,255,.06);
  --attach-border: rgba(255,255,255,.16);
  --attach-text: #fff;
}
.chat.chat--dark .messages .message.message--outgoing {
  --attach-bg: rgba(221,222,255,.16);
  --attach-border: rgba(221,222,255,.35);
  --attach-text: #fff;
}
.chat.chat--dark .messages .message.message--system {
  --attach-bg: rgba(255,255,255,.12);
  --attach-border: rgba(255,255,255,.22);
  --attach-text: #fff;
}
.chat.chat--dark .messages .message .message__attachment {
  background: var(--attach-bg);
  border-color: var(--attach-border);
  color: var(--attach-text) !important;
}
.chat__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  margin-top: auto;
  padding: 1rem;
}
.chat__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0.6rem 1.7rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease, border-color 0.18s ease, color 0.18s ease;
}
.chat__action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}
.chat__action-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.chat__action-btn.is-loading {
  pointer-events: none;
  cursor: default;
  transform: none;
  opacity: 0.9;
}
.chat__action-btn.is-loading:after {
  content: "";
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.6rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: trigger-btn-spin 0.85s linear infinite;
}
.chat__action-btn.is-loading:hover {
  transform: none;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
}
.chat__action-btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}
.chat__action-btn--success {
  background: linear-gradient(135deg, #00b863, #00a152);
  border-color: rgba(0, 162, 90, 0.45);
  box-shadow: 0 18px 36px rgba(0, 162, 90, 0.65);
  color: #fff;
}
.chat__action-btn--success:hover {
  background: linear-gradient(135deg, #00c86c, #00aa56);
}
.chat__action-btn--success:active {
  background: linear-gradient(135deg, #00a655, #00914a);
}
.chat__action-btn--accent {
  background: linear-gradient(135deg, #ffb347, #ff8a2f);
  border-color: rgba(255, 138, 47, 0.5);
  box-shadow: 0 18px 36px rgba(255, 138, 47, 0.7);
  color: #fff;
}
.chat__action-btn--accent:hover {
  background: linear-gradient(135deg, #ffc25d, #ff9336);
}
.chat__action-btn--accent:active {
  background: linear-gradient(135deg, #ff9a3a, #ff7f2a);
}
.chat__action-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}
.chat__action-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}
.chat__action-btn--ghost:active {
  background: rgba(255, 255, 255, 0.24);
}
.chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  background: transparent;
}
.chat__input-clip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  background: transparent;
  border: none;
  overflow: visible;
  padding: 0;
}
.chat__textarea {
  width: 100%;
  min-height: 2.875rem;
  max-height: var(--chat-input-max-height);
  padding: 0.6875rem 1rem;
  line-height: 1.45;
  font: inherit;
  font-size: 1.05rem;
  background: var(--composer-bg);
  color: #030305 !important;
  caret-color: #030305;
  -webkit-text-fill-color: #030305;
  border: 1px solid var(--composer-border);
  border-radius: var(--composer-radius);
  outline: 0;
  resize: none;
  overflow-y: hidden;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}
.chat__textarea:focus {
  box-shadow: 0 0 0 2px rgba(38, 48, 245, 0.15);
}
.chat__textarea::placeholder {
  color: rgba(3, 3, 5, 0.55);
}
.chat__textarea.chat__textarea--multiline {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.chat .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--composer-border);
  border-radius: 9999px;
  background: #EEF2FF;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}
.chat .btn-icon img {
  max-width: 20px;
  max-height: 20px;
}
.chat .btn-icon:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat__send {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 12px 26px rgba(5, 150, 105, 0.32);
}
.chat__send:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(5, 150, 105, 0.28);
}
.chat__send {
  justify-content: center;
  height: 46px;
  min-width: 46px;
  padding: 0 0.875rem;
  cursor: pointer;
  color: #fff;
  background-color: #2630f5;
  border: none;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}
.chat__send:disabled {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 768px) {
  .chat__confirmation {
    padding: 0.875rem 1rem;
    border-radius: 1.25rem;
  }
  .chat__confirmation-message {
    font-size: 1rem;
  }
  .chat__controls {
    align-items: stretch;
  }
  .chat__composer {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.625rem;
  }
  .chat__input-clip {
    order: 1;
    flex: 1 0 100%;
    width: 100%;
  }
  .chat__attach {
    order: 2;
  }
  .chat .btn-icon:not(.chat__attach) {
    order: 3;
  }
  .chat .chat__send {
    order: 4;
    margin-left: auto;
  }
  .chat .messages__inner {
    padding: 1rem 1rem 0 1rem;
  }
}

.learning-list {
  --ll-blue: #2f7ff0;
  --ll-blue-hover: #3d8bff;
  --ll-green: #2fbf71;
  --ll-orange: #ff8a1e;
  --ll-red: #ff5d78;
  --ll-card: linear-gradient(100deg, #2c2857 0%, #232048 55%, #1f1c40 100%);
  --ll-item: rgba(30, 26, 60, .85);
  --ll-stroke: rgba(255, 255, 255, .09);
  --ll-track: rgba(255, 255, 255, .13);
  --ll-dim: rgba(255, 255, 255, .62);
  --ll-faint: rgba(255, 255, 255, .55);
  --ll-ease: cubic-bezier(.22, 1, .36, 1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  color: #fff;
}
.learning-list__scroll {
  min-width: 0;
}
.learning-list__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--ll-card);
  border: 1px solid var(--ll-stroke);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(10, 8, 40, 0.35);
}
.learning-list__head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 18px;
  border: 1px solid transparent;
}
.learning-list__head--hw .learning-list__head-icon {
  color: var(--ll-red);
  background: rgba(255, 77, 109, 0.14);
  border-color: rgba(255, 77, 109, 0.4);
}
.learning-list__head--lessons .learning-list__head-icon {
  color: var(--ll-orange);
  background: rgba(255, 138, 30, 0.13);
  border-color: rgba(255, 138, 30, 0.4);
}
.learning-list__head-icon-svg {
  width: 26px;
  height: 26px;
}
.learning-list__head-text {
  flex: 1;
  min-width: 0;
}
.learning-list__head-title {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1rem + 0.9vw, 24px);
  line-height: 1.15;
  color: #fff;
}
.learning-list__head-sub {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--ll-dim);
}
.learning-list__head-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 999px;
  background: var(--ll-blue);
  box-shadow: 0 10px 24px rgba(47, 127, 240, 0.45);
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.learning-list__head-count.is-done {
  background: var(--ll-green);
  box-shadow: 0 10px 24px rgba(47, 191, 113, 0.4);
}
.learning-list__head-count-svg {
  width: 22px;
  height: 22px;
  color: #fff;
}
.learning-list__hw-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.learning-list__hw-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  grid-template-areas: "icon main chips go";
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: var(--ll-item);
  border: 1px solid var(--ll-stroke);
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  animation: learning-list-in 0.5s var(--ll-ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform 0.45s var(--ll-ease), box-shadow 0.45s var(--ll-ease), border-color 0.35s ease;
}
.learning-list__hw-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 44px rgba(10, 8, 40, 0.4);
}
.learning-list__hw-item:hover .learning-list__hw-go {
  transform: translate(1px, -1px);
  background: var(--ll-blue-hover);
}
.learning-list__hw-item:focus-visible {
  outline: 2px solid #8ec4ff;
  outline-offset: 2px;
}
.learning-list__hw-go {
  grid-area: go;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--ll-blue);
  box-shadow: 0 8px 18px rgba(47, 127, 240, 0.4);
  color: #fff;
  transition: transform 0.35s var(--ll-ease), background 0.25s ease;
}
.learning-list__hw-go .learning-list__btn-arrow {
  width: 15px;
  height: 15px;
}
.learning-list__hw-icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --icon-glow: rgba(79, 70, 229, .45);
  background: linear-gradient(160deg, #5b93ff, #6366f1);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 -5px 10px rgba(0, 0, 0, 0.28), 0 8px 18px var(--icon-glow);
}
.learning-list__hw-icon--c0 {
  background: linear-gradient(160deg, #5b93ff, #6366f1);
  --icon-glow: rgba(79, 70, 229, .48);
}
.learning-list__hw-icon--c1 {
  background: linear-gradient(160deg, #34d399, #06b6d4);
  --icon-glow: rgba(6, 182, 212, .48);
}
.learning-list__hw-icon--c2 {
  background: linear-gradient(160deg, #c084fc, #d946ef);
  --icon-glow: rgba(217, 70, 239, .45);
}
.learning-list__hw-icon--c3 {
  background: linear-gradient(160deg, #fbbf24, #f43f5e);
  --icon-glow: rgba(244, 63, 94, .45);
}
.learning-list__hw-icon--c4 {
  background: linear-gradient(160deg, #38bdf8, #3b82f6);
  --icon-glow: rgba(59, 130, 246, .48);
}
.learning-list__hw-icon--c5 {
  background: linear-gradient(160deg, #fb7185, #fb923c);
  --icon-glow: rgba(251, 113, 133, .45);
}
.learning-list__hw-main {
  grid-area: main;
  min-width: 0;
  text-align: left;
  justify-self: start;
}
.learning-list__hw-title {
  margin: 0;
  text-align: left;
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.learning-list__hw-meta {
  margin: 5px 0 0;
  text-align: left;
  font-size: 12.5px;
  color: var(--ll-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learning-list__hw-chips {
  grid-area: chips;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.learning-list__chip {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.learning-list__chip--diff {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.28);
}
.learning-list__chip--diff-easy {
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3);
}
.learning-list__chip--diff-medium {
  background: rgba(129, 140, 248, 0.2);
  color: #c4b5fd;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.32);
}
.learning-list__chip--diff-hard {
  background: rgba(251, 113, 133, 0.18);
  color: #fda4af;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.32);
}
.learning-list__chip--status {
  font-weight: 700;
  font-size: 12px;
}
.learning-list__chip--work {
  background: rgba(251, 146, 60, 0.2);
  color: #ffbf80;
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.32);
}
.learning-list__chip--new {
  background: rgba(96, 165, 250, 0.2);
  color: #bcd6ff;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.32);
}
.learning-list__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 0;
  background: var(--ll-blue);
  box-shadow: 0 10px 22px rgba(47, 127, 240, 0.35);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.35s var(--ll-ease), filter 0.3s ease;
}
.learning-list__btn:hover {
  background: var(--ll-blue-hover);
  transform: scale(1.04);
}
.learning-list__btn:focus-visible {
  outline: 2px solid #8ec4ff;
  outline-offset: 2px;
}
.learning-list__btn--orange {
  padding: 14px 26px;
  background: linear-gradient(97deg, #ff9d2e, #f97316);
  box-shadow: 0 14px 34px rgba(249, 115, 22, 0.4);
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
}
.learning-list__btn--orange:hover {
  filter: brightness(1.07);
  transform: scale(1.02);
}
.learning-list__btn--ghost {
  padding: 14px 24px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.learning-list__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}
.learning-list__btn-arrow {
  width: 13px;
  height: 13px;
  flex: none;
}
.learning-list__course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 20px;
}
.learning-list__course-card {
  display: flex;
  flex-direction: column;
  background: #211e44;
  border: 1px solid var(--ll-stroke);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  animation: learning-list-in 0.5s var(--ll-ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform 0.45s var(--ll-ease), box-shadow 0.45s var(--ll-ease), border-color 0.35s ease;
}
.learning-list__course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 50px rgba(10, 8, 40, 0.45);
}
.learning-list__course-card:hover .learning-list__course-arrow {
  transform: translate(1px, -1px);
}
.learning-list__course-card:focus-visible {
  outline: 2px solid #8ec4ff;
  outline-offset: 2px;
}
.learning-list__course-cover {
  position: relative;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}
.learning-list__course-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1.4px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.3;
}
.learning-list__course-cover .learning-list__course-cover-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.learning-list__course-cover--c0 {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}
.learning-list__course-cover--c1 {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}
.learning-list__course-cover--c2 {
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
}
.learning-list__course-cover--c3 {
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
}
.learning-list__course-cover--c4 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.learning-list__course-cover--c5 {
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
}
.learning-list__course-init {
  position: relative;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.93);
  text-shadow: 0 6px 24px rgba(10, 8, 40, 0.35);
}
.learning-list__course-mod {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(12, 10, 32, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.learning-list__course-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  flex: 1;
  text-align: left;
}
.learning-list__course-title {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning-list__course-next {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ll-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.learning-list__course-next-label {
  color: rgba(255, 255, 255, 0.4);
}
.learning-list__course-progrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.learning-list__course-frac {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}
.learning-list__course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ll-stroke);
  padding-top: 12px;
  margin-top: 2px;
}
.learning-list__course-cta {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.learning-list__course-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 999px;
  background: var(--ll-blue);
  box-shadow: 0 8px 18px rgba(47, 127, 240, 0.4);
  color: #fff;
  transition: background 0.25s ease, transform 0.35s var(--ll-ease);
}
.learning-list__progress-track {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: var(--ll-track);
  overflow: hidden;
}
.learning-list__progress-fill {
  height: 100%;
  border-radius: 99px;
  width: var(--p, 0%);
  transition: width 0.8s var(--ll-ease);
}
.learning-list__progress-fill--course {
  background: linear-gradient(90deg, #ff9d2e, #ff7c10);
}
.learning-list__empty {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
  background: var(--ll-card);
  border: 1px solid var(--ll-stroke);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(10, 8, 40, 0.35);
}
.learning-list__empty-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  animation: learning-list-glow 7s ease-in-out infinite;
}
.learning-list__empty--hw .learning-list__empty-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 65%);
}
.learning-list__empty--lessons .learning-list__empty-glow {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.28), transparent 65%);
}
.learning-list__empty-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  animation: learning-list-ring 9s ease-in-out infinite;
}
.learning-list__empty-ring--tr {
  width: 360px;
  height: 360px;
  top: -130px;
  right: -100px;
}
.learning-list__empty-ring--bl {
  width: 240px;
  height: 240px;
  bottom: -80px;
  left: -70px;
  border-color: rgba(255, 255, 255, 0.09);
  animation-duration: 12s;
  animation-delay: 1s;
}
.learning-list__empty-dot {
  position: absolute;
  border-radius: 50%;
  animation: learning-list-twinkle 4s ease-in-out infinite;
}
.learning-list__empty-dot:nth-of-type(1) {
  left: 19%;
  top: 27%;
  width: 8px;
  height: 8px;
  background: #ff8a1e;
  opacity: 0.75;
  animation-duration: 3.4s;
}
.learning-list__empty-dot:nth-of-type(2) {
  left: 27%;
  top: 65%;
  width: 6px;
  height: 6px;
  background: #57a8ff;
  opacity: 0.7;
  animation-delay: 0.6s;
}
.learning-list__empty-dot:nth-of-type(3) {
  left: 74%;
  top: 29%;
  width: 7px;
  height: 7px;
  background: #a855f7;
  opacity: 0.75;
  animation-duration: 4.6s;
  animation-delay: 1s;
}
.learning-list__empty-dot:nth-of-type(4) {
  left: 82%;
  top: 58%;
  width: 9px;
  height: 9px;
  background: #ff4d6d;
  opacity: 0.65;
  animation-delay: 1.3s;
}
.learning-list__empty-dot:nth-of-type(5) {
  left: 61%;
  top: 17%;
  width: 6px;
  height: 6px;
  background: #2fbf71;
  opacity: 0.7;
  animation-duration: 3s;
}
.learning-list__empty-dot:nth-of-type(6) {
  left: 38%;
  top: 19%;
  width: 5px;
  height: 5px;
  background: #ffd166;
  opacity: 0.8;
  animation-delay: 0.8s;
}
.learning-list__empty-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 460px;
}
.learning-list__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98px;
  height: 98px;
  border-radius: 30px;
  color: #fff;
  animation: learning-list-float 4.5s ease-in-out infinite alternate;
}
.learning-list__empty--hw .learning-list__empty-icon {
  background: linear-gradient(135deg, #4e8ef7, #8b5cf6);
  box-shadow: 0 22px 55px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.learning-list__empty--lessons .learning-list__empty-icon {
  background: linear-gradient(135deg, #ffa02f, #f43f5e);
  box-shadow: 0 22px 55px rgba(249, 115, 22, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.learning-list__empty-icon-svg {
  width: 42px;
  height: 42px;
}
.learning-list__empty-title {
  margin: 26px 0 0;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #fff;
}
.learning-list__empty-text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}
.learning-list__empty-actions {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes learning-list-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes learning-list-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}
@keyframes learning-list-glow {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes learning-list-twinkle {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.3);
  }
}
@keyframes learning-list-ring {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@media (max-width: 1100px) {
  .learning-list__head {
    gap: 15px;
    padding: 16px 20px;
    border-radius: 22px;
  }
  .learning-list__head-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
  .learning-list__head-icon-svg {
    width: 23px;
    height: 23px;
  }
  .learning-list__head-count {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .learning-list__hw-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "icon main go" "icon chips go";
    row-gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
  }
  .learning-list__hw-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 12.5px;
  }
  .learning-list__hw-chips {
    justify-content: flex-start;
  }
  .learning-list__course-grid {
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 14px;
  }
  .learning-list__empty {
    min-height: 500px;
    padding: 40px;
    border-radius: 22px;
  }
  .learning-list__empty-icon {
    width: 88px;
    height: 88px;
    border-radius: 26px;
  }
  .learning-list__empty-title {
    font-size: 22px;
  }
}
@media (max-width: 640px) {
  .learning-list__head {
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
  }
  .learning-list__head-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .learning-list__head-title {
    font-size: 16px;
  }
  .learning-list__head-sub {
    font-size: 11.5px;
  }
  .learning-list__head-count {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }
  .learning-list__hw-item {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon main go" "chips chips chips";
    gap: 11px;
    padding: 15px;
    border-radius: 16px;
  }
  .learning-list__hw-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 11.5px;
  }
  .learning-list__hw-chips {
    justify-content: flex-start;
  }
  .learning-list__chip {
    padding: 5px 11px;
    font-size: 11px;
  }
  .learning-list__course-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .learning-list__empty {
    min-height: 460px;
    padding: 32px 18px;
    border-radius: 18px;
  }
  .learning-list__empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
  }
  .learning-list__empty-title {
    font-size: 18px;
  }
  .learning-list__empty-text {
    font-size: 13px;
    max-width: 290px;
  }
  .learning-list__empty-actions {
    margin-top: 22px;
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .learning-list__empty-actions .learning-list__btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learning-list__hw-item,
  .learning-list__course-card,
  .learning-list__empty-glow,
  .learning-list__empty-ring,
  .learning-list__empty-dot,
  .learning-list__empty-icon,
  .learning-modal__placeholder-spinner {
    animation: none;
  }
}
.learning-modal .modal__content {
  padding: 1.5rem;
  background: linear-gradient(150deg, #241f4d 0%, #1d1a3e 60%, #191634 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.learning-modal .modal__body {
  overflow: hidden;
}
.learning-modal__frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.learning-modal .learning-list {
  flex: 1 1 auto;
  min-height: 0;
}
.learning-modal .learning-list__head {
  flex: 0 0 auto;
}
.learning-modal .learning-list__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.learning-modal .learning-list__scroll::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.learning-modal .learning-list__scroll::-webkit-scrollbar-track {
  background: transparent;
}
.learning-modal .learning-list__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.learning-modal .learning-list__scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.learning-modal .learning-list__scroll::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.learning-modal .learning-list__scroll::-webkit-scrollbar-corner {
  background: transparent;
}
.learning-modal .learning-list__scroll::-webkit-scrollbar-button, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:single-button, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:vertical:decrement, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:vertical:increment, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:horizontal:decrement, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:horizontal:increment, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:start:decrement, .learning-modal .learning-list__scroll::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.learning-modal__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 40vh;
  text-align: center;
}
.learning-modal__placeholder-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #2f7ff0;
  animation: learning-modal-spin 0.8s linear infinite;
}
.learning-modal__placeholder-text {
  margin: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

@keyframes learning-modal-spin {
  to {
    transform: rotate(360deg);
  }
}
.profile__content.role-dashboard {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  grid-template-columns: 1.35fr 1.35fr 0.9fr;
  grid-auto-rows: minmax(3rem, auto);
  min-width: 0;
}
.profile__content.role-dashboard > .profile__block {
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: clamp(1rem, 2.4vw, 1.75rem);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
}

.role-dashboard__span-3 {
  grid-column: 1/-1;
}

.role-dashboard__span-2 {
  grid-column: span 2;
}

.role-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.role-dashboard__header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.role-dashboard__header-titles {
  min-width: 0;
  flex: 1 1 auto;
}
.role-dashboard__header-titles .title-middle-small,
.role-dashboard__header-titles .text-small {
  margin: 0;
  overflow-wrap: anywhere;
}

.role-dashboard__badge {
  width: 3rem;
  height: 3rem;
  flex: none;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.86);
  color: #252525;
}

.role-dashboard__badge--avatar {
  padding: 0;
  overflow: hidden;
}

.role-dashboard__badge-avatar,
.role-dashboard__badge--avatar .avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.role-dashboard__card {
  overflow: hidden;
  min-width: 0;
}

.role-dashboard__card--accent {
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.role-dashboard__card--stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.role-dashboard__card--stats .ui-donut {
  flex: 1 1 auto;
  width: 100%;
}

.role-dashboard__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.role-dashboard__balance {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  padding-top: 1.25rem;
}

.role-dashboard__balance-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  border-radius: 999px;
  background: #ff8a00;
  color: #fff;
  box-shadow: 0 14px 34px rgba(255, 138, 0, 0.28);
}

.role-dashboard__balance-value {
  letter-spacing: 0.04em;
}

.role-dashboard__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  max-height: clamp(14rem, 38vh, 22rem);
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.role-dashboard__list::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.4rem;
  background: transparent;
}
.role-dashboard__list::-webkit-scrollbar-track {
  background: transparent;
}
.role-dashboard__list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.55), rgba(134, 69, 210, 0.55) 55%, rgba(255, 122, 0, 0.55));
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.role-dashboard__list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.8), rgba(134, 69, 210, 0.8) 55%, rgba(255, 122, 0, 0.8));
}
.role-dashboard__list::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(38, 48, 245, 0.95), rgba(134, 69, 210, 0.95) 55%, rgba(255, 122, 0, 0.95));
}
.role-dashboard__list::-webkit-scrollbar-corner {
  background: transparent;
}
.role-dashboard__list::-webkit-scrollbar-button, .role-dashboard__list::-webkit-scrollbar-button:single-button, .role-dashboard__list::-webkit-scrollbar-button:vertical:decrement, .role-dashboard__list::-webkit-scrollbar-button:vertical:increment, .role-dashboard__list::-webkit-scrollbar-button:horizontal:decrement, .role-dashboard__list::-webkit-scrollbar-button:horizontal:increment, .role-dashboard__list::-webkit-scrollbar-button:start:decrement, .role-dashboard__list::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}

.role-dashboard__list--divided {
  gap: 0;
  padding-top: 0.5rem;
  padding-right: 1rem;
}
.role-dashboard__list--divided .role-dashboard__row {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.role-dashboard__list--divided .role-dashboard__row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.role-dashboard__list--divided .role-dashboard__row:active {
  transform: none;
}
.role-dashboard__list--divided .role-dashboard__row:last-child {
  border-bottom: 0;
}

.role-dashboard__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
}
.role-dashboard__row:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.1);
}
.role-dashboard__row:active {
  transform: translateY(1px);
}

.role-dashboard__row-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex: 0 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.role-dashboard__row-avatar--file {
  font-size: 1.1rem;
}

.role-dashboard__row-file-icon {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  display: block;
}

.role-dashboard__avatar {
  width: 100%;
  height: 100%;
  flex: none;
  aspect-ratio: 1;
  object-fit: cover;
}

.role-dashboard__row-main {
  min-width: 0;
  flex: 1;
}

.role-dashboard__row-title {
  margin: 0;
  color: rgba(255, 255, 255, 0.98);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-dashboard__row-sub {
  margin: 0.1rem 0 0;
  color: rgba(176, 183, 201, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-dashboard__row-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.role-dashboard__row-meta--stacked {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.role-dashboard__row-meta--cols {
  align-items: flex-start;
  gap: 2rem;
}

.role-dashboard__meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 7.25rem;
  max-width: 11.5rem;
}
.role-dashboard__meta-col:last-child {
  align-items: flex-end;
}

.role-dashboard__meta-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  justify-content: flex-end;
  max-width: min(24rem, 44vw);
}

.role-dashboard__pill {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(26rem, 48vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-dashboard__row-arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.25rem;
  background: #0075FF;
  color: #fff;
  opacity: 1;
  font-size: 1.15rem;
  line-height: 1;
}
.role-dashboard__row-arrow .role-dashboard__row-arrow-icon,
.role-dashboard__row-arrow .icon, .role-dashboard__row-arrow svg, .role-dashboard__row-arrow img {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}

.role-dashboard__row--single-line {
  flex-wrap: nowrap;
}
.role-dashboard__row--single-line .role-dashboard__row-main {
  flex: 1 1 auto;
}
.role-dashboard__row--single-line .role-dashboard__row-meta {
  flex: 0 0 auto;
  min-width: auto;
  margin-left: auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.role-dashboard__action-plus-icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}
.role-dashboard__action-plus-icon path {
  stroke-width: 2.6;
}

.role-dashboard__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.role-dashboard__action {
  min-height: 9.5rem;
  position: relative;
  overflow: hidden;
}

.role-dashboard__action-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-right: 4.25rem;
  min-width: 0;
}
.role-dashboard__action-top .role-dashboard__action-title,
.role-dashboard__action-top .role-dashboard__action-description {
  margin: 0;
  width: 100%;
}
.role-dashboard__action-top .role-dashboard__action-title {
  font-family: "Inter Bold";
  font-size: 1rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.98);
  overflow-wrap: anywhere;
}
.role-dashboard__action-top .role-dashboard__action-description {
  display: block;
  color: rgba(176, 183, 201, 0.92);
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .role-dashboard__action-top {
    padding-right: 0;
  }
  .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 2.75rem;
  }
}
.role-dashboard__action-plus {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  transform: none;
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.role-dashboard__action-plus--glyph::before, .role-dashboard__action-plus--glyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.role-dashboard__action-plus--glyph::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.role-dashboard__action--purple {
  border: 1px solid rgba(163, 73, 255, 0.55);
}
.role-dashboard__action--purple .role-dashboard__action-plus {
  background: #7b61ff;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.role-dashboard__action--blue {
  border: 1px solid rgba(22, 119, 255, 0.55);
}
.role-dashboard__action--blue .role-dashboard__action-plus {
  background: #1677ff;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.role-dashboard__action--orange {
  border: 1px solid rgba(255, 122, 0, 0.55);
}
.role-dashboard__action--orange .role-dashboard__action-plus {
  background: #ff8a00;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.role-dashboard__stats {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1rem;
}

.role-dashboard__stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.role-dashboard__stat-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.role-dashboard__stat-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.role-dashboard__stat-icon-svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  opacity: 0.95;
}

.role-dashboard__stat-icon--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  opacity: 0.7;
}

.role-dashboard__stat-value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.role-dashboard__stat-number {
  line-height: 1;
}

.role-dashboard__stat-badge {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}

.role-dashboard__stat-badge--blue {
  background: rgba(0, 117, 255, 0.25);
  border-color: rgba(0, 117, 255, 0.4);
}

.role-dashboard__stat-badge--orange {
  background: rgba(255, 122, 0, 0.25);
  border-color: rgba(255, 122, 0, 0.4);
}

.role-dashboard__stat-badge--red {
  background: rgba(235, 30, 0, 0.2);
  border-color: rgba(235, 30, 0, 0.35);
}

.role-dashboard__stat-badge--purple {
  background: rgba(163, 73, 255, 0.2);
  border-color: rgba(163, 73, 255, 0.35);
}

.role-dashboard__card--stats-compact {
  padding: 2rem;
}
.role-dashboard__card--stats-compact .role-dashboard__card-head {
  padding-bottom: 1.25rem;
}
.role-dashboard__card--stats-compact .role-dashboard__stats {
  padding-top: 1.5rem;
  gap: 1.25rem;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-left {
  gap: 1rem;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-icon {
  display: none;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-icon--fallback {
  display: none;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-icon-svg {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-number {
  font-size: 2.25rem;
  font-weight: 800;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-badge {
  font-size: 0.8rem;
  padding: 0.22rem 0.55rem;
}
.role-dashboard__card--stats-compact .role-dashboard__stat-label {
  max-width: 10rem;
  text-align: left;
}

.role-dashboard__card--stats-showcase {
  background: linear-gradient(180deg, rgba(38, 48, 120, 0.92) 0%, rgba(22, 26, 68, 0.92) 100%);
  border: 2px solid rgba(51, 72, 255, 0.85);
  border-radius: 2rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 18px 40px rgba(0, 0, 0, 0.28);
  position: relative;
}
.role-dashboard__card--stats-showcase .role-dashboard__card-head {
  justify-content: flex-start;
}
.role-dashboard__card--stats-showcase .role-dashboard__stats-title {
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-icon-svg {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  color: #fff;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-icon-svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-number {
  font-size: clamp(2.9rem, 4.2vw, 3.5rem);
  font-weight: 900;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-label {
  font-size: 1.25rem;
  color: rgba(176, 183, 201, 0.85);
  max-width: 15rem;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-number-wrap {
  position: relative;
  display: inline-block;
  padding-right: 0;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-badge {
  position: absolute;
  top: -0.85rem;
  left: 100%;
  right: auto;
  border: 0;
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 0.34rem 0.6rem;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-badge--blue {
  background: #1677ff;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-badge--orange {
  background: #ff8a00;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-badge--red {
  background: #ff3b6a;
}
.role-dashboard__card--stats-showcase .role-dashboard__stat-badge--purple {
  background: #7b61ff;
}

body.profiles--school .profile__content.role-dashboard .role-dashboard__card--school-stats,
body.profiles--school .profile__content.role-dashboard .role-dashboard__card--school-stats + .role-dashboard__card--school-list {
  min-height: 21.5rem;
  align-self: stretch;
}
body.profiles--school .profile__content.role-dashboard .role-dashboard__card--school-stats + .role-dashboard__card--school-list {
  display: flex;
  flex-direction: column;
}
body.profiles--school .profile__content.role-dashboard .role-dashboard__card--school-stats + .role-dashboard__card--school-list .role-dashboard__list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

@media (max-width: 1360px) {
  .profile__content.role-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .role-dashboard__span-2,
  .role-dashboard__span-3,
  .role-dashboard__actions {
    grid-column: 1/-1;
  }
  .role-dashboard__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .role-dashboard__action {
    width: 100%;
  }
}
@media (max-width: 1100px) {
  body.profiles--school .profile__content.role-dashboard .role-dashboard__card--school-stats,
  body.profiles--school .profile__content.role-dashboard .role-dashboard__card--school-stats + .role-dashboard__card--school-list {
    min-height: auto;
  }
  .profile__content.role-dashboard {
    grid-template-columns: 1fr;
  }
  .role-dashboard__span-2,
  .role-dashboard__span-3 {
    grid-column: 1;
  }
  .role-dashboard__actions {
    flex-direction: row;
  }
  .role-dashboard__action {
    min-height: 8rem;
    flex: 1;
  }
  body.profiles--school .role-dashboard__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  body.profiles--school .role-dashboard__action {
    min-height: 0;
    width: 100%;
    flex: 0 0 auto;
  }
  body.profiles--school .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 3.5rem;
  }
}
@media (max-width: 640px) {
  .role-dashboard__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .role-dashboard__header .btn-app {
    width: 100%;
    justify-content: space-between;
  }
  .role-dashboard__header-left {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .profile__content.role-dashboard {
    gap: 0.75rem;
  }
  .profile__content.role-dashboard > .profile__block {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .role-dashboard__card--stats {
    gap: 0.75rem;
  }
  .role-dashboard__card-head {
    gap: 0.65rem;
    padding-bottom: 0.75rem;
  }
  .role-dashboard__list {
    padding-top: 0.75rem;
    max-height: none;
  }
  .role-dashboard__list--divided {
    padding-top: 0.25rem;
    padding-right: 0;
  }
  .role-dashboard__list--divided .role-dashboard__row {
    padding-block: 0.85rem;
  }
  .role-dashboard__row {
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
  }
  .role-dashboard__row-avatar {
    width: 2.25rem;
    height: 2.25rem;
    flex-basis: 2.25rem;
  }
  .role-dashboard__badge {
    width: 2.75rem;
    height: 2.75rem;
  }
}
@media (max-width: 640px) {
  body.profiles--school .profile__content.role-dashboard {
    overflow: visible;
  }
  body.profiles--school .role-dashboard__card--stats-showcase {
    padding: 1rem;
    border-radius: 1.5rem;
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stats {
    gap: 1rem;
    padding-top: 1rem;
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stat-left {
    width: 100%;
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stat-value {
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stat-number {
    font-size: clamp(2rem, 11vw, 2.6rem);
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stat-label {
    max-width: none;
    width: 100%;
    font-size: 0.98rem;
    line-height: 1.3;
  }
  body.profiles--school .role-dashboard__card--stats-showcase .role-dashboard__stat-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.15rem;
  }
  body.profiles--school .role-dashboard__row-meta--cols {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem 1rem;
  }
  body.profiles--school .role-dashboard__meta-col {
    min-width: 0;
    max-width: calc(50% - 0.5rem);
    flex: 1 1 0;
  }
  body.profiles--school .role-dashboard__meta-col:last-child {
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  body.profiles--school .role-dashboard__row-meta--cols {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  body.profiles--school .role-dashboard__meta-col {
    max-width: 100%;
    width: 100%;
  }
  body.profiles--school .role-dashboard__meta-col:last-child {
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .role-dashboard__row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .role-dashboard__card-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .role-dashboard__row-meta {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    justify-content: space-between;
  }
  .role-dashboard__row-meta--stacked {
    align-items: flex-start;
  }
  .role-dashboard__meta-line {
    max-width: 100%;
    justify-content: flex-start;
  }
  .role-dashboard__pill {
    max-width: 100%;
  }
  .role-dashboard__row-arrow {
    margin-left: auto;
  }
  .role-dashboard__row.role-dashboard__row--single-line {
    flex-wrap: nowrap;
    align-items: center;
  }
  .role-dashboard__row.role-dashboard__row--single-line .role-dashboard__row-meta {
    order: 0;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .role-dashboard__row.role-dashboard__row--single-line .role-dashboard__row-arrow {
    margin-left: 0;
  }
  .role-dashboard__actions {
    flex-direction: column;
  }
  .role-dashboard__action {
    min-height: 7.5rem;
  }
  .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 4rem;
  }
}
@media (max-width: 767px) {
  .role-dashboard__card--stats-showcase .role-dashboard__stat-number {
    font-size: clamp(2.2rem, 9vw, 2.8rem);
  }
  .role-dashboard__card--stats-showcase .role-dashboard__stat-label {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .profile__content.role-dashboard .role-dashboard__actions {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0.75rem;
  }
  .profile__content.role-dashboard .role-dashboard__action {
    min-height: 8.5rem;
    padding: 0.85rem;
    border-radius: 1.5rem;
  }
  .profile__content.role-dashboard .role-dashboard__action-top {
    gap: 0.4rem;
  }
  .profile__content.role-dashboard .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 2.2rem;
  }
  .profile__content.role-dashboard .role-dashboard__action-title {
    font-size: 0.875rem;
    line-height: 1.15;
  }
  .profile__content.role-dashboard .role-dashboard__action-description {
    font-size: 0.8rem;
    line-height: 1.25;
  }
  .profile__content.role-dashboard .role-dashboard__action-plus {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin: 0;
    width: 1.5rem;
    min-width: 1.5rem;
    max-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    max-height: 1.5rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 420px) {
  .profile__content.role-dashboard .role-dashboard__actions {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .profile__content.role-dashboard .role-dashboard__action {
    min-height: 7.8rem;
    padding: 0.75rem;
  }
  .profile__content.role-dashboard .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 2rem;
  }
}
@media (max-width: 640px) {
  .role-dashboard__actions--school {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: 0.75rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action {
    width: auto;
    min-width: 0;
    min-height: 8.35rem;
    padding: 0.9rem;
    border-radius: 1.5rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-top {
    gap: 0.4rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 2.35rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-title {
    font-size: 0.92rem;
    line-height: 1.15;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-description {
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-plus {
    top: 0.8rem;
    right: 0.8rem;
    width: 1.7rem;
    min-width: 1.7rem;
    max-width: 1.7rem;
    height: 1.7rem;
    min-height: 1.7rem;
    max-height: 1.7rem;
    font-size: 1rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.85rem;
    padding-top: 1rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    min-width: 0;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-left,
  .role-dashboard__card--school-stats .role-dashboard__stat-value,
  .role-dashboard__card--school-stats .role-dashboard__stat-number-wrap {
    min-width: 0;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-left {
    width: 100%;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-value {
    align-items: flex-end;
    gap: 0.35rem 0.5rem;
    flex-wrap: wrap;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-number-wrap {
    display: inline-flex;
    align-items: flex-start;
    padding-right: 2.25rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-number {
    font-size: clamp(2rem, 10vw, 2.45rem);
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-label {
    width: 100%;
    max-width: none;
    font-size: 0.95rem;
    line-height: 1.25;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-badge {
    position: absolute;
    top: 0.15rem;
    left: auto;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    padding: 0.25rem 0.45rem;
    font-size: 0.78rem;
  }
  .role-dashboard__card--school-list .role-dashboard__list {
    max-height: 17.5rem;
    overflow-y: auto;
    padding-right: 0.35rem;
  }
  .role-dashboard__card--school-list .role-dashboard__list--divided {
    padding-right: 0.35rem;
  }
}
@media (max-width: 420px) {
  .role-dashboard__actions--school {
    gap: 0.6rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action {
    min-height: 8rem;
    padding: 0.8rem 0.75rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-top .role-dashboard__action-title {
    padding-right: 2rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-title {
    font-size: 0.84rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-description {
    font-size: 0.72rem;
  }
  .role-dashboard__actions--school > .role-dashboard__action .role-dashboard__action-plus {
    top: 0.7rem;
    right: 0.7rem;
    width: 1.55rem;
    min-width: 1.55rem;
    max-width: 1.55rem;
    height: 1.55rem;
    min-height: 1.55rem;
    max-height: 1.55rem;
    font-size: 0.9rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stats {
    gap: 0.9rem 0.7rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-number {
    font-size: clamp(1.85rem, 10vw, 2.2rem);
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-icon-svg {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 2.2rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-label {
    font-size: 0.88rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-number-wrap {
    padding-right: 2rem;
  }
  .role-dashboard__card--school-stats .role-dashboard__stat-badge {
    top: 0.1rem;
    padding: 0.22rem 0.4rem;
    font-size: 0.72rem;
  }
}
.dashboard-tabs {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard-tabs__header {
  flex-wrap: wrap;
}

.dashboard-tabs__nav {
  align-self: center;
  max-width: 100%;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 100px;
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
}

.dashboard-tabs__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-tabs__btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.dashboard-tabs__btn.is-active {
  color: #fff;
  background: linear-gradient(135deg, #2630f5, #7F29FA);
  box-shadow: 0 8px 20px rgba(38, 48, 245, 0.35);
}
.dashboard-tabs__btn.is-active:hover {
  background: linear-gradient(135deg, #2630f5, #7F29FA);
}

.dashboard-tabs__btn-label--short {
  display: none;
}

.dashboard-tabs__panel {
  width: 100%;
  min-width: 0;
}
.dashboard-tabs__panel[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .dashboard-tabs__btn-label {
    display: none;
  }
  .dashboard-tabs__btn-label--short {
    display: inline;
  }
}
@media (max-width: 640px) {
  .dashboard-tabs__nav {
    align-self: stretch;
    width: 100%;
    padding: 0.25rem;
  }
  .dashboard-tabs__btn {
    flex: 1 1 0;
    text-align: center;
    padding: 0.6rem 0.5rem;
  }
}
#learning_metrics_frame {
  display: block;
  position: relative;
}

.learning-metrics__panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: 1.6rem;
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18.5px);
  backdrop-filter: blur(18.5px);
}

.learning-metrics__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.learning-metrics__head-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.learning-metrics__titles {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.learning-metrics__download {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 66px;
  padding: 0.55rem 0.7rem;
  border-radius: 1rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #2630f5, #7F29FA);
  box-shadow: 0 8px 20px rgba(38, 48, 245, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.learning-metrics__download:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(38, 48, 245, 0.45);
}

.learning-metrics__download-svg {
  width: 20px;
  height: 20px;
}

.learning-metrics__download-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.learning-metrics__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
}
.learning-metrics__controls .graph-tabs {
  align-self: flex-end;
}

.learning-metrics__range {
  display: inline-flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.learning-metrics__range .graph-range__input {
  height: 38px;
}

.learning-metrics__select {
  min-width: 84px;
  width: 84px;
  --form-control-min-height: 38px;
  --form-control-padding-y: 0;
  --form-control-padding-x: 12px;
  --form-control-radius: 10px;
  --form-field-bg: rgba(2, 6, 23, .60);
  --form-field-bg-hover: rgba(2, 6, 23, .72);
  --form-field-border: rgba(255, 255, 255, .12);
  --form-field-border-hover: rgba(255, 255, 255, .22);
  --form-field-text: rgba(255, 255, 255, .92);
  --form-focus-border: rgba(38, 48, 245, .55);
  --form-focus-shadow: none;
}
.learning-metrics__select .token-select__control {
  height: 38px;
  padding-right: 32px;
}
.learning-metrics__select .token-select__chips {
  min-height: 0;
}
.learning-metrics__select .token-select__single {
  font-size: 13px;
  font-weight: 600;
}
.learning-metrics__select .token-select__caret {
  right: 14px;
  width: 8px;
  height: 8px;
  background-image: none;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  translate: 0 0;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.learning-metrics__select .token-select__control[aria-expanded=true] .token-select__caret {
  transform: translateY(-30%) rotate(225deg);
}
.learning-metrics__select .token-select__btn {
  font-size: 13px;
  font-weight: 600;
}

.learning-metrics__apply {
  min-height: 38px;
}

.learning-metrics__loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.75rem;
  pointer-events: none;
}

.learning-metrics__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: lm-spin 0.7s linear infinite;
}

@keyframes lm-spin {
  to {
    transform: rotate(360deg);
  }
}
#learning_metrics_frame[busy] .learning-metrics__loader,
#learning_metrics_frame[aria-busy=true] .learning-metrics__loader {
  display: flex;
}

#learning_metrics_frame[busy] .learning-metrics__panel,
#learning_metrics_frame[busy] .profile__content.role-dashboard,
#learning_metrics_frame[aria-busy=true] .learning-metrics__panel,
#learning_metrics_frame[aria-busy=true] .profile__content.role-dashboard {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.lm-empty {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

.learning-metrics__alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.9rem;
  background: rgba(245, 196, 71, 0.12);
  border: 1px solid rgba(245, 196, 71, 0.35);
  color: rgba(255, 234, 184, 0.95);
  font-size: 12px;
  line-height: 1.35;
}

.learning-metrics__alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5c447;
  flex-shrink: 0;
}

.student-dashboard__achievements {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  padding: 0.25rem 0;
  overflow: visible;
  flex-wrap: nowrap;
}
.student-dashboard__achievements .student-dashboard__achievements-track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0.2rem 0;
  overflow: visible;
  flex-wrap: nowrap;
}
.student-dashboard__achievements .student-dashboard__achievements-track--fill {
  justify-content: space-between;
}
.student-dashboard__achievements .student-dashboard__achievement {
  position: relative;
  flex: 0 0 62px;
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  height: 62px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(8, 6, 24, 0.35);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease-out;
}
.student-dashboard__achievements .student-dashboard__achievement:hover, .student-dashboard__achievements .student-dashboard__achievement.is-open {
  transform: translateY(-7px) scale(1.1);
  z-index: 40;
  box-shadow: 0 16px 34px rgba(226, 61, 224, 0.42);
}
.student-dashboard__achievements .student-dashboard__achievement--locked:hover, .student-dashboard__achievements .student-dashboard__achievement--locked.is-open {
  box-shadow: 0 16px 34px rgba(240, 169, 46, 0.35);
}
.student-dashboard__achievements .student-dashboard__achievement--empty {
  opacity: 0.34;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.student-dashboard__achievements .student-dashboard__achievement--hidden {
  display: none;
}
.student-dashboard__achievements .student-dashboard__achievement--receiving {
  pointer-events: none;
  filter: brightness(1.06);
}
.student-dashboard__achievements .student-dashboard__achievement--receiving .student-dashboard__achievement-icon {
  opacity: 0;
  transform: scale(0.78);
}
.student-dashboard__achievements .student-dashboard__achievement--pulse {
  animation: sdDashboardAchievementPulse 1.06s cubic-bezier(0.26, 1.22, 0.34, 1) 1;
}
.student-dashboard__achievements .student-dashboard__achievement--pulse .student-dashboard__achievement-icon {
  animation: sdDashboardAchievementIconPop 0.7s cubic-bezier(0.2, 0.95, 0.25, 1.2) 1;
}
.student-dashboard__achievements .student-dashboard__achievement--more {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 62px;
  border-radius: 999px;
  background: none;
  box-shadow: none;
}
.student-dashboard__achievements .student-dashboard__achievement--more:hover, .student-dashboard__achievements .student-dashboard__achievement--more.is-open {
  transform: none;
  box-shadow: none;
  z-index: 40;
}
.student-dashboard__achievements .ka-more__btn {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.student-dashboard__achievements .student-dashboard__achievement--more:hover .ka-more__btn,
.student-dashboard__achievements .student-dashboard__achievement--more:focus-visible .ka-more__btn {
  background: linear-gradient(90deg, #e23de0, #8b5cf6);
  color: #fff;
  border-color: transparent;
  transform: scale(1.07);
  box-shadow: 0 14px 32px rgba(226, 61, 224, 0.45);
}
.student-dashboard__achievements .ka-tile__art {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #202142;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease;
}
.student-dashboard__achievements .student-dashboard__achievement:hover .ka-tile__art,
.student-dashboard__achievements .student-dashboard__achievement.is-open .ka-tile__art {
  border-color: rgba(255, 157, 237, 0.55);
}
.student-dashboard__achievements .student-dashboard__achievement--locked:hover .ka-tile__art,
.student-dashboard__achievements .student-dashboard__achievement--locked.is-open .ka-tile__art {
  border-color: rgba(255, 200, 77, 0.65);
}
.student-dashboard__achievements .ka-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: filter 0.45s ease, transform 0.45s ease, opacity 0.24s ease-out;
}
.student-dashboard__achievements .student-dashboard__achievement:hover .ka-tile__img,
.student-dashboard__achievements .student-dashboard__achievement.is-open .ka-tile__img {
  filter: brightness(1.14) saturate(1.1);
  transform: scale(1.09);
}
.student-dashboard__achievements .student-dashboard__achievement--locked .ka-tile__img {
  filter: blur(3px) brightness(0.58) saturate(0.75);
  transform: scale(1.18);
}
.student-dashboard__achievements .student-dashboard__achievement--locked:hover .ka-tile__img,
.student-dashboard__achievements .student-dashboard__achievement--locked.is-open .ka-tile__img {
  filter: blur(1.5px) brightness(0.78) saturate(0.95);
  transform: scale(1.18);
}
.student-dashboard__achievements .ka-tile__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 50% 45%, rgba(12, 9, 32, 0.08), rgba(12, 9, 32, 0.42));
}
.student-dashboard__achievements .ka-tile__glint {
  position: absolute;
  inset: -6px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
}
.student-dashboard__achievements .student-dashboard__achievement:not(.student-dashboard__achievement--locked):hover .ka-tile__glint,
.student-dashboard__achievements .student-dashboard__achievement:not(.student-dashboard__achievement--locked).is-open .ka-tile__glint {
  opacity: 1;
  animation: kaGlint 0.85s ease 0.05s both;
}
.student-dashboard__achievements .ka-lock {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.student-dashboard__achievements .ka-lock__ico {
  line-height: 0;
  filter: drop-shadow(0 3px 8px rgba(255, 200, 77, 0.4));
  animation: sdAchievementLockFloat 3.2s ease-in-out infinite;
  transition: filter 0.3s ease;
}
.student-dashboard__achievements .student-dashboard__achievement--locked:hover .ka-lock__ico,
.student-dashboard__achievements .student-dashboard__achievement--locked.is-open .ka-lock__ico {
  filter: drop-shadow(0 5px 13px rgba(255, 200, 77, 0.75));
  animation: sdAchievementLockShake 0.6s ease;
}
.student-dashboard__achievements .ka-tile__star {
  position: absolute;
  pointer-events: none;
  background: #ffd166;
  transform: rotate(45deg);
  animation: kaTwinkle 3.6s ease-in-out infinite;
}
.student-dashboard__achievements .student-dashboard__achievement:not(.student-dashboard__achievement--locked) .ka-lock,
.student-dashboard__achievements .student-dashboard__achievement:not(.student-dashboard__achievement--locked) .ka-tile__veil,
.student-dashboard__achievements .student-dashboard__achievement:not(.student-dashboard__achievement--locked) .ka-tile__star {
  display: none;
}
.student-dashboard__achievements .ka-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  width: 232px;
  pointer-events: none;
  z-index: 80;
}
.student-dashboard__achievements .ka-tip--l {
  left: -6px;
}
.student-dashboard__achievements .ka-tip--c {
  left: 50%;
  margin-left: -116px;
}
.student-dashboard__achievements .ka-tip--r {
  right: -6px;
}
.student-dashboard__achievements .ka-tip__box {
  background: rgba(18, 13, 42, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 61, 224, 0.45);
  border-radius: 14px;
  padding: 11px 12px 12px;
  box-shadow: 0 20px 46px rgba(5, 3, 18, 0.65);
  opacity: 0;
  transform: translateY(9px) scale(0.94);
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.student-dashboard__achievements .ka-tip--gold .ka-tip__box {
  border-color: rgba(255, 200, 77, 0.42);
}
.student-dashboard__achievements .student-dashboard__achievement:hover .ka-tip__box,
.student-dashboard__achievements .student-dashboard__achievement:focus-visible .ka-tip__box,
.student-dashboard__achievements .student-dashboard__achievement.is-open .ka-tip__box {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.student-dashboard__achievements .ka-tip__arrow {
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(18, 13, 42, 0.94);
  border-right: 1px solid rgba(226, 61, 224, 0.45);
  border-bottom: 1px solid rgba(226, 61, 224, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.student-dashboard__achievements .ka-tip--gold .ka-tip__arrow {
  border-color: rgba(255, 200, 77, 0.42);
}
.student-dashboard__achievements .ka-tip--l .ka-tip__arrow {
  left: 26px;
}
.student-dashboard__achievements .ka-tip--c .ka-tip__arrow {
  left: 50%;
}
.student-dashboard__achievements .ka-tip--r .ka-tip__arrow {
  left: calc(100% - 31px);
}
.student-dashboard__achievements .student-dashboard__achievement:hover .ka-tip__arrow,
.student-dashboard__achievements .student-dashboard__achievement:focus-visible .ka-tip__arrow,
.student-dashboard__achievements .student-dashboard__achievement.is-open .ka-tip__arrow {
  opacity: 1;
}
.student-dashboard__achievements .ka-tip__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.student-dashboard__achievements .ka-tip__thumb {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 11px;
  overflow: hidden;
  background: #202142;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.student-dashboard__achievements .ka-tip__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.1);
}
.student-dashboard__achievements .ka-tip__thumb .ka-lock {
  position: absolute;
}
.student-dashboard__achievements .ka-tip--gold .ka-tip__thumb img {
  filter: blur(2.5px) brightness(0.6);
}
.student-dashboard__achievements .ka-tip__name {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.student-dashboard__achievements .ka-tip__done {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #35e08a;
}
.student-dashboard__achievements .ka-tip__bar {
  margin-top: 7px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
}
.student-dashboard__achievements .ka-tip__fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #2fbf71, #7ef2a8);
  box-shadow: 0 0 8px rgba(53, 224, 138, 0.5);
}
.student-dashboard__achievements .ka-tip__frac {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #7ef2a8;
}
.student-dashboard__achievements .ka-tip__cond {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.student-dashboard__achievements .ka-tip__badge {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(255, 193, 84, 0.12);
  border: 1px solid rgba(255, 193, 84, 0.3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #ffd166;
}
.student-dashboard__achievements .ka-tip__cta {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e23de0, #8b5cf6);
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
}
.student-dashboard__achievements .student-dashboard__achievement--more .ka-tip {
  width: 224px;
}
.student-dashboard__achievements .student-dashboard__achievement--more .ka-tip__box {
  border-color: rgba(139, 92, 246, 0.5);
}
.student-dashboard__achievements .student-dashboard__achievement--more .ka-tip__arrow {
  border-color: rgba(139, 92, 246, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .student-dashboard__achievements .student-dashboard__achievement {
    transition: none;
  }
  .student-dashboard__achievements .ka-lock__ico,
  .student-dashboard__achievements .ka-tile__star,
  .student-dashboard__achievements .ka-tile__glint {
    animation: none;
  }
  .student-dashboard__achievements .ka-tip__box,
  .student-dashboard__achievements .ka-tip__arrow {
    transition: none;
  }
}
@media (max-width: 900px) {
  .student-dashboard__achievements {
    gap: 8px;
  }
  .student-dashboard__achievements .student-dashboard__achievements-track {
    gap: 8px;
  }
}
@media (max-width: 640px) {
  .student-dashboard__achievements {
    gap: 8px;
  }
  .student-dashboard__achievements .student-dashboard__achievements-track {
    gap: 8px;
  }
  .student-dashboard__achievements .student-dashboard__achievement {
    flex: 0 0 54px;
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    height: 54px;
    border-radius: 12px;
  }
  .student-dashboard__achievements .ka-tile__art {
    border-radius: 12px;
  }
  .student-dashboard__achievements .student-dashboard__achievement--more {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 54px;
  }
  .student-dashboard__achievements .ka-more__btn {
    padding: 0 14px;
    font-size: 12px;
  }
  .student-dashboard__achievements .ka-tip {
    width: 198px;
  }
  .student-dashboard__achievements .ka-tip--c {
    margin-left: -99px;
  }
}
@keyframes klt-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes klt-dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes klt-shimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}
@keyframes klt-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.85;
  }
}
body.profiles.profiles--klt,
body.profiles.profiles--klp {
  background: radial-gradient(1000px 560px at 12% -6%, rgba(74, 58, 255, 0.3), transparent 60%), radial-gradient(760px 460px at 104% 6%, rgba(198, 64, 222, 0.16), transparent 55%), radial-gradient(1000px 640px at 50% 118%, rgba(38, 108, 255, 0.15), transparent 62%), #0B0C16;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.profile__content.role-dashboard.klt {
  font-family: "Onest", system-ui, sans-serif;
  color: #F2F4FF;
}
.profile__content.role-dashboard.klt > * {
  animation: klt-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.profile__content.role-dashboard.klt > *:nth-child(1) {
  animation-delay: 0s;
}
.profile__content.role-dashboard.klt > *:nth-child(2) {
  animation-delay: 0.07s;
}
.profile__content.role-dashboard.klt > *:nth-child(3) {
  animation-delay: 0.14s;
}
.profile__content.role-dashboard.klt > *:nth-child(4) {
  animation-delay: 0.21s;
}
.profile__content.role-dashboard.klt > *:nth-child(5) {
  animation-delay: 0.28s;
}
.profile__content.role-dashboard.klt > *:nth-child(6) {
  animation-delay: 0.35s;
}
.profile__content.role-dashboard.klt > .profile__block {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 1.5rem;
  padding: 1.25rem 1.5rem;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}

.klt-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(199, 206, 235, 0.62);
}

.klt-empty {
  margin: 0.75rem 0 0;
  font-size: 13px;
  color: rgba(199, 206, 235, 0.55);
}

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

.klt-tile {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  border-radius: 22px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  text-align: left;
  color: #F2F4FF;
  font-family: "Onest", system-ui, sans-serif;
  transition: transform 0.25s ease, border-color 0.25s ease;
  min-width: 0;
}
.klt-tile:hover {
  transform: translateY(-3px);
}
.klt-tile:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}
.klt-tile:active {
  transform: translateY(-1px);
}

.klt-tile--orange {
  background: linear-gradient(120deg, rgba(255, 106, 0, 0.16), rgba(15, 17, 30, 0.88) 60%);
  border: 1px solid rgba(255, 138, 42, 0.4);
}
.klt-tile--orange .klt-tile__num {
  color: #FFB067;
  text-shadow: 0 0 28px rgba(255, 138, 42, 0.5);
}
.klt-tile--orange .klt-tile__hint {
  color: #FFB067;
}

.klt-tile--green {
  background: linear-gradient(120deg, rgba(61, 220, 151, 0.13), rgba(15, 17, 30, 0.88) 60%);
  border: 1px solid rgba(61, 220, 151, 0.4);
}
.klt-tile--green .klt-tile__num {
  color: #7FF5C2;
  text-shadow: 0 0 28px rgba(61, 220, 151, 0.5);
}
.klt-tile--green .klt-tile__hint {
  color: #7FF5C2;
}

.klt-tile--red {
  background: linear-gradient(120deg, rgba(255, 59, 92, 0.14), rgba(15, 17, 30, 0.88) 60%);
  border: 1px solid rgba(255, 59, 92, 0.4);
}
.klt-tile--red .klt-tile__num {
  color: #FF9DB1;
  text-shadow: 0 0 28px rgba(255, 59, 92, 0.5);
}
.klt-tile--red .klt-tile__hint {
  color: #FF9DB1;
}

.klt-tile__num {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  flex: none;
}

.klt-tile__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.klt-tile__title {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #F2F4FF;
}

.klt-tile__hint {
  font-size: 11px;
  font-weight: 700;
}

.klt-tile__faces {
  display: flex;
  flex: none;
}

.klt-tile__face {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #171A2C;
}
.klt-tile__face + .klt-tile__face, .klt-tile__face + .klt-tile__face-more {
  margin-left: -11px;
}

.klt-tile__face-more {
  height: 36px;
  padding: 0 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 2.5px solid #171A2C;
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #E5EAFF;
}

.klt-card {
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 20px 24px;
}

.klt-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 12px;
}

.klt-card__title {
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #F2F4FF;
}

.klt-card__spacer {
  flex: 1;
}

.klt-chip {
  padding: 3px 10px;
  border-radius: 12px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
}

.klt-chip--orange {
  background: rgba(255, 138, 42, 0.14);
  border: 1px solid rgba(255, 138, 42, 0.45);
  color: #FFB067;
}

.klt-chip--purple {
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.45);
  color: #C9B2FF;
}

.klt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 13px;
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.klt-btn:hover {
  transform: translateY(-2px);
}
.klt-btn:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klt-btn__icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.klt-btn--purple {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #C9B2FF;
}
.klt-btn--purple:hover {
  background: rgba(139, 92, 246, 0.5);
  color: #fff;
}

.klt-btn--cta {
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  box-shadow: 0 10px 24px rgba(255, 106, 0, 0.4);
  font-weight: 800;
  color: #2A1000;
}
.klt-btn--cta:hover {
  color: #2A1000;
}

.klt-shimmer {
  position: relative;
  overflow: hidden;
}
.klt-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.4) 50%, transparent 66%);
  background-size: 230% 100%;
  animation: klt-shimmer 3.4s linear infinite;
  pointer-events: none;
}

.klt-groups__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 90px 100px minmax(0, 1fr) 56px;
  gap: 14px;
  align-items: center;
  padding: 13px 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  text-decoration: none;
  color: #F2F4FF;
  transition: background 0.2s ease;
}
.klt-groups__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.klt-groups__row:hover .klt-groups__go {
  transform: scale(1.1);
}
.klt-groups__row:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: -2px;
}

.klt-groups__main {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.klt-groups__img {
  flex: none;
  width: 46px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 14px rgba(4, 5, 12, 0.5);
}

.klt-groups__titles {
  min-width: 0;
}

.klt-groups__name {
  margin: 0 0 2px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: #F2F4FF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klt-groups__course {
  margin: 0;
  font-size: 11.5px;
  color: rgba(199, 206, 235, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klt-groups__students {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(199, 206, 235, 0.65);
}

.klt-groups__students-icon {
  width: 14px;
  height: 14px;
  color: #8B5CF6;
}

.klt-groups__done {
  text-align: center;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(229, 234, 255, 0.85);
}

.klt-groups__done-sub {
  font-size: 9.5px;
  color: rgba(199, 206, 235, 0.62);
  margin-left: 3px;
}

.klt-groups__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.klt-bar {
  flex: 1;
  height: 9px;
  border-radius: 6px;
  background: rgba(9, 10, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.klt-bar__fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  box-shadow: 0 0 12px rgba(255, 122, 26, 0.7);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.klt-bar__value {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #FFB067;
  width: 38px;
  text-align: right;
  flex: none;
}

.klt-groups__go {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2E8BFF;
  box-shadow: 0 8px 20px rgba(46, 139, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  transition: transform 0.2s ease;
}

.klt-groups__go-icon {
  width: 15px;
  height: 15px;
  color: #fff;
}

.klt-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: stretch;
}

.klt-chart {
  background: linear-gradient(165deg, rgba(41, 38, 88, 0.85), rgba(16, 17, 34, 0.92));
  border-top-color: rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
}

.klt-chart__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.klt-chart__head .klt-label {
  flex: 1;
  min-width: 0;
}

.klt-chart__percent {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  background: linear-gradient(100deg, #FF3B8D, #A855F7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.klt-chart__svg {
  display: block;
  width: 100%;
  height: 110px;
  flex: 1;
}

.klt-chart__grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.klt-chart__glow,
.klt-chart__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.klt-chart__glow {
  stroke: rgba(255, 59, 141, 0.35);
  stroke-width: 8;
  filter: blur(6px);
}

.klt-chart__line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: klt-dash 1.8s ease-out forwards;
}

.klt-chart__months {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.62);
  margin-top: 6px;
}

.klt-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.klt-stats {
  border-radius: 22px;
  padding: 16px 18px;
}
.klt-stats .klt-label {
  margin-bottom: 11px;
}

.klt-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.klt-stats__cell {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 13px;
  background: rgba(9, 10, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}

.klt-stats__num {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #F2F4FF;
}

.klt-stats__delta {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.5);
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 8px;
  color: #C9B2FF;
}

.klt-stats__label {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
  line-height: 1.3;
  margin-left: auto;
  text-align: right;
}

.klt-materials {
  flex: 1;
  border-radius: 22px;
  padding: 16px 18px;
}

.klt-materials__head {
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}
.klt-materials__head .klt-label {
  flex: 1;
}

.klt-materials__all {
  font-size: 10.5px;
  font-weight: 700;
  color: #FF8A2A;
  text-decoration: none;
}
.klt-materials__all:hover {
  color: #FFB067;
}
.klt-materials__all:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
  border-radius: 6px;
}

.klt-materials__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: #F2F4FF;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.klt-materials__row:last-of-type {
  border-bottom: 0;
}
.klt-materials__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.klt-materials__row:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: -2px;
}

.klt-materials__book {
  flex: none;
  width: 18px;
  height: 18px;
  color: #5D8BFF;
}

.klt-materials__name {
  font-weight: 700;
  font-size: 11px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klt-materials__go {
  flex: none;
  width: 13px;
  height: 13px;
  color: #5D8BFF;
}

.klt-schools__list {
  display: flex;
  flex-direction: column;
}

.klt-schools__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  text-decoration: none;
  color: #F2F4FF;
  transition: background 0.2s ease;
}
.klt-schools__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.klt-schools__row:hover .klt-schools__go {
  transform: scale(1.1);
}
.klt-schools__row:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: -2px;
}

.klt-schools__ava {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(139, 92, 246, 0.13);
  border: 1px solid rgba(139, 92, 246, 0.45);
  color: #C9B2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
}

.klt-schools__titles {
  flex: 1;
  min-width: 0;
}

.klt-schools__name {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klt-schools__role {
  margin: 0;
  font-size: 11px;
  color: rgba(199, 206, 235, 0.55);
}

.klt-schools__go {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2E8BFF;
  box-shadow: 0 8px 20px rgba(46, 139, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.klt-schools__go-icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

.klt-modal .modal__title {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.klt-modal__list {
  display: flex;
  flex-direction: column;
}

.klt-modal__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.klt-modal__row:last-child {
  border-bottom: 0;
}
.klt-modal__row form.button_to {
  flex: none;
  margin: 0;
}

.klt-modal__ava {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.klt-modal__main {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.klt-modal__name {
  margin: 0;
  font-weight: 700;
  font-size: 13.5px;
  color: #F2F4FF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klt-modal__sub {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
  overflow-wrap: anywhere;
}

.klt-modal__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 12px;
  background: rgba(46, 139, 255, 0.13);
  border: 1px solid rgba(46, 139, 255, 0.45);
  color: #9CC7FF;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: "Onest", system-ui, sans-serif;
}
.klt-modal__btn:hover {
  background: #2E8BFF;
  color: #fff;
}
.klt-modal__btn:focus-visible {
  outline: 2px solid rgba(46, 139, 255, 0.8);
  outline-offset: 2px;
}
.klt-modal__btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.klt-modal__btn-icon {
  width: 13px;
  height: 13px;
}

.klt-modal__empty {
  padding: 1rem 0;
  font-size: 13px;
  color: rgba(199, 206, 235, 0.55);
}

.klt-modal__more {
  padding: 10px 2px 2px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
}

.dashboard-tabs--klt .profile__block.role-dashboard__header {
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 1.5rem;
  padding: 0.9375rem 1.375rem;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}
.dashboard-tabs--klt .role-dashboard__badge {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, #5D8BFF, #8B5CF6);
  border: 0;
  box-shadow: 0 8px 20px rgba(93, 139, 255, 0.4);
  color: #fff;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.dashboard-tabs--klt .role-dashboard__header-titles .title-middle-small {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #F2F4FF;
}
.dashboard-tabs--klt .role-dashboard__header-titles .text-small {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(199, 206, 235, 0.6);
}
.dashboard-tabs--klt .role-dashboard__header > .btn-app.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 14px;
  background: #2E8BFF;
  box-shadow: 0 10px 24px rgba(46, 139, 255, 0.4);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  transition: transform 0.2s ease;
}
.dashboard-tabs--klt .role-dashboard__header > .btn-app.btn-primary:hover {
  background: #2E8BFF;
  transform: translateY(-2px);
}
.dashboard-tabs--klt .dashboard-tabs__nav {
  background: rgba(9, 10, 18, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dashboard-tabs--klt .dashboard-tabs__btn {
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 700;
}
.dashboard-tabs--klt .dashboard-tabs__btn.is-active, .dashboard-tabs--klt .dashboard-tabs__btn.is-active:hover {
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  box-shadow: 0 8px 20px rgba(255, 106, 0, 0.4);
  color: #fff;
}

body.profiles--klt .profile-bottom-nav__inner,
body.profiles--klp .profile-bottom-nav__inner {
  background: linear-gradient(175deg, rgba(36, 40, 68, 0.9), rgba(13, 15, 27, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 -12px 40px rgba(4, 5, 12, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
body.profiles--klt .profile-bottom-nav__indicator,
body.profiles--klp .profile-bottom-nav__indicator {
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  box-shadow: 0 6px 18px rgba(255, 106, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border-radius: 18px;
}
body.profiles--klt .profile-bottom-nav__item,
body.profiles--klp .profile-bottom-nav__item {
  color: rgba(176, 186, 220, 0.65);
  border-radius: 18px;
}
body.profiles--klt .profile-bottom-nav__item .profile-bottom-nav__label,
body.profiles--klp .profile-bottom-nav__item .profile-bottom-nav__label {
  color: rgba(176, 186, 220, 0.6);
}
body.profiles--klt .profile-bottom-nav__item.active,
body.profiles--klp .profile-bottom-nav__item.active {
  color: #fff;
}
body.profiles--klt .profile-bottom-nav__item.active .profile-bottom-nav__label,
body.profiles--klp .profile-bottom-nav__item.active .profile-bottom-nav__label {
  font-weight: 700;
  color: #fff;
}

.klt-skel {
  pointer-events: none;
}
.klt-skel .skeleton-box,
.klt-skel .skeleton-line {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.05);
}

.klt-skel__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9375rem 1.375rem;
  border-radius: 1.5rem;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
}
.klt-skel__header .skeleton-box--avatar {
  width: 46px;
  height: 46px;
  flex: none;
}

.klt-skel__header-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.klt-skel__header-main .skeleton-line--xl {
  max-width: 280px;
}
.klt-skel__header-main .skeleton-line--sm {
  max-width: 220px;
}

.klt-skel__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.klt-skel__tile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 20px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.klt-skel__tile .skeleton-box--kpi-total {
  flex: none;
}

.klt-skel__tile-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.klt-skel__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
}

.klt-skel__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.klt-skel__card-head .skeleton-line--lg,
.klt-skel__card-head .skeleton-line--sm {
  max-width: 200px;
}
.klt-skel__card-head .skeleton-box--button {
  width: 130px;
  height: 36px;
  border-radius: 13px;
}

.klt-skel__spacer {
  flex: 1;
}

.klt-skel__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.klt-skel__row .skeleton-box--avatar {
  width: 46px;
  height: 48px;
  border-radius: 14px;
  flex: none;
}

.klt-skel__row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.klt-skel__row-bar {
  flex: 1;
}
.klt-skel__row-bar .skeleton-line--bar {
  height: 9px;
  width: 100%;
  border-radius: 6px;
}

.klt-skel__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: stretch;
}
.klt-skel__bottom > .klt-skel__card:first-child {
  background: linear-gradient(165deg, rgba(41, 38, 88, 0.85), rgba(16, 17, 34, 0.92));
}

.klt-skel__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.klt-skel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.klt-skel .skeleton-box--chart-sm {
  width: 100%;
  height: 140px;
  border-radius: 18px;
}
.klt-skel .skeleton-box--stat {
  height: 44px;
  border-radius: 13px;
}

@media (max-width: 1100px) {
  .klt-skel__bottom {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .klt-skel__tiles {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .klt-skel__row-bar {
    display: none;
  }
}
@media (max-width: 1360px) {
  .klt-bottom {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}
@media (max-width: 1100px) {
  .klt-bottom {
    grid-template-columns: 1fr;
  }
  .klt-groups__row {
    grid-template-columns: minmax(0, 1.4fr) 80px minmax(0, 1fr) 48px;
  }
  .klt-groups__done {
    display: none;
  }
  .klt-tile__num {
    font-size: 32px;
  }
}
@media (max-width: 768px) {
  .profile__content.role-dashboard.klt > .profile__block {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .klt-tiles {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .klt-tile {
    padding: 0.875rem;
    border-radius: 1rem;
    gap: 0.75rem;
  }
  .klt-tile__num {
    font-size: 26px;
  }
  .klt-tile__title {
    font-size: 11.5px;
  }
  .klt-tile__hint {
    font-size: 9.5px;
  }
  .klt-tile__face {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }
  .klt-tile__face + .klt-tile__face, .klt-tile__face + .klt-tile__face-more {
    margin-left: -9px;
  }
  .klt-tile__face-more {
    height: 28px;
    border-width: 2px;
  }
  .klt-card {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .dashboard-tabs--klt .profile__block.role-dashboard__header {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .klt-card__head .klt-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .klt-groups__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 4px;
  }
  .klt-groups__students {
    display: none;
  }
  .klt-groups__go {
    display: none;
  }
  .klt-groups__img {
    width: 36px;
    height: 38px;
    border-radius: 11px;
  }
  .klt-groups__name {
    font-size: 12px;
  }
  .klt-groups__course {
    font-size: 10px;
  }
  .klt-chart__percent {
    font-size: 19px;
  }
  .klt-chart__svg {
    height: 60px;
  }
  .klt-stats__grid {
    gap: 6px;
  }
  .klt-bottom {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile__content.role-dashboard.klt > * {
    animation: none;
  }
  .klt-chart__line {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .klt-shimmer::before {
    animation: none;
    display: none;
  }
  .klt-tile,
  .klt-btn,
  .klt-groups__go,
  .klt-schools__go,
  .klt-bar__fill {
    transition: none;
  }
  .klt-tile:hover,
  .klt-btn:hover {
    transform: none;
  }
}
.profile__content.student-dashboard {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1.35fr 0.9fr;
  grid-template-rows: auto;
  grid-auto-flow: row;
  grid-auto-rows: minmax(4rem, auto);
  gap: 1.875rem;
  align-items: stretch;
}
.profile__content.student-dashboard > * {
  height: auto;
}
.profile__content.student-dashboard .student-dashboard__card {
  position: relative;
  overflow: hidden;
  padding: 2rem 2.25rem;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0) 55%), linear-gradient(145deg, rgba(34, 15, 94, 0.9), rgba(10, 28, 86, 0.9));
}
.profile__content.student-dashboard .student-dashboard__anim {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform, opacity;
}
.profile__content.student-dashboard .student-dashboard__mascot {
  position: absolute;
  top: -1.45rem;
  left: -3.65rem;
  width: 6.1rem;
  pointer-events: none;
  user-select: none;
  z-index: 4;
}
.profile__content.student-dashboard .student-dashboard__mascot-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.profile__content.student-dashboard .student-dashboard__card-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile__content.student-dashboard .student-dashboard__card-head--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.profile__content.student-dashboard .student-dashboard__card-head-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile__content.student-dashboard .student-dashboard__card-title {
  font-size: clamp(1rem, 0.62rem + 0.85vw, 1.3rem);
  line-height: 1.12;
}
.profile__content.student-dashboard .student-dashboard__card-subtitle {
  font-size: clamp(0.76rem, 0.62rem + 0.45vw, 0.95rem);
  line-height: 1.22;
}
.profile__content.student-dashboard .student-dashboard__rating > h3 {
  font-size: clamp(1rem, 0.62rem + 0.85vw, 1.3rem);
}
.profile__content.student-dashboard .student-dashboard__rating > p {
  font-size: clamp(0.76rem, 0.62rem + 0.45vw, 0.95rem);
}
.profile__content.student-dashboard .student-dashboard__progress-points {
  font-size: clamp(0.85rem, 0.65rem + 0.5vw, 1rem);
}
.profile__content.student-dashboard .student-dashboard__progress-total,
.profile__content.student-dashboard .student-dashboard__progress-level {
  font-size: clamp(0.95rem, 0.6rem + 0.85vw, 1.3rem);
}
.profile__content.student-dashboard .student-dashboard__top {
  grid-column: 1/-1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.34fr);
  gap: 0;
  align-items: stretch;
  min-height: 16rem;
  padding: 0;
  background: linear-gradient(180deg, rgba(37, 42, 91, 0.98), rgba(34, 39, 88, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.profile__content.student-dashboard .student-dashboard__profile {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-width: 0;
  min-height: 16rem;
  padding: 2.4rem 2.75rem 2.1rem;
  --sd-ring-from: rgba(111, 247, 255, 1);
  --sd-ring-to: rgba(0, 199, 214, 1);
  --sd-ring: rgba(53, 240, 255, .98);
}
.profile__content.student-dashboard .student-dashboard__profile--ring-purple {
  --sd-ring-from: rgba(145, 82, 255, 1);
  --sd-ring-to: rgba(105, 33, 255, 1);
  --sd-ring: rgba(139, 84, 255, .98);
}
.profile__content.student-dashboard .student-dashboard__profile--ring-cyan {
  --sd-ring-from: rgba(111, 247, 255, 1);
  --sd-ring-to: rgba(0, 199, 214, 1);
  --sd-ring: rgba(53, 240, 255, .98);
}
.profile__content.student-dashboard .student-dashboard__profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}
.profile__content.student-dashboard .student-dashboard__profile-left {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  gap: 1.25rem;
}
.profile__content.student-dashboard .student-dashboard__avatar-wrap {
  display: flex;
  width: clamp(5.9rem, 11vw, 7.35rem);
  height: clamp(5.9rem, 11vw, 7.35rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  aspect-ratio: 1;
}
.profile__content.student-dashboard .student-dashboard__avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border-radius: 50%;
  border: 0.55rem solid var(--sd-ring);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.profile__content.student-dashboard .student-dashboard__avatar {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
  object-fit: cover;
  background: rgba(16, 22, 60, 0.55);
}
.profile__content.student-dashboard .student-dashboard__level-badge {
  position: absolute;
  right: -0.55rem;
  bottom: -1.05rem;
  z-index: 6;
  font-weight: 900;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(2.45rem, 3.5vw, 3.15rem);
  line-height: 0.92;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 5px var(--sd-ring);
  text-shadow: 0 0 0 var(--sd-ring), 1px 0 0 var(--sd-ring), -1px 0 0 var(--sd-ring), 0 1px 0 var(--sd-ring), 0 -1px 0 var(--sd-ring), 1px 1px 0 var(--sd-ring), -1px 1px 0 var(--sd-ring), 1px -1px 0 var(--sd-ring), -1px -1px 0 var(--sd-ring), 0 12px 0 rgba(0, 0, 0, 0.18), 0 18px 26px rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}
.profile__content.student-dashboard .student-dashboard__level-badge--level-up {
  animation: sdLevelUpPulse 1.2s ease-in-out 0s 1;
}
.profile__content.student-dashboard .student-dashboard__level-up-toast {
  position: absolute;
  left: 50%;
  top: -1.1rem;
  transform: translateX(-50%);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(255, 206, 84), rgb(127, 41, 250));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 900;
  font-size: 0.85rem;
  color: rgba(15, 16, 44, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.profile__content.student-dashboard .student-dashboard__level-up-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.profile__content.student-dashboard .student-dashboard__user {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}
.profile__content.student-dashboard .student-dashboard__user-name {
  margin: 0;
  max-width: 100%;
  font-weight: 900;
  font-size: clamp(2.2rem, 3.9vw, 3.15rem);
  line-height: 0.94;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.profile__content.student-dashboard .student-dashboard__user-email {
  margin: 0;
  max-width: 100%;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255, 255, 255, 0.55);
  overflow-wrap: anywhere;
}
.profile__content.student-dashboard .student-dashboard__data-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0.45rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(0, 117, 255, 0.85), rgba(0, 117, 255, 0.7));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
  color: #fff;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__data-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.profile__content.student-dashboard .student-dashboard__data-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
.profile__content.student-dashboard .student-dashboard__data-btn-text {
  font-weight: 800;
}
.profile__content.student-dashboard .student-dashboard__data-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  background: transparent;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 900;
  opacity: 0.95;
}
.profile__content.student-dashboard .student-dashboard__data-btn-icon .icon, .profile__content.student-dashboard .student-dashboard__data-btn-icon svg, .profile__content.student-dashboard .student-dashboard__data-btn-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.profile__content.student-dashboard .student-dashboard__profile-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 1.65rem;
  margin-bottom: 1.25rem;
  margin-left: -2.75rem;
  margin-right: -2.75rem;
}
.profile__content.student-dashboard .student-dashboard__profile-bottom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: auto;
}
.profile__content.student-dashboard .student-dashboard__profile-bottom .student-dashboard__achievements {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.profile__content.student-dashboard .student-dashboard__profile-vdivider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__achievements-title {
  margin: 0 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.profile__content.student-dashboard .student-dashboard__achievement {
  opacity: 0;
  transform: translateY(6px);
}
.profile__content.student-dashboard .student-dashboard__balance {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.profile__content.student-dashboard .student-dashboard__balance-label {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.1;
}
.profile__content.student-dashboard .student-dashboard__balance-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.profile__content.student-dashboard .student-dashboard__balance-bag {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.profile__content.student-dashboard .student-dashboard__row--progress-courses {
  grid-column: 1/-1;
  grid-row: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem;
  align-items: stretch;
}
.profile__content.student-dashboard .student-dashboard__row--progress-courses .student-dashboard__progress,
.profile__content.student-dashboard .student-dashboard__row--progress-courses .student-dashboard__courses {
  grid-column: auto;
  grid-row: auto;
  min-width: 0;
}
.profile__content.student-dashboard .student-dashboard__learning-row {
  grid-column: 1/-1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: 1.875rem;
  align-items: stretch;
}
.profile__content.student-dashboard .student-dashboard__learning-row .student-dashboard__performance {
  grid-column: auto;
  grid-row: auto;
  height: 100%;
}
.profile__content.student-dashboard .student-dashboard__side-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.profile__content.student-dashboard .student-dashboard__action-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.profile__content.student-dashboard .student-dashboard__action-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2.9rem;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.75rem;
  padding: 0.8rem 0.9rem 0.8rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(37, 37, 67, 0.97), rgba(34, 34, 61, 0.97));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  transition: transform 0.18s ease-out, filter 0.18s ease-out, border-color 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__action-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.92;
}
.profile__content.student-dashboard .student-dashboard__action-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.profile__content.student-dashboard .student-dashboard__action-card:hover .student-dashboard__action-card-arrow {
  transform: translate(1px, -1px);
}
.profile__content.student-dashboard .student-dashboard__action-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38);
  outline-offset: 2px;
}
.profile__content.student-dashboard .student-dashboard__action-card--lessons::before {
  box-shadow: inset 0 -2px 0 rgba(255, 122, 0, 0.96), inset 0 0 18px rgba(255, 122, 0, 0.23);
}
.profile__content.student-dashboard .student-dashboard__action-card--homeworks::before {
  box-shadow: inset 0 -2px 0 rgba(255, 64, 148, 0.96), inset 0 0 18px rgba(255, 64, 148, 0.23);
}
.profile__content.student-dashboard .student-dashboard__action-card--project::before {
  box-shadow: inset 0 -2px 0 rgba(36, 232, 255, 0.96), inset 0 0 18px rgba(36, 232, 255, 0.22);
}
.profile__content.student-dashboard .student-dashboard__action-card-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 2.1rem;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
}
.profile__content.student-dashboard .student-dashboard__action-card-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile__content.student-dashboard .student-dashboard__action-card-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.profile__content.student-dashboard .student-dashboard__action-card-title {
  color: #fff;
  font-weight: 900;
  font-size: clamp(1rem, 1.65vw, 1.28rem);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__action-card-subtitle {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__action-card-arrow,
.profile__content.student-dashboard .student-dashboard__shop-card-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: rgba(0, 127, 255, 0.98);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__card-arrow-svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}
.profile__content.student-dashboard .student-dashboard__shop-card {
  position: relative;
  min-height: 5.9rem;
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 1fr) 2.9rem;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.05rem 1.05rem 1.55rem;
  border-radius: 1.55rem;
  border: 3px solid rgba(255, 83, 186, 0.76);
  color: #fff;
  text-decoration: none;
  background: radial-gradient(circle at 67% 35%, rgba(255, 192, 64, 0.24), transparent 7rem), linear-gradient(135deg, rgba(219, 38, 179, 0.97), rgba(175, 18, 154, 0.97));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
  overflow: hidden;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__shop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 40%, rgba(255, 255, 255, 0.18), transparent 7rem);
  opacity: 0.78;
  pointer-events: none;
}
.profile__content.student-dashboard .student-dashboard__shop-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.profile__content.student-dashboard .student-dashboard__shop-card:hover .student-dashboard__shop-card-arrow {
  transform: translate(1px, -1px);
}
.profile__content.student-dashboard .student-dashboard__shop-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38);
  outline-offset: 2px;
}
.profile__content.student-dashboard .student-dashboard__shop-card-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(255, 231, 0);
  font-size: 3.25rem;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
}
.profile__content.student-dashboard .student-dashboard__shop-card-title {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1rem, 0.5rem + 1.6vw, 1.85rem);
  font-weight: 900;
  line-height: 0.95;
}
.profile__content.student-dashboard .student-dashboard__next-lesson {
  position: relative;
  min-height: 14.5rem;
  display: grid;
  grid-template-columns: minmax(7.8rem, 0.48fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 0.2rem;
  padding: 1.5rem 1.45rem 1.35rem 1.2rem;
  border-radius: 1.55rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(39, 43, 94, 0.98), rgba(39, 43, 94, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__next-lesson:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.profile__content.student-dashboard .student-dashboard__next-lesson:hover .student-dashboard__next-lesson-button {
  filter: brightness(1.08);
}
.profile__content.student-dashboard .student-dashboard__next-lesson:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38);
  outline-offset: 2px;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-image-wrap {
  align-self: end;
  min-width: 0;
  margin-left: -2rem;
  margin-bottom: -1.4rem;
  pointer-events: none;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-image {
  display: block;
  width: min(13.4rem, 135%);
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
}
.profile__content.student-dashboard .student-dashboard__next-lesson-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
  gap: 0.75rem;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-title {
  margin: 0 0 0.35rem;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 0.98;
  text-align: center;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-meta {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  line-height: 1;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-name {
  margin: 0.05rem 0 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}
.profile__content.student-dashboard .student-dashboard__next-lesson--empty .student-dashboard__next-lesson-content {
  gap: 0.5rem;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-message {
  margin: 0;
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
}
.profile__content.student-dashboard .student-dashboard__next-lesson-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  margin-top: auto;
  padding: 0.48rem 1.15rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 127, 255, 0.98);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  transition: filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__balance-value {
  color: #fff;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__performance {
  grid-column: 1/-1;
  grid-row: 2;
  min-height: 15.75rem;
  display: block;
  padding: 1.55rem 14.25rem 1.55rem 1.75rem;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 76% 14%, rgba(255, 188, 83, 0.22) 0, transparent 8rem), radial-gradient(circle at 6% 100%, rgba(142, 103, 255, 0.24) 0, transparent 7.5rem), linear-gradient(180deg, rgba(48, 47, 112, 0.98), rgba(38, 37, 91, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(142, 103, 255, 0.12) inset;
  --sd-performance-accent: rgba(255, 230, 0, 1);
  --sd-performance-accent-soft: rgba(255, 230, 0, .22);
}
.profile__content.student-dashboard .student-dashboard__performance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url(/assets/student_dashboard/performance_stars_background-6007b71e5f1f8105d62e94225829f8a9376ab6af7f042273428292953224b91c.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}
.profile__content.student-dashboard .student-dashboard__performance::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4.1rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  z-index: -1;
}
.profile__content.student-dashboard .student-dashboard__performance--start {
  --sd-performance-accent: rgba(0, 229, 221, 1);
  --sd-performance-accent-soft: rgba(0, 229, 221, .20);
}
.profile__content.student-dashboard .student-dashboard__performance--bad {
  --sd-performance-accent: rgba(255, 72, 103, 1);
  --sd-performance-accent-soft: rgba(255, 72, 103, .22);
}
.profile__content.student-dashboard .student-dashboard__performance--middle {
  --sd-performance-accent: rgba(255, 126, 0, 1);
  --sd-performance-accent-soft: rgba(255, 126, 0, .22);
}
.profile__content.student-dashboard .student-dashboard__performance--success {
  --sd-performance-accent: rgba(134, 255, 37, 1);
  --sd-performance-accent-soft: rgba(134, 255, 37, .20);
}
.profile__content.student-dashboard .student-dashboard__performance-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: none;
  min-height: 12.65rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
}
.profile__content.student-dashboard .student-dashboard__performance-head {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.profile__content.student-dashboard .student-dashboard__performance-title {
  margin: 0;
  color: #fff;
}
.profile__content.student-dashboard .student-dashboard__performance-heading {
  margin: 0;
  color: var(--sd-performance-accent);
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: 0.01em;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}
.profile__content.student-dashboard .student-dashboard__performance-progress {
  width: 100%;
  height: 1rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.profile__content.student-dashboard .student-dashboard__performance-progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sd-performance-accent), var(--sd-performance-accent-soft));
  transition: width 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.profile__content.student-dashboard .student-dashboard__performance-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.15rem;
}
.profile__content.student-dashboard .student-dashboard__performance-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  max-width: none;
  text-decoration: none;
  color: #fff;
}
.profile__content.student-dashboard .student-dashboard__performance-link:hover .student-dashboard__performance-link-icon {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
.profile__content.student-dashboard .student-dashboard__performance-text {
  min-width: 0;
  color: #fff;
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
  font-weight: 900;
  line-height: 1.16;
  text-wrap: balance;
}
.profile__content.student-dashboard .student-dashboard__performance-link-icon,
.profile__content.student-dashboard .student-dashboard__performance-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
}
.profile__content.student-dashboard .student-dashboard__performance-link-icon {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(0, 127, 255, 0.98);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__performance-link-icon-svg {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}
.profile__content.student-dashboard .student-dashboard__performance-check {
  flex-basis: 3.15rem;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  background: var(--sd-performance-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.4 4.4L19 7' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center, linear-gradient(#000 0 0);
  -webkit-mask-size: 60%, auto;
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.4 4.4L19 7' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center, linear-gradient(#000 0 0);
  mask-size: 60%, auto;
  mask-composite: exclude;
}
.profile__content.student-dashboard .student-dashboard__performance-visual {
  position: absolute;
  z-index: 0;
  top: 4.75rem;
  right: 1.35rem;
  bottom: 0.85rem;
  width: 11.75rem;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}
.profile__content.student-dashboard .student-dashboard__performance-cat {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
}
.profile__content.student-dashboard .student-dashboard__progress {
  grid-column: 1/span 2;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.profile__content.student-dashboard .student-dashboard__progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 14.45rem;
  overflow-y: auto;
  padding-right: 0.55rem;
  justify-content: flex-start;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar {
  width: 0.35rem;
  height: 0.35rem;
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-track {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.3);
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-corner {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:single-button, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:vertical:decrement, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:vertical:increment, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:horizontal:decrement, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:horizontal:increment, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:start:decrement, .profile__content.student-dashboard .student-dashboard__progress-list::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.profile__content.student-dashboard .student-dashboard__progress-item {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.45rem;
}
.profile__content.student-dashboard .student-dashboard__progress-points {
  min-width: 0;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__progress-time {
  justify-self: end;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
}
.profile__content.student-dashboard .student-dashboard__progress-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__progress-icon-img {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}
.profile__content.student-dashboard .student-dashboard__progress-empty {
  padding: 0.25rem 0;
}
.profile__content.student-dashboard .student-dashboard__progress-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: auto;
  min-height: 0;
}
.profile__content.student-dashboard .student-dashboard__progress-bar-track {
  width: 100%;
  height: 1.05rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__progress-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(45, 212, 191), rgb(0, 209, 197));
  transition: width 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__anim {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--sd-order, 0) * 70ms);
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__progress-bar-fill {
  width: var(--progress, 0%);
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__achievement {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * 60ms);
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__achievement:not(.student-dashboard__achievement--more):hover, .profile__content.student-dashboard.student-dashboard--ready .student-dashboard__achievement:not(.student-dashboard__achievement--more).is-open {
  transform: translateY(-7px) scale(1.1);
  transition-delay: 0s;
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__achievement--locked {
  opacity: 1;
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__achievement--empty {
  opacity: 0.34;
}
.profile__content.student-dashboard.student-dashboard--ready .student-dashboard__achievement--more {
  opacity: 1;
}
.profile__content.student-dashboard.student-dashboard--settled .student-dashboard__achievement {
  transition-delay: 0s;
}
.profile__content.student-dashboard .student-dashboard__progress-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.profile__content.student-dashboard .student-dashboard__progress-total {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.profile__content.student-dashboard .student-dashboard__progress-total-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__progress-total-icon img {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}
.profile__content.student-dashboard .student-dashboard__courses {
  grid-column: 3;
  grid-row: 3;
}
.profile__content.student-dashboard .student-dashboard__rating {
  grid-column: 1/-1;
  grid-row: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: linear-gradient(90deg, rgba(61, 44, 96, 0.92), rgba(55, 62, 94, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.38);
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table {
  margin-top: 1.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.15rem;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar {
  width: 0.35rem;
  height: 0.35rem;
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-track {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.3);
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-corner {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:single-button, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:vertical:decrement, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:vertical:increment, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:horizontal:decrement, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:horizontal:increment, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:start:decrement, .profile__content.student-dashboard .student-dashboard__rating .student-dashboard__rating-table::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.profile__content.student-dashboard .student-dashboard__rating .rating__projects {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}
.profile__content.student-dashboard .student-dashboard__rating .rating__projects thead, .profile__content.student-dashboard .student-dashboard__rating .rating__projects tbody, .profile__content.student-dashboard .student-dashboard__rating .rating__projects tr, .profile__content.student-dashboard .student-dashboard__rating .rating__projects th, .profile__content.student-dashboard .student-dashboard__rating .rating__projects td {
  padding: 0;
}
.profile__content.student-dashboard .student-dashboard__rating .rating__projects--header,
.profile__content.student-dashboard .student-dashboard__rating .project {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 1.1fr) minmax(5rem, 0.45fr) minmax(8.5rem, 0.7fr);
  gap: 1rem;
  align-items: center;
  width: 100%;
}
.profile__content.student-dashboard .student-dashboard__rating .rating__projects--header {
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__rating .rating__projects--header th {
  min-width: 0;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 650;
  color: rgba(176, 183, 201, 0.8);
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__rating .rating__projects--header .project__views,
.profile__content.student-dashboard .student-dashboard__rating .rating__projects--header .project__progress {
  text-align: right;
}
.profile__content.student-dashboard .student-dashboard__rating .project__name,
.profile__content.student-dashboard .student-dashboard__rating .project__participants,
.profile__content.student-dashboard .student-dashboard__rating .project__views,
.profile__content.student-dashboard .student-dashboard__rating .project__progress {
  min-width: 0;
}
.profile__content.student-dashboard .student-dashboard__rating .project__name {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile__content.student-dashboard .student-dashboard__rating .project__name .project__name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__rating .project__name svg, .profile__content.student-dashboard .student-dashboard__rating .project__name img {
  flex: 0 0 auto;
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participants-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participant {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 0;
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participant--captain {
  background: rgba(255, 193, 7, 0.14);
  border-color: rgba(255, 193, 7, 0.28);
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participant-avatar {
  position: relative;
  flex: 0 0 auto;
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participant-avatar .user-avatar__primary {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  border: 2px solid rgba(34, 39, 88, 0.92);
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participant-avatar .project-team__captain-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.3rem;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.65rem;
}
.profile__content.student-dashboard .student-dashboard__rating .project__participants .project__participant-name {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__rating .project__views {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__rating .project__progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.55rem;
}
.profile__content.student-dashboard .student-dashboard__rating .project__progress .project__progress-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem;
  text-align: right;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__rating .project__progress .project__progress-percent {
  color: rgba(255, 255, 255, 0.72);
}
.profile__content.student-dashboard .student-dashboard__rating .project__progress .project__progress-bar-wrapper {
  width: 100%;
  max-width: 12rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}
.profile__content.student-dashboard .student-dashboard__rating .project__progress .project__progress-bar {
  height: 100%;
  width: var(--progress);
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(0, 117, 255), rgb(127, 41, 250));
  transition: width 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.profile__content.student-dashboard .student-dashboard__rating .projects {
  display: block;
  max-height: 50svh;
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar {
  width: 0.35rem;
  height: 0.35rem;
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-track {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.3);
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-corner {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:single-button, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:vertical:decrement, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:vertical:increment, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:horizontal:decrement, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:horizontal:increment, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:start:decrement, .profile__content.student-dashboard .student-dashboard__rating .projects::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.profile__content.student-dashboard .student-dashboard__rating .projects .project {
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__courses-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 19rem;
  overflow-y: auto;
  padding-right: 0.55rem;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar {
  width: 0.35rem;
  height: 0.35rem;
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-track {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.3);
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-corner {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:single-button, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:vertical:decrement, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:vertical:increment, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:horizontal:decrement, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:horizontal:increment, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:start:decrement, .profile__content.student-dashboard .student-dashboard__courses-list::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.profile__content.student-dashboard .student-dashboard__course-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 1.55rem;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.18s ease-out, background 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__course-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.07);
}
.profile__content.student-dashboard .student-dashboard__course-link:hover .student-dashboard__course-arrow {
  transform: translate(1px, -1px);
  filter: brightness(1.06);
}
.profile__content.student-dashboard .student-dashboard__course-link:focus-visible {
  outline: 2px solid rgba(0, 127, 255, 0.55);
  outline-offset: 2px;
}
.profile__content.student-dashboard .student-dashboard__course-avatar {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.profile__content.student-dashboard .student-dashboard__course-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.profile__content.student-dashboard .student-dashboard__course-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 800;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(145deg, rgba(34, 15, 94, 0.9), rgba(10, 28, 86, 0.9));
}
.profile__content.student-dashboard .student-dashboard__course-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__content.student-dashboard .student-dashboard__course-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.35rem;
  align-self: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: rgba(0, 127, 255, 0.98);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__course-arrow .icon, .profile__content.student-dashboard .student-dashboard__course-arrow svg, .profile__content.student-dashboard .student-dashboard__course-arrow img {
  display: block;
  width: 1rem;
  height: 1rem;
}
.profile__content.student-dashboard .student-dashboard__empty {
  margin-top: 1.25rem;
  padding: 1rem 1.05rem;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile__content.student-dashboard .student-dashboard__empty p {
  margin: 0;
}
.profile__content.student-dashboard .student-dashboard__empty-link {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 117, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}
.profile__content.student-dashboard .student-dashboard__empty-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 900;
  line-height: 1;
}
.profile__content.student-dashboard .student-dashboard__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  align-self: center;
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(38, 48, 245, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  color: #fff;
}
.profile__content.student-dashboard .student-dashboard__card-link .icon, .profile__content.student-dashboard .student-dashboard__card-link svg, .profile__content.student-dashboard .student-dashboard__card-link img {
  display: block;
  width: 1rem;
  height: 1rem;
}
.profile__content.student-dashboard .student-dashboard__projects {
  grid-column: 1/-1;
}
.profile__content.student-dashboard .student-dashboard__projects-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-height: 30rem;
  overflow-y: auto;
  padding-right: 0.55rem;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: auto;
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar {
  width: 0.35rem;
  height: 0.35rem;
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-track {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 0.3s ease-in-out;
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.3);
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-corner {
  background: transparent;
}
.profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:single-button, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:vertical:decrement, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:vertical:increment, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:horizontal:decrement, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:horizontal:increment, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:start:decrement, .profile__content.student-dashboard .student-dashboard__projects-grid::-webkit-scrollbar-button:end:increment {
  display: none;
  width: 0;
  height: 0;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
}
.profile__content.student-dashboard .student-dashboard__project {
  border-radius: 1.5rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease-out;
}
.profile__content.student-dashboard .student-dashboard__project:hover {
  transform: translateY(-2px);
}
.profile__content.student-dashboard .student-dashboard__project-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
}
.profile__content.student-dashboard .student-dashboard__project-image--placeholder {
  background: rgba(255, 255, 255, 0.06);
}
.profile__content.student-dashboard .student-dashboard__project-body {
  padding: 0.95rem 1rem 1.05rem;
}
.profile__content.student-dashboard .student-dashboard__project-stats {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.profile__content.student-dashboard .student-dashboard__project-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}
.profile__content.student-dashboard .student-dashboard__project-stat-icon {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1;
}
.profile__content.student-dashboard .student-dashboard__project-stat-icon-img {
  display: block;
  width: 0.92rem;
  height: 0.92rem;
  object-fit: contain;
}
.profile__content.student-dashboard .student-dashboard__project-stat-value {
  font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  .profile__content.student-dashboard .student-dashboard__anim {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .profile__content.student-dashboard .student-dashboard__achievement {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .profile__content.student-dashboard .student-dashboard__progress-bar-fill {
    transition: none;
    width: var(--progress);
  }
}
@media (max-width: 1100px) {
  .profile__content.student-dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .profile__content.student-dashboard .student-dashboard__top {
    grid-column: 1/-1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 0.36fr);
  }
  .profile__content.student-dashboard .student-dashboard__row--progress-courses {
    grid-column: 1/-1;
    grid-row: auto;
    grid-template-columns: 1fr;
  }
  .profile__content.student-dashboard .student-dashboard__learning-row {
    grid-column: 1/-1;
    grid-row: auto;
    grid-template-columns: 1fr;
  }
  .profile__content.student-dashboard .student-dashboard__side-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .profile__content.student-dashboard .student-dashboard__action-cards {
    grid-row: auto;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson {
    min-height: 13.5rem;
  }
  .profile__content.student-dashboard .student-dashboard__performance {
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
  }
  .profile__content.student-dashboard .student-dashboard__progress {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .profile__content.student-dashboard .student-dashboard__courses {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .profile__content.student-dashboard .student-dashboard__projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .profile__content.student-dashboard .student-dashboard__card {
    padding: 1.1rem 1.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__top {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .profile__content.student-dashboard .student-dashboard__profile {
    min-height: 0;
    gap: 1.15rem;
    padding: 1.2rem 1.4rem;
  }
  .profile__content.student-dashboard .student-dashboard__profile-header {
    flex-wrap: wrap;
  }
  .profile__content.student-dashboard .student-dashboard__profile-divider {
    margin-top: 0.6rem;
    margin-bottom: 0.25rem;
    margin-left: -1.4rem;
    margin-right: -1.4rem;
  }
  .profile__content.student-dashboard .student-dashboard__data-btn {
    align-self: flex-start;
  }
  .profile__content.student-dashboard .student-dashboard__mascot {
    display: none;
  }
  .profile__content.student-dashboard .student-dashboard__performance {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
    min-height: 13.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__performance-heading {
    font-size: clamp(1.45rem, 4vw, 1.8rem);
  }
  .profile__content.student-dashboard .student-dashboard__performance-cat {
    right: -3.2rem;
    bottom: -2.9rem;
    width: min(18rem, 132%);
  }
  .profile__content.student-dashboard .student-dashboard__side-panel {
    grid-template-columns: 1fr;
  }
  .profile__content.student-dashboard .student-dashboard__action-cards {
    grid-row: auto;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson {
    grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr);
  }
  .profile__content.student-dashboard .student-dashboard__balance-value {
    font-size: clamp(1.85rem, 4.4vw, 2.2rem);
  }
}
@media (max-width: 640px) {
  .profile__content.student-dashboard {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .profile__content.student-dashboard .student-dashboard__card {
    padding: 1rem 1.1rem;
  }
  .profile__content.student-dashboard .student-dashboard__top {
    padding: 0;
  }
  .profile__content.student-dashboard .student-dashboard__profile {
    min-height: 0;
    gap: 0.9rem;
    padding: 1.4rem 1.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__profile-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }
  .profile__content.student-dashboard .student-dashboard__profile-left {
    width: 100%;
    gap: 1rem;
  }
  .profile__content.student-dashboard .student-dashboard__avatar-wrap {
    width: 5.85rem;
    height: 5.85rem;
  }
  .profile__content.student-dashboard .student-dashboard__avatar-wrap::before {
    inset: -0.4rem;
    border-width: 0.42rem;
  }
  .profile__content.student-dashboard .student-dashboard__level-badge {
    right: -0.35rem;
    bottom: -0.8rem;
    font-size: 2.45rem;
    -webkit-text-stroke: 4px var(--sd-ring);
  }
  .profile__content.student-dashboard .student-dashboard__user-name {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
  }
  .profile__content.student-dashboard .student-dashboard__user-email {
    font-size: 0.95rem;
  }
  .profile__content.student-dashboard .student-dashboard__profile-divider {
    margin-top: 0.25rem;
    margin-bottom: 0.1rem;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__profile-bottom {
    flex-direction: column;
    gap: 0.9rem;
  }
  .profile__content.student-dashboard .student-dashboard__profile-vdivider {
    width: 100%;
    height: 1px;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__data-btn {
    width: 3.25rem;
    min-width: 0;
    height: 3.25rem;
    padding: 0;
    justify-content: center;
  }
  .profile__content.student-dashboard .student-dashboard__data-btn-text {
    display: inline;
  }
  .profile__content.student-dashboard .student-dashboard__data-btn-icon {
    font-size: 1.35rem;
  }
  .profile__content.student-dashboard .student-dashboard__progress,
  .profile__content.student-dashboard .student-dashboard__courses {
    grid-column: 1/-1;
    grid-row: auto;
  }
  .profile__content.student-dashboard .student-dashboard__balance {
    gap: 0.65rem;
  }
  .profile__content.student-dashboard .student-dashboard__balance-value {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }
  .profile__content.student-dashboard .student-dashboard__row--progress-courses {
    grid-template-columns: 1fr;
  }
  .profile__content.student-dashboard .student-dashboard__learning-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .profile__content.student-dashboard .student-dashboard__side-panel {
    gap: 1rem;
  }
  .profile__content.student-dashboard .student-dashboard__action-card {
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.55rem;
    min-height: 4.25rem;
    padding: 0.75rem 0.8rem;
  }
  .profile__content.student-dashboard .student-dashboard__action-card-icon {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }
  .profile__content.student-dashboard .student-dashboard__action-card-arrow,
  .profile__content.student-dashboard .student-dashboard__shop-card-arrow {
    width: 2.55rem;
    height: 2.55rem;
    font-size: 1.3rem;
  }
  .profile__content.student-dashboard .student-dashboard__shop-card {
    min-height: 5rem;
    grid-template-columns: 3.2rem minmax(0, 1fr) 2.55rem;
    padding: 0.9rem 0.85rem 0.9rem 1rem;
    border-radius: 1.25rem;
  }
  .profile__content.student-dashboard .student-dashboard__shop-card-icon {
    font-size: 2.75rem;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson {
    min-height: 16.5rem;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson-title {
    left: 3.3rem;
    right: 1rem;
    font-size: 1.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson-content {
    left: 7.5rem;
    right: 0.9rem;
    top: 4.75rem;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson-image-wrap {
    left: -0.45rem;
    bottom: -0.1rem;
    width: 7.5rem;
  }
  .profile__content.student-dashboard .student-dashboard__next-lesson-button {
    left: 2rem;
    right: 1rem;
    bottom: 0.9rem;
  }
  .profile__content.student-dashboard .student-dashboard__performance {
    min-height: 19rem;
    padding-right: 1.4rem;
    padding-bottom: 9.2rem;
  }
  .profile__content.student-dashboard .student-dashboard__performance-content {
    min-height: 0;
    max-width: none;
  }
  .profile__content.student-dashboard .student-dashboard__performance-progress {
    width: 100%;
  }
  .profile__content.student-dashboard .student-dashboard__performance-visual {
    top: auto;
    right: 1.1rem;
    bottom: 0.85rem;
    width: 9.5rem;
    height: 7.8rem;
  }
  .profile__content.student-dashboard .student-dashboard__performance-cat {
    max-height: 100%;
  }
  .profile__content.student-dashboard .student-dashboard__rating-table {
    margin-right: -0.1rem;
    padding-right: 0.1rem;
  }
  .profile__content.student-dashboard .rating__projects {
    min-width: 35.5rem;
  }
  .profile__content.student-dashboard .rating__projects--header,
  .profile__content.student-dashboard .project {
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(10rem, 1fr) minmax(4.5rem, 0.35fr) minmax(7.25rem, 0.55fr);
  }
  .profile__content.student-dashboard .project__participant-name {
    max-width: 6.75rem;
  }
  .profile__content.student-dashboard .student-dashboard__projects-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 420px) {
  .profile__content.student-dashboard .student-dashboard__progress-item {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
  }
  .profile__content.student-dashboard .student-dashboard__progress-points,
  .profile__content.student-dashboard .student-dashboard__progress-time {
    grid-column: 2;
  }
  .profile__content.student-dashboard .student-dashboard__progress-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }
}
.student-dashboard__sidebar-cards {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 0 0 auto;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card {
  position: relative;
  min-height: 5.4rem;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.3rem + 0.6vw, 0.85rem);
  padding: 0.7rem clamp(0.7rem, 0.5rem + 0.6vw, 1.05rem);
  border-radius: 24px;
  border: 3px solid rgba(255, 94, 205, 0.58);
  color: #fff;
  text-decoration: none;
  background: url(/assets/student_dashboard/shop-collection-f56d97244f681c6bc5e4060ef587b5fbdcb883f36a50b5c730a4799232fe1789.png) right -1.85rem center/9.7rem auto no-repeat, linear-gradient(90deg, rgba(229, 32, 163, 0.84) 35%, rgba(109, 4, 90, 0.9) 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(229, 32, 163, 0.42) 0%, rgba(109, 4, 90, 0.2) 100%);
  pointer-events: none;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card:hover .student-dashboard__shop-card-arrow {
  transform: translate(1px, -1px);
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38);
  outline-offset: 2px;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card-icon,
.student-dashboard__sidebar-cards .student-dashboard__shop-card-title,
.student-dashboard__sidebar-cards .student-dashboard__shop-card-arrow {
  position: relative;
  z-index: 1;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(2.9rem, 2.2rem + 1.4vw, 4rem);
  height: clamp(2.65rem, 2rem + 1.3vw, 3.65rem);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.student-dashboard__sidebar-cards .student-dashboard__shop-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  flex: 0 0 auto;
  width: clamp(2.5rem, 2.1rem + 0.9vw, 3rem);
  height: clamp(2.5rem, 2.1rem + 0.9vw, 3rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 127, 255, 0.98);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.student-dashboard__sidebar-cards .student-dashboard__card-arrow-svg {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson {
  position: relative;
  min-height: 16.8rem;
  display: grid;
  grid-template-columns: minmax(10.8rem, 0.58fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem 0.85rem;
  padding: 1.35rem 1.15rem 1.05rem;
  border-radius: 1.75rem;
  border: 2px solid rgba(0, 127, 255, 0.95);
  color: #fff;
  text-decoration: none;
  background: radial-gradient(circle at 24% 88%, rgba(0, 127, 255, 0.2), transparent 7rem), linear-gradient(180deg, rgba(46, 51, 119, 0.98), rgba(39, 43, 94, 0.98));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
  overflow: visible;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson:hover .student-dashboard__next-lesson-button {
  filter: brightness(1.08);
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.38);
  outline-offset: 2px;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-title {
  position: relative;
  z-index: 3;
  grid-column: 1/-1;
  margin: 0;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.18rem, 1.45vw, 1.55rem);
  font-weight: 900;
  line-height: 0.98;
  text-align: center;
  overflow-wrap: anywhere;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-image-wrap {
  position: absolute;
  z-index: 1;
  left: -2.4rem;
  top: 3.35rem;
  bottom: -2rem;
  width: clamp(13.25rem, 61%, 16.25rem);
  max-width: none;
  margin: 0;
  pointer-events: none;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.36));
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-content {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.14;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-meta-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-meta-icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 1.4rem;
  object-fit: contain;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-name {
  margin: 0;
  color: #fff;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-message {
  margin: 0;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.32;
  overflow-wrap: anywhere;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-button {
  position: relative;
  z-index: 3;
  grid-column: 1/-1;
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 127, 255, 0.98);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  transition: filter 0.18s ease-out;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-dashboard__sidebar-cards .student-dashboard__next-lesson-button-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
}

@media (max-width: 1023px) {
  .profile__sidebar-column {
    display: contents;
  }
  .student-dashboard__sidebar-cards {
    display: none;
  }
}
.student-dashboard .student-dashboard__next-lesson {
  overflow: hidden;
}
.student-dashboard .student-dashboard__next-lesson-image-wrap {
  bottom: -1rem;
}
.student-dashboard .student-dashboard__next-lesson-image {
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.student-dashboard__daily-chest {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.15rem, 1.7vw, 1.7rem);
  min-width: 0;
  min-height: 16rem;
  padding: 1.75rem 1.9rem 1.55rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(85% 95% at 78% 18%, rgba(255, 145, 42, 0.14) 0, rgba(255, 145, 42, 0) 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06));
}

.student-daily-chest__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.8rem;
}

.student-daily-chest__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}

.student-daily-chest__title {
  margin: 0;
  max-width: 7.2rem;
  color: #fff;
  font-size: clamp(1.1rem, 1.25vw, 1.35rem);
  font-weight: 900;
  line-height: 1.02;
}

.student-daily-chest__claim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: 0.7rem 1.6rem;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #ff8a3d 0%, #ff3da7 100%);
  box-shadow: 0 14px 26px rgba(255, 61, 167, 0.35);
  transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}
.student-daily-chest__claim:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
.student-daily-chest__claim:active:not(:disabled) {
  transform: translateY(0);
}
.student-daily-chest__claim:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
.student-daily-chest__claim:disabled {
  cursor: default;
  opacity: 1;
}

.student-daily-chest__debug-tool {
  display: inline-flex;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.student-daily-chest__claim--claimed {
  color: rgba(234, 243, 255, 0.76);
  background: linear-gradient(90deg, rgba(188, 126, 92, 0.94) 0%, rgba(162, 71, 166, 0.94) 100%);
  box-shadow: none;
}

.student-daily-chest__hero {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: start;
  justify-self: end;
  flex: 0 0 auto;
  width: clamp(4.85rem, 6vw, 5.55rem);
  margin-top: -0.05rem;
  pointer-events: none;
  user-select: none;
}

.student-daily-chest__hero-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4));
}

.student-daily-chest__ladder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.24rem;
  align-items: stretch;
}

.student-daily-chest__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  min-width: 0;
  min-height: 4rem;
  padding: 0.34rem 0.16rem 0.44rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(70, 72, 126, 0.58), rgba(34, 37, 84, 0.62));
  color: #fff;
  overflow: hidden;
}

.student-daily-chest__step-num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.student-daily-chest__step-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 1.9rem;
  pointer-events: none;
  user-select: none;
}

.student-daily-chest__step-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0.38rem 0.5rem rgba(0, 0, 0, 0.36));
}

.student-daily-chest__step-coins {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.student-daily-chest__step--claimed {
  border-color: rgba(255, 55, 227, 0.72);
  background: linear-gradient(180deg, rgba(83, 58, 110, 0.82), rgba(55, 43, 91, 0.82));
}

.student-daily-chest__step--current {
  border: 0.0625rem solid #FF7900;
  border-radius: 0.75rem;
  background: rgba(57, 55, 108, 0.4);
  box-shadow: 0 0 0.45625rem 0.4375rem #FFC100;
}

.student-daily-chest__step--locked {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(68, 72, 120, 0.56), rgba(39, 43, 92, 0.62));
}

.student-daily-chest__step--final {
  border-color: rgba(255, 55, 227, 0.9);
  background: radial-gradient(circle at 50% 18%, rgba(255, 55, 227, 0.33), transparent 56%), linear-gradient(180deg, rgba(76, 48, 102, 0.9), rgba(52, 34, 86, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0.9rem rgba(255, 55, 227, 0.28);
}

.student-daily-chest__step--final.student-daily-chest__step--current {
  border: 0.0625rem solid #FF7900;
  border-radius: 0.75rem;
  background: rgba(57, 55, 108, 0.4);
  box-shadow: 0 0 0.45625rem 0.4375rem #FFC100;
}

.student-daily-chest__step--locked:not(.student-daily-chest__step--final) .student-daily-chest__step-img {
  filter: grayscale(1) brightness(0.72) drop-shadow(0 0.38rem 0.5rem rgba(0, 0, 0, 0.36));
  opacity: 0.78;
}

.student-daily-chest__step--claimed::after,
.student-daily-chest__step--locked::after {
  position: absolute;
  left: 50%;
  bottom: 0.26rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
}

.student-daily-chest__step--claimed::after {
  content: "✓";
  color: #fff;
  background: #18c55f;
  box-shadow: 0 0.16rem 0.35rem rgba(0, 0, 0, 0.28);
}

.student-daily-chest__step--locked::after {
  content: "🔒";
  color: rgba(234, 238, 255, 0.9);
  background: #545b91;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0.16rem 0.35rem rgba(0, 0, 0, 0.26);
  font-size: 0.48rem;
}

.student-daily-chest__step--current::after {
  display: none;
}

.student-daily-chest__ladder--modal {
  width: 100%;
  gap: 0.62rem;
  margin-top: 2.5rem;
}
.student-daily-chest__ladder--modal::before {
  content: "";
  position: absolute;
  left: 4.8rem;
  right: 4.8rem;
  top: 4.25rem;
  height: 0.22rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #00d3ff 0%, #ab35ff 52%, #ff38d5 100%);
  box-shadow: 0 0 0.7rem rgba(184, 54, 255, 0.62);
  opacity: 0.92;
}

.student-daily-chest__ladder--modal .student-daily-chest__step {
  min-height: 8rem;
  padding: 0.66rem 0.42rem 0.84rem;
  border-radius: 0.75rem;
}

.student-daily-chest__ladder--modal .student-daily-chest__step-num {
  min-height: 1rem;
  font-size: 0.78rem;
  text-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.34);
}
.student-daily-chest__ladder--modal .student-daily-chest__step-num::before {
  content: "День ";
}

.student-daily-chest__ladder--modal .student-daily-chest__step-icon {
  width: 4.7rem;
  height: 4.4rem;
  margin-top: 0.16rem;
}

.student-daily-chest__ladder--modal .student-daily-chest__step--final .student-daily-chest__step-icon {
  width: 5.7rem;
  height: 4.9rem;
}

.student-daily-chest__ladder--modal .student-daily-chest__step--final .student-daily-chest__step-img {
  max-width: none;
  width: 5.7rem;
}

.student-daily-chest__ladder--modal .student-daily-chest__step--claimed::after,
.student-daily-chest__ladder--modal .student-daily-chest__step--locked::after {
  bottom: 0.42rem;
  width: 0.95rem;
  height: 0.95rem;
}

.student-daily-chest__ladder--widget {
  --chest-h: clamp(1.9rem, 1.3rem + 1vw, 2.75rem);
  align-items: end;
  gap: clamp(0.22rem, 0.55vw, 0.5rem);
  min-height: 4.7rem;
  padding: 0.1rem 0 0;
}
.student-daily-chest__ladder--widget::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  top: calc(1.2rem + var(--chest-h) / 2);
  bottom: auto;
  height: 0.16rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #00d3ff 0%, #ab35ff 52%, #ff38d5 100%);
  box-shadow: 0 0 0.55rem rgba(184, 54, 255, 0.58);
  opacity: 0.9;
}

.student-daily-chest__ladder--widget .student-daily-chest__step {
  justify-content: flex-start;
  gap: 0.1rem;
  min-height: 4.7rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.student-daily-chest__ladder--widget .student-daily-chest__step-num {
  min-width: 1.1rem;
  min-height: 0.9rem;
  padding: 0.12rem 0.3rem;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.66rem;
  line-height: 0.86rem;
  text-shadow: 0 0.08rem 0.14rem rgba(0, 0, 0, 0.35);
}

.student-daily-chest__ladder--widget .student-daily-chest__step--claimed .student-daily-chest__step-num,
.student-daily-chest__ladder--widget .student-daily-chest__step--current .student-daily-chest__step-num {
  background: rgba(157, 101, 54, 0.92);
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.18), 0 0.18rem 0.34rem rgba(0, 0, 0, 0.18);
}

.student-daily-chest__ladder--widget .student-daily-chest__step--final .student-daily-chest__step-num {
  background: rgba(142, 54, 206, 0.9);
  box-shadow: inset 0 0.06rem 0 rgba(255, 255, 255, 0.18), 0 0.18rem 0.34rem rgba(0, 0, 0, 0.2);
}

.student-daily-chest__ladder--widget .student-daily-chest__step-icon {
  width: 100%;
  max-width: none;
  height: var(--chest-h);
  margin-top: -0.05rem;
}

.student-daily-chest__ladder--widget .student-daily-chest__step-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 0.34rem 0.48rem rgba(0, 0, 0, 0.36));
}

.student-daily-chest__ladder--widget .student-daily-chest__step--claimed .student-daily-chest__step-img,
.student-daily-chest__ladder--widget .student-daily-chest__step--current .student-daily-chest__step-img {
  filter: drop-shadow(0 0.34rem 0.48rem rgba(0, 0, 0, 0.36)) drop-shadow(0 0 0.48rem rgba(255, 193, 0, 0.86));
}

.student-daily-chest__ladder--widget .student-daily-chest__step--locked:not(.student-daily-chest__step--final) .student-daily-chest__step-img {
  filter: grayscale(1) brightness(0.74) drop-shadow(0 0.34rem 0.48rem rgba(0, 0, 0, 0.36));
  opacity: 0.9;
}

.student-daily-chest__ladder--widget .student-daily-chest__step--final .student-daily-chest__step-icon {
  width: 100%;
  max-width: none;
  height: calc(var(--chest-h) * 1.16);
  margin-top: -0.12rem;
}

.student-daily-chest__ladder--widget .student-daily-chest__step--final .student-daily-chest__step-img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.34rem 0.48rem rgba(0, 0, 0, 0.36)) drop-shadow(0 0 0.58rem rgba(255, 55, 227, 0.86));
}

.student-daily-chest__ladder--widget .student-daily-chest__step--claimed::after,
.student-daily-chest__ladder--widget .student-daily-chest__step--locked::after {
  display: none;
}

.student-daily-chest__balance {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 0.15rem + 0.9vw, 1.05rem);
  width: 100%;
  max-width: 100%;
  min-height: 3.7rem;
  margin-top: 0.35rem;
  padding: 0.5rem clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  border: 2px solid #C528A3;
  border-radius: 16px;
  background: #202142;
  box-shadow: inset 0 0 0 1px rgba(0, 127, 255, 0.12), 0 14px 28px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  isolation: isolate;
}
.student-daily-chest__balance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, rgba(197, 40, 163, 0.2) 0%, rgba(197, 40, 163, 0) 42%, rgba(0, 127, 255, 0.18) 100%);
  pointer-events: none;
}

.student-daily-chest__balance-bg-coin {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(3.1rem, 5.4vw, 4.45rem);
  aspect-ratio: 1.0448;
  background: url(/assets/student_dashboard/balance-coin-b9fa78f7cae5c965d8c98d5ccf1e225d194d98639a92204772edb0208ff212e3.png) center/contain no-repeat;
  opacity: 0.42;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  pointer-events: none;
  user-select: none;
}

.student-daily-chest__balance-bg-coin--right {
  right: clamp(-2.35rem, -2.6vw, -1.45rem);
  top: 50%;
  transform: translateY(-50%) rotate(12deg);
}

.student-daily-chest__balance-bg-coin--top {
  left: calc(50% + clamp(1rem, 8vw, 4.1rem));
  top: clamp(-2.2rem, -2.2vw, -1.15rem);
  transform: rotate(-10deg);
}

.student-daily-chest__balance-bg-coin--bottom {
  left: clamp(-2rem, -2.2vw, -1.2rem);
  bottom: clamp(-1.85rem, -1.9vw, -1.05rem);
  transform: rotate(-18deg);
}

.student-daily-chest__balance-label {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  min-width: 0;
  color: #fff;
  font-size: clamp(0.7rem, 0.5rem + 0.7vw, 1.15rem);
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.student-daily-chest__balance-coin {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.3rem, 0.85rem + 1.5vw, 2.45rem);
  height: clamp(1.3rem, 0.85rem + 1.5vw, 2.45rem);
  flex: 0 0 clamp(1.3rem, 0.85rem + 1.5vw, 2.45rem);
  pointer-events: none;
  user-select: none;
}

.student-daily-chest__balance-bag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.student-daily-chest__balance-value {
  position: relative;
  z-index: 2;
  flex: 0 1 auto;
  min-width: 0;
  color: #fff;
  font-weight: 900;
  font-size: clamp(0.95rem, 0.55rem + 1.35vw, 2rem);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.student-daily-chest-modal {
  z-index: 10000090;
  padding: 0.5rem;
  background: rgba(10, 8, 32, 0.72);
}
.student-daily-chest-modal.modal--animated-dashboard .modal__content.student-daily-chest-modal__dialog {
  gap: 0;
  width: min(55rem, 100vw - 1rem);
  height: min(39.5rem, 100vh - 1rem);
  max-height: calc(100vh - 1rem);
  padding: 0;
  border: 0;
  border-radius: 1.45rem;
  background: transparent;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.46);
  overflow: visible;
}
.student-daily-chest-modal .student-daily-chest-modal__dialog {
  width: min(55rem, 100vw - 1rem);
  height: min(39.5rem, 100vh - 1rem);
  max-height: calc(100vh - 1rem);
  padding: 0;
  border: 0;
  border-radius: 1.45rem;
  background: transparent;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.46);
  overflow: visible;
}
.student-daily-chest-modal .modal__body {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
}
.student-daily-chest-modal .student-daily-chest-modal__body {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 1.6rem;
  width: 100%;
  height: 100%;
  padding: 1.9rem 1.85rem 1.65rem;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 1.45rem;
  background: radial-gradient(circle at 50% 42%, rgba(255, 183, 42, 0.15), transparent 24%), radial-gradient(circle at 83% 72%, rgba(142, 45, 255, 0.12), transparent 25%), #211f4d;
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.student-daily-chest-modal .student-daily-chest-modal__paws {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/assets/student_dashboard/daily_chest_modal/paws-340b7659c842d4d92c24998614ac9433b6b765f3c74a12f26af3e4230098575a.png);
  background-size: 24rem 16rem;
  background-repeat: repeat;
  opacity: 0.23;
  pointer-events: none;
}
.student-daily-chest-modal .student-daily-chest-modal__corner-cat {
  position: absolute;
  right: -0.45rem;
  bottom: -4.5rem;
  z-index: 1;
  width: 8.3rem;
  height: 5.72rem;
  background: url(/assets/student_dashboard/daily_chest_modal/peeking-cat-3454471def90690c8f8c8023d0d496075e73ddecd760f8c68038aa6ea9400a7c.png) center/contain no-repeat;
  pointer-events: none;
}
.student-daily-chest-modal .student-daily-chest-modal__coin {
  position: absolute;
  z-index: 1;
  display: block;
  width: 2.5rem;
  aspect-ratio: 1;
  background: url(/assets/student_dashboard/coin-793c9d0cc9286c889665e5a9226902f471cce10618a67877e92bc2de7ea42fae.svg) center/contain no-repeat;
  filter: drop-shadow(0 0.45rem 0.55rem rgba(0, 0, 0, 0.38));
  pointer-events: none;
  animation: sd-chest-float 4s ease-in-out infinite;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--1 {
  left: -0.9rem;
  top: 4.35rem;
  width: 2.05rem;
  transform: rotate(-16deg);
}
.student-daily-chest-modal .student-daily-chest-modal__coin--2 {
  left: 4.95rem;
  top: 8.7rem;
  width: 3rem;
  animation-delay: 0.45s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--3 {
  left: 23.7rem;
  top: 0.75rem;
  width: 1.45rem;
  animation-delay: 0.8s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--4 {
  right: 7.9rem;
  top: 5.55rem;
  width: 1.75rem;
  animation-delay: 0.25s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--5 {
  right: -1rem;
  top: 5.05rem;
  width: 2rem;
  animation-delay: 0.9s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--6 {
  left: 1.9rem;
  top: 20.75rem;
  width: 2.1rem;
  animation-delay: 1.1s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--7 {
  right: 10.2rem;
  top: 19.35rem;
  width: 2.7rem;
  animation-delay: 0.65s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--8 {
  right: 2.05rem;
  top: 14.2rem;
  width: 1.85rem;
  animation-delay: 1.45s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--9 {
  left: 15.75rem;
  top: 9.7rem;
  width: 1.55rem;
  animation-delay: 0.15s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--10 {
  left: 13rem;
  top: 19.3rem;
  width: 1.7rem;
  animation-delay: 1.8s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--11 {
  right: 4.7rem;
  top: 0.2rem;
  width: 1.65rem;
  animation-delay: 0.55s;
}
.student-daily-chest-modal .student-daily-chest-modal__coin--12 {
  right: -0.55rem;
  top: 15.1rem;
  width: 1.35rem;
  opacity: 0.55;
  animation-delay: 2s;
}
.student-daily-chest-modal .student-daily-chest-modal__header,
.student-daily-chest-modal .student-daily-chest-modal__showcase,
.student-daily-chest-modal .student-daily-chest__ladder--modal,
.student-daily-chest-modal .student-daily-chest-modal__footer {
  position: relative;
  z-index: 2;
}
.student-daily-chest-modal .student-daily-chest-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.student-daily-chest-modal .student-daily-chest-modal__title {
  margin: 0;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(2.55rem, 5.3vw, 3.55rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-shadow: 0 0.24rem 0.08rem rgba(0, 0, 0, 0.16);
}
.student-daily-chest-modal .student-daily-chest-modal__subtitle {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.18;
}
.student-daily-chest-modal .student-daily-chest-modal__subtitle-accent {
  color: #ffea2f;
}
.student-daily-chest-modal .student-daily-chest-modal__subtitle-highlight {
  color: #ff2bbd;
}
.student-daily-chest-modal .student-daily-chest-modal__showcase {
  min-height: 15.9rem;
  pointer-events: none;
  user-select: none;
}
.student-daily-chest-modal .student-daily-chest-modal__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.student-daily-chest-modal .student-daily-chest-modal__stage-image {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  filter: drop-shadow(0 1.1rem 1.35rem rgba(0, 0, 0, 0.38));
  transition: opacity 0.22s ease, transform 0.28s ease;
}
.student-daily-chest-modal .student-daily-chest-modal__stage-image--closed {
  width: min(16.2rem, 45vw);
  opacity: 1;
  transform: translate(-50%, -47%) scale(1);
}
.student-daily-chest-modal .student-daily-chest-modal__stage-image--open {
  width: min(16.1rem, 45vw);
  transform: translate(-50%, -48%) scale(0.9);
}
.student-daily-chest-modal .student-daily-chest-modal__stage-image--burst {
  width: min(19rem, 52vw);
  transform: translate(-50%, -48%) scale(0.88);
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-opening .student-daily-chest-modal__stage-image--closed {
  animation: sd-chest-shake 0.54s ease-in-out;
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-opened .student-daily-chest-modal__stage-image--closed,
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-burst .student-daily-chest-modal__stage-image--closed,
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-revealed .student-daily-chest-modal__stage-image--closed {
  opacity: 0;
  transform: translate(-50%, -47%) scale(0.9);
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-opened .student-daily-chest-modal__stage-image--open {
  opacity: 1;
  transform: translate(-50%, -48%) scale(1);
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-burst .student-daily-chest-modal__stage-image--open,
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-revealed .student-daily-chest-modal__stage-image--open {
  opacity: 0;
  transform: translate(-50%, -48%) scale(0.94);
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-burst .student-daily-chest-modal__stage-image--burst {
  opacity: 1;
  transform: translate(-50%, -48%) scale(1);
  animation: sd-chest-pop 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-revealed .student-daily-chest-modal__stage-image--burst {
  opacity: 0;
  transform: translate(-50%, -48%) scale(1.04);
}
.student-daily-chest-modal .student-daily-chest-modal__reward-scene {
  position: absolute;
  inset: -1.15rem 0 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(0.85rem);
  transition: opacity 0.28s ease, transform 0.3s ease;
}
.student-daily-chest-modal .student-daily-chest-modal__showcase.is-revealed .student-daily-chest-modal__reward-scene {
  opacity: 1;
  transform: translateY(0);
}
.student-daily-chest-modal .student-daily-chest-modal__reward-mascot {
  position: absolute;
  bottom: -1.05rem;
  display: block;
  width: 13.5rem;
  max-width: 30vw;
  height: auto;
  filter: drop-shadow(0 1.1rem 1.35rem rgba(0, 0, 0, 0.32));
}
.student-daily-chest-modal .student-daily-chest-modal__reward-mascot--left {
  left: 0;
}
.student-daily-chest-modal .student-daily-chest-modal__reward-mascot--right {
  right: 0;
  transform: scaleX(-1);
}
.student-daily-chest-modal .student-daily-chest-modal__reward-center {
  position: absolute;
  left: 50%;
  top: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}
.student-daily-chest-modal .student-daily-chest-modal__reward-bag {
  display: block;
  width: 10.7rem;
  height: auto;
  filter: drop-shadow(0 0.75rem 1rem rgba(0, 0, 0, 0.32)) drop-shadow(0 0 1.2rem rgba(255, 191, 65, 0.25));
}
.student-daily-chest-modal .student-daily-chest-modal__reward-amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  margin-top: -0.25rem;
  color: #ffd332;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.48rem, 3.1vw, 2rem);
  font-weight: 900;
  line-height: 0.9;
  text-shadow: 0 0.16rem 0 rgba(91, 48, 0, 0.35);
}
.student-daily-chest-modal .student-daily-chest-modal__reward-word {
  color: #ffdd38;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0.14rem 0 rgba(91, 48, 0, 0.28);
}
.student-daily-chest-modal .student-daily-chest-modal__reward-label,
.student-daily-chest-modal .student-daily-chest-modal__reward-note {
  display: none;
}
.student-daily-chest-modal .student-daily-chest-modal__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 2.9rem;
}
.student-daily-chest-modal .student-daily-chest-modal__hint {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.7rem;
  min-width: 0;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.16;
  text-align: left;
}
.student-daily-chest-modal .student-daily-chest-modal__hint-text {
  background: linear-gradient(90deg, #FFF 0%, #CA008E 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.student-daily-chest-modal .student-daily-chest-modal__hint-text strong {
  color: inherit;
  font-weight: 900;
}
.student-daily-chest-modal .student-daily-chest-modal__hint-icon {
  display: block;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 2.45rem;
  object-fit: contain;
  filter: drop-shadow(0 0.35rem 0.6rem rgba(0, 0, 0, 0.22));
}
.student-daily-chest-modal .student-daily-chest-modal__streak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.42rem;
  min-width: 15rem;
  min-height: 3rem;
  padding: 0.75rem 1.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #a81694, #b2188e);
  color: #fff;
  box-shadow: 0 0.75rem 1.4rem rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}
.student-daily-chest-modal .student-daily-chest-modal__streak-label {
  font-size: 1rem;
  font-weight: 700;
}
.student-daily-chest-modal .student-daily-chest-modal__streak-value {
  font-size: 1rem;
  font-weight: 800;
}
.student-daily-chest-modal .student-daily-chest-modal__streak-fire {
  font-size: 1.28rem;
  line-height: 1;
}

@media (max-width: 820px) {
  .student-daily-chest-modal.modal--animated-dashboard .modal__content.student-daily-chest-modal__dialog {
    height: auto;
    min-height: min(39.5rem, 100vh - 0.5rem);
    max-height: calc(100vh - 0.5rem);
  }
  .student-daily-chest-modal .student-daily-chest-modal__dialog {
    height: auto;
    min-height: min(39.5rem, 100vh - 0.5rem);
    max-height: calc(100vh - 0.5rem);
  }
  .student-daily-chest-modal .student-daily-chest-modal__body {
    min-height: min(39.5rem, 100vh - 0.5rem);
    padding: 1.35rem 0.9rem 1.1rem;
    gap: 0.85rem;
  }
  .student-daily-chest-modal .student-daily-chest-modal__title {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }
  .student-daily-chest-modal .student-daily-chest-modal__subtitle {
    font-size: 0.94rem;
  }
  .student-daily-chest-modal .student-daily-chest-modal__showcase {
    min-height: 13.6rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal {
    gap: 0.3rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal::before {
    left: 2.4rem;
    right: 2.4rem;
    top: 3.4rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal .student-daily-chest__step {
    min-height: 6.4rem;
    padding: 0.48rem 0.16rem 0.72rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal .student-daily-chest__step-num {
    font-size: 0.62rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal .student-daily-chest__step-icon {
    width: 3.1rem;
    height: 3rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal .student-daily-chest__step--final .student-daily-chest__step-icon {
    width: 3.7rem;
    height: 3.35rem;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal .student-daily-chest__step--final .student-daily-chest__step-img {
    width: 3.7rem;
  }
  .student-daily-chest-modal .student-daily-chest-modal__reward-mascot {
    width: 9rem;
    opacity: 0.95;
  }
  .student-daily-chest-modal .student-daily-chest-modal__reward-bag {
    width: 8.6rem;
  }
  .student-daily-chest-modal .student-daily-chest-modal__footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.65rem;
  }
  .student-daily-chest-modal .student-daily-chest-modal__hint {
    justify-self: center;
    text-align: center;
  }
  .student-daily-chest-modal .student-daily-chest-modal__streak {
    min-width: 0;
    width: min(17rem, 100%);
  }
}
@media (max-width: 560px) {
  .student-daily-chest-modal .student-daily-chest-modal__coin--3,
  .student-daily-chest-modal .student-daily-chest-modal__coin--4,
  .student-daily-chest-modal .student-daily-chest-modal__coin--9,
  .student-daily-chest-modal .student-daily-chest-modal__coin--10 {
    display: none;
  }
  .student-daily-chest-modal .student-daily-chest__ladder--modal .student-daily-chest__step-num::before {
    content: "";
  }
  .student-daily-chest-modal .student-daily-chest-modal__reward-mascot {
    display: none;
  }
}
@media (max-width: 900px) {
  .student-dashboard__daily-chest {
    min-height: 0;
    padding: 1.35rem 1.4rem 1.4rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}
@media (max-width: 640px) {
  .student-dashboard__daily-chest {
    gap: 1.1rem;
    padding: 1.25rem 1.2rem 1.3rem;
  }
  .student-daily-chest__head {
    align-items: center;
  }
  .student-daily-chest__hero {
    width: 5.7rem;
  }
  .student-daily-chest__claim {
    min-width: 7.6rem;
    padding: 0.62rem 1.2rem;
    font-size: 0.95rem;
  }
  .student-daily-chest__step-icon {
    width: 1.5rem;
    height: 1.4rem;
  }
  .student-daily-chest__step--final .student-daily-chest__step-icon {
    width: 2rem;
    height: 1.7rem;
  }
  .student-daily-chest__step--final .student-daily-chest__step-img {
    width: 2rem;
  }
  .student-daily-chest__balance {
    min-height: 3.35rem;
    padding: 6px 9px;
    gap: clamp(0.45rem, 5vw, 1rem);
  }
  .student-daily-chest__balance-label {
    font-size: 0.92rem;
  }
  .student-daily-chest__balance-coin {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }
  .student-daily-chest__balance-value {
    font-size: clamp(0.95rem, 5vw, 1.32rem);
  }
}
@keyframes sd-chest-float {
  0%, 100% {
    margin-top: 0;
  }
  50% {
    margin-top: -0.45rem;
  }
}
@keyframes sd-chest-shake {
  0%, 100% {
    transform: translate(-50%, -47%) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(calc(-50% - 0.42rem), -47%) rotate(-5deg) scale(1);
  }
  40% {
    transform: translate(calc(-50% + 0.42rem), -47%) rotate(5deg) scale(1);
  }
  60% {
    transform: translate(calc(-50% - 0.3rem), -47%) rotate(-3deg) scale(1);
  }
  80% {
    transform: translate(calc(-50% + 0.3rem), -47%) rotate(3deg) scale(1);
  }
}
@keyframes sd-chest-pop {
  0% {
    transform: translate(-50%, -48%) scale(0.72);
  }
  58% {
    transform: translate(-50%, -48%) scale(1.08);
  }
  100% {
    transform: translate(-50%, -48%) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .student-daily-chest-modal__coin,
  .student-daily-chest-modal__showcase.is-opening .student-daily-chest-modal__stage-image--closed,
  .student-daily-chest-modal__showcase.is-burst .student-daily-chest-modal__stage-image--burst {
    animation: none;
  }
  .student-daily-chest-modal__stage-image,
  .student-daily-chest-modal__reward-scene {
    transition: none;
  }
}
.student-daily-chest__step--current.student-daily-chest__step--final {
  border: 0.0625rem solid #FF7900;
  border-radius: 0.75rem;
  background: rgba(57, 55, 108, 0.4);
  box-shadow: 0 0 0.45625rem 0.4375rem #FFC100;
}

.student-dashboard__avatar-wrap.is-framed {
  position: relative;
}

.profile__content.student-dashboard .student-dashboard__avatar-wrap.is-framed::before {
  content: none;
  border: 0;
  box-shadow: none;
}

.student-dashboard__avatar-frame {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.student-dashboard__avatar-wrap.frame-bronze .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #b87333;
  box-shadow: 0 0 0 1px rgba(184, 115, 51, 0.4), inset 0 0 0 1px rgba(255, 235, 198, 0.3);
}

.student-dashboard__avatar-wrap.frame-silver .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #c7ced8;
  box-shadow: 0 0 10px rgba(199, 206, 216, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.student-dashboard__avatar-wrap.frame-gold .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #e0a21b;
  box-shadow: 0 0 12px rgba(224, 162, 27, 0.75), inset 0 0 0 1px rgba(255, 244, 201, 0.45);
}

.student-dashboard__avatar-wrap.frame-arrows .student-dashboard__avatar-frame {
  background-image: url(/assets/cosmetics/frame-arrows-3ad629a135d3ef2eefa25393d069bf751bcda5b1f3480a032c43e26e37896257.png);
}

.student-dashboard__avatar-wrap.frame-floral .student-dashboard__avatar-frame {
  background-image: url(/assets/cosmetics/frame-floral-d49e6066162e5e56a4e721daebc38c5711a77e9cdd8efb3fb6ae3b07785c5ead.png);
}

.student-dashboard__avatar-wrap.frame-pixel .student-dashboard__avatar-frame {
  background-image: url(/assets/cosmetics/frame-pixel-01515ceac93d0a61dcc4b521efdfa50244fcd07835a610c9c049b4d7a43d3761.png);
}

.student-dashboard__avatar-wrap.frame-rainbow .student-dashboard__avatar-frame {
  background-image: url(/assets/cosmetics/frame-rainbow-8268cab980905798015e7081f59b67e570749da7068e25f85f105233cb10737e.png);
}

.student-dashboard__avatar-wrap.frame-tech .student-dashboard__avatar-frame {
  background-image: url(/assets/cosmetics/frame-tech-0b3794fa1b1260d6d8886dba6582ec180d5be3349ddf5f0eacc97f407d5789eb.png);
}

.student-dashboard__avatar-wrap.frame-water .student-dashboard__avatar-frame {
  background-image: url(/assets/cosmetics/frame-water-696e95963de7a127c2f7e80112cf788450ecdd35c2eb2dbed357e8899881c500.png);
}

.student-dashboard__avatar-wrap.frame-emerald .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #2ecc71;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.6), inset 0 0 0 1px rgba(214, 255, 232, 0.4);
}

.student-dashboard__avatar-wrap.frame-ruby .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #e0245e;
  box-shadow: 0 0 14px rgba(224, 36, 94, 0.65), inset 0 0 0 1px rgba(255, 214, 226, 0.4);
}

.student-dashboard__avatar-wrap.frame-cosmic .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #8a5bff;
  box-shadow: 0 0 0 2px rgba(53, 217, 255, 0.55), 0 0 16px rgba(176, 107, 255, 0.6), inset 0 0 0 1px rgba(255, 94, 196, 0.5);
}

.student-dashboard__avatar-wrap.frame-ice .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #7fd8ff;
  box-shadow: 0 0 12px rgba(127, 216, 255, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.student-dashboard__avatar-wrap.frame-lava .student-dashboard__avatar-frame {
  inset: -6px;
  border: 4px solid #ff6a2b;
  box-shadow: 0 0 14px rgba(255, 106, 43, 0.65), inset 0 0 8px rgba(255, 178, 62, 0.5);
  animation: sdFrameLavaPulse 2.6s ease-in-out infinite;
}

.student-dashboard__avatar-wrap.frame-galaxy .student-dashboard__avatar-frame {
  inset: -8px;
  background: conic-gradient(from 0deg, #35d9ff, #8a5bff, #ff5ec4, #ffd166, #35d9ff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 8px rgba(138, 91, 255, 0.55));
  animation: sdFrameGalaxySpin 6s linear infinite;
}

.student-dashboard__avatar-wrap.frame-royal .student-dashboard__avatar-frame {
  inset: -7px;
  border: 4px solid #7f29fa;
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.9), 0 0 16px rgba(127, 41, 250, 0.65), inset 0 0 0 1px rgba(255, 209, 102, 0.8);
}

@keyframes sdFrameLavaPulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(255, 106, 43, 0.65), inset 0 0 8px rgba(255, 178, 62, 0.5);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 106, 43, 0.85), inset 0 0 12px rgba(255, 178, 62, 0.7);
  }
}
@keyframes sdFrameGalaxySpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .student-dashboard__avatar-wrap.frame-lava .student-dashboard__avatar-frame,
  .student-dashboard__avatar-wrap.frame-galaxy .student-dashboard__avatar-frame {
    animation: none;
  }
}
.student-dashboard__name-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.35em;
  border-radius: 50%;
  vertical-align: -0.22em;
  font-size: 0.92em;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.student-dashboard__name-badge,
[class*=cosmetics-shop__preview-badge--],
[class*=cosmetics-card__preview-badge--] {
  position: relative;
  overflow: hidden;
}

.student-dashboard__name-badge::before,
[class*=cosmetics-shop__preview-badge--]::before,
[class*=cosmetics-card__preview-badge--]::before {
  content: "";
  position: absolute;
  inset: 26%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.student-dashboard__name-badge.badge-star,
.cosmetics-shop__preview-badge--badge-star,
.cosmetics-card__preview-badge--badge-star {
  background: radial-gradient(circle at 30% 28%, rgba(255, 236, 155, 0.98), rgba(255, 178, 47, 0.92));
}
.student-dashboard__name-badge.badge-star::before,
.cosmetics-shop__preview-badge--badge-star::before,
.cosmetics-card__preview-badge--badge-star::before {
  background-image: url(/assets/cosmetics/badges/star-9e90be2706e8bdbafe03e497a83911f87b3f7716b062b229a156cbd5dd4190d8.svg);
}

.student-dashboard__name-badge.badge-flame,
.cosmetics-shop__preview-badge--badge-flame,
.cosmetics-card__preview-badge--badge-flame {
  background: radial-gradient(circle at 30% 28%, rgba(255, 181, 120, 0.98), rgba(255, 79, 79, 0.92));
}
.student-dashboard__name-badge.badge-flame::before,
.cosmetics-shop__preview-badge--badge-flame::before,
.cosmetics-card__preview-badge--badge-flame::before {
  background-image: url(/assets/cosmetics/badges/flame-272a61b41bb5e3150f31dc04d5c0d77f449c886746b275ce6c0513ffa6853ef9.svg);
}

.student-dashboard__name-badge.badge-crown,
.cosmetics-shop__preview-badge--badge-crown,
.cosmetics-card__preview-badge--badge-crown {
  background: radial-gradient(circle at 30% 28%, rgba(255, 226, 138, 0.98), rgba(214, 138, 18, 0.92));
}
.student-dashboard__name-badge.badge-crown::before,
.cosmetics-shop__preview-badge--badge-crown::before,
.cosmetics-card__preview-badge--badge-crown::before {
  background-image: url(/assets/cosmetics/badges/crown-c93b4de7be6e3544dbe39d0d7d944df9b4a3093a7c253dc81f79725dd23485d6.svg);
}

.student-dashboard__name-badge.badge-bolt,
.cosmetics-shop__preview-badge--badge-bolt,
.cosmetics-card__preview-badge--badge-bolt {
  background: radial-gradient(circle at 30% 28%, rgba(140, 224, 255, 0.98), rgba(0, 138, 224, 0.92));
}
.student-dashboard__name-badge.badge-bolt::before,
.cosmetics-shop__preview-badge--badge-bolt::before,
.cosmetics-card__preview-badge--badge-bolt::before {
  background-image: url(/assets/cosmetics/badges/bolt-86fac6b15d4d4e5f92c2a2743593561836bd4960ee033a0a8e7ddf5abebfecc7.svg);
}

.student-dashboard__name-badge.badge-heart,
.cosmetics-shop__preview-badge--badge-heart,
.cosmetics-card__preview-badge--badge-heart {
  background: radial-gradient(circle at 30% 28%, rgba(255, 168, 198, 0.98), rgba(235, 60, 114, 0.92));
}
.student-dashboard__name-badge.badge-heart::before,
.cosmetics-shop__preview-badge--badge-heart::before,
.cosmetics-card__preview-badge--badge-heart::before {
  background-image: url(/assets/cosmetics/badges/heart-aa3d9e3c6440c02d8a7dcce4bc05d348dcec50d6bbab899ba15a75fd7adf7e1f.svg);
}

.student-dashboard__name-badge.badge-rocket,
.cosmetics-shop__preview-badge--badge-rocket,
.cosmetics-card__preview-badge--badge-rocket {
  background: radial-gradient(circle at 30% 28%, rgba(178, 198, 255, 0.98), rgba(99, 76, 224, 0.92));
}
.student-dashboard__name-badge.badge-rocket::before,
.cosmetics-shop__preview-badge--badge-rocket::before,
.cosmetics-card__preview-badge--badge-rocket::before {
  background-image: url(/assets/cosmetics/badges/rocket-354a46fa226f88686de4a6f3d27483204164682cda047f5017954cd254c7821f.svg);
}

.student-dashboard__name-badge.badge-gem,
.cosmetics-shop__preview-badge--badge-gem,
.cosmetics-card__preview-badge--badge-gem {
  background: radial-gradient(circle at 30% 28%, rgba(126, 255, 234, 0.98), rgba(22, 200, 168, 0.92));
}
.student-dashboard__name-badge.badge-gem::before,
.cosmetics-shop__preview-badge--badge-gem::before,
.cosmetics-card__preview-badge--badge-gem::before {
  background-image: url(/assets/cosmetics/badges/gem-a308f6fd975e3e6f5ed8c2cb32a82f554fbddd9375c5d94582c74d3a5684f854.svg);
}

.student-dashboard__name-badge.badge-moon,
.cosmetics-shop__preview-badge--badge-moon,
.cosmetics-card__preview-badge--badge-moon {
  background: radial-gradient(circle at 30% 28%, rgba(230, 235, 255, 0.98), rgba(122, 138, 224, 0.92));
}
.student-dashboard__name-badge.badge-moon::before,
.cosmetics-shop__preview-badge--badge-moon::before,
.cosmetics-card__preview-badge--badge-moon::before {
  background-image: url(/assets/cosmetics/badges/moon-9f984f61ec180607d36246adc38d3c09bdd34692be54cf6449320c902878c28e.svg);
}

.student-dashboard__name-badge.badge-planet,
.cosmetics-shop__preview-badge--badge-planet,
.cosmetics-card__preview-badge--badge-planet {
  background: radial-gradient(circle at 30% 28%, rgba(191, 226, 255, 0.98), rgba(64, 120, 230, 0.92));
}
.student-dashboard__name-badge.badge-planet::before,
.cosmetics-shop__preview-badge--badge-planet::before,
.cosmetics-card__preview-badge--badge-planet::before {
  background-image: url(/assets/cosmetics/badges/planet-bfe7bd756cf3320c7fca89a388bb34d0e5aed60ad5c4d1fd796654a66f945e2d.svg);
}

.student-dashboard__name-badge.badge-shield,
.cosmetics-shop__preview-badge--badge-shield,
.cosmetics-card__preview-badge--badge-shield {
  background: radial-gradient(circle at 30% 28%, rgba(190, 255, 219, 0.98), rgba(23, 160, 112, 0.92));
}
.student-dashboard__name-badge.badge-shield::before,
.cosmetics-shop__preview-badge--badge-shield::before,
.cosmetics-card__preview-badge--badge-shield::before {
  background-image: url(/assets/cosmetics/badges/shield-5c7d337dcc3622537026e65b42516c2175d9e38267c611d5769930c0564b2b39.svg);
}

.student-dashboard__name-badge.badge-gamepad,
.cosmetics-shop__preview-badge--badge-gamepad,
.cosmetics-card__preview-badge--badge-gamepad {
  background: radial-gradient(circle at 30% 28%, rgba(255, 205, 156, 0.98), rgba(238, 106, 68, 0.92));
}
.student-dashboard__name-badge.badge-gamepad::before,
.cosmetics-shop__preview-badge--badge-gamepad::before,
.cosmetics-card__preview-badge--badge-gamepad::before {
  background-image: url(/assets/cosmetics/badges/gamepad-a4aa1807b5368fd4bf744660f9b6c5cdbda7337a4a588284ee94478cb9dbdacf.svg);
}

.student-dashboard__name-badge.badge-ghost,
.cosmetics-shop__preview-badge--badge-ghost,
.cosmetics-card__preview-badge--badge-ghost {
  background: radial-gradient(circle at 30% 28%, rgba(232, 220, 255, 0.98), rgba(133, 91, 236, 0.92));
}
.student-dashboard__name-badge.badge-ghost::before,
.cosmetics-shop__preview-badge--badge-ghost::before,
.cosmetics-card__preview-badge--badge-ghost::before {
  background-image: url(/assets/cosmetics/badges/ghost-e4ecf000d2e09a8eda4910487329814d7a6c614ff1d873c81de4948b9d1ca15e.svg);
}

.student-dashboard__profile.theme-dark .student-dashboard__user-name {
  color: #d5e4ff;
  text-shadow: 0 0 14px rgba(110, 168, 254, 0.35);
}

.student-dashboard__profile.theme-neon .student-dashboard__user-name {
  color: #7affd9;
  text-shadow: 0 0 14px rgba(22, 240, 200, 0.5);
}

.student-dashboard__profile.theme-aqua .student-dashboard__user-name {
  color: #8fe9ff;
  text-shadow: 0 0 14px rgba(53, 217, 255, 0.45);
}

.student-dashboard__profile.theme-gold .student-dashboard__user-name {
  background: linear-gradient(92deg, #fff1c2 0%, #ffcf52 45%, #e0a21b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(224, 162, 27, 0.4));
}

.student-dashboard__profile.theme-fire .student-dashboard__user-name {
  background: linear-gradient(92deg, #ffd56b 0%, #ff7a3d 50%, #ff3d57 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 80, 80, 0.42));
}

.student-dashboard__profile.theme-rainbow .student-dashboard__user-name {
  background: linear-gradient(92deg, #ff5ec4 0%, #ffd23d 30%, #5effa6 55%, #35d9ff 78%, #b06bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(176, 107, 255, 0.4));
}

.student-dashboard__profile.theme-ice .student-dashboard__user-name {
  background: linear-gradient(92deg, #eafcff 0%, #9fe8ff 55%, #4db8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(77, 184, 255, 0.4));
}

.student-dashboard__profile.theme-candy .student-dashboard__user-name {
  background: linear-gradient(92deg, #ffc6e0 0%, #ff8fb8 45%, #ffb36b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 143, 184, 0.4));
}

.student-dashboard__profile.theme-emerald .student-dashboard__user-name {
  background: linear-gradient(92deg, #d7ffe9 0%, #5be584 50%, #12a35a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(43, 201, 110, 0.4));
}

.student-dashboard__profile.theme-galaxy .student-dashboard__user-name {
  background: linear-gradient(92deg, #8fd3ff 0%, #8a5bff 40%, #ff5ec4 75%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(138, 91, 255, 0.42));
}

.student-dashboard__profile.theme-royal .student-dashboard__user-name {
  background: linear-gradient(92deg, #e8c8ff 0%, #a55bff 45%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(165, 91, 255, 0.45));
}

turbo-frame#dashboard_teaching_analytics {
  display: contents;
}

#parent_dashboard {
  display: contents;
}

turbo-frame#child_course_state {
  display: contents;
}

@keyframes klp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes klp-shimmer {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}
@keyframes klp-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
@keyframes klp-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.85;
  }
}
.profile__content.role-dashboard.klp-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.profile__content.role-dashboard.klp {
  font-family: "Onest", system-ui, sans-serif;
  color: #F2F4FF;
}
.profile__content.role-dashboard.klp > * {
  animation: klp-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.profile__content.role-dashboard.klp > *:nth-child(1) {
  animation-delay: 0s;
}
.profile__content.role-dashboard.klp > *:nth-child(2) {
  animation-delay: 0.06s;
}
.profile__content.role-dashboard.klp > *:nth-child(3) {
  animation-delay: 0.12s;
}
.profile__content.role-dashboard.klp > *:nth-child(4) {
  animation-delay: 0.18s;
}
.profile__content.role-dashboard.klp > *:nth-child(5) {
  animation-delay: 0.24s;
}
.profile__content.role-dashboard.klp > *:nth-child(6) {
  animation-delay: 0.3s;
}
.profile__content.role-dashboard.klp > *:nth-child(7) {
  animation-delay: 0.36s;
}
.profile__content.role-dashboard.klp > *:nth-child(8) {
  animation-delay: 0.42s;
}
.profile__content.role-dashboard.klp > .profile__block {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 1.5rem;
  padding: 1.25rem 1.5rem;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}

.klp-span-3 {
  grid-column: span 3;
}

.klp-span-4 {
  grid-column: span 4;
}

.klp-span-5 {
  grid-column: span 5;
}

.klp-span-8 {
  grid-column: span 8;
}

.klp-rows-2 {
  grid-row: span 2;
}

.klp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(19, 22, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  padding: 18px 20px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 0.25s ease;
}
.klp-card:hover {
  border-color: rgba(93, 139, 255, 0.4);
}

.klp-card--accent {
  background: linear-gradient(165deg, rgba(41, 38, 88, 0.85), rgba(16, 17, 34, 0.92));
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.2);
}

.klp-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(199, 206, 235, 0.45);
}

.klp-label--on-accent {
  color: rgba(42, 16, 0, 0.75);
}

.klp-empty {
  margin: 0.5rem 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(199, 206, 235, 0.55);
}

.klp-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
}

.klp-card__title {
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #F2F4FF;
}

.klp-card__spacer {
  flex: 1;
}

.klp-card__head-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: #B7EF52;
}

.klp-card__head-icon--blue {
  color: #7FC4FF;
}

.klp-card__head-icon--purple {
  color: #C9B2FF;
}

.klp-card__head-icon--green {
  color: #7FF5C2;
}

.klp-card__all {
  margin-left: auto;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #FF8A2A;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}
.klp-card__all:hover {
  color: #FFB067;
}
.klp-card__all:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
  border-radius: 6px;
}

.klp-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.klp-chip--purple {
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.45);
  color: #C9B2FF;
}

.klp-chip--blue {
  background: rgba(46, 139, 255, 0.12);
  border: 1px solid rgba(46, 139, 255, 0.4);
  color: #9CC7FF;
}

.klp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 15px;
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.klp-btn:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-btn__icon {
  width: 16px;
  height: 16px;
}

.klp-btn--cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  color: #2A1000;
  box-shadow: 0 12px 30px rgba(255, 106, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.klp-btn--cta:hover {
  transform: translateY(-2px);
  color: #2A1000;
}
.klp-btn--cta:active {
  transform: translateY(0);
}

.klp-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F2F4FF;
}
.klp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #F2F4FF;
}

.klp-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.4) 50%, transparent 66%);
  background-size: 230% 100%;
  animation: klp-shimmer 3.4s linear infinite;
  pointer-events: none;
}

.klp-hero {
  overflow: hidden;
}

.klp-hero__glow {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
  pointer-events: none;
}

.klp-hero__chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.klp-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 7px;
  border-radius: 14px;
  background: rgba(9, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.klp-hero__chip:hover {
  border-color: rgba(226, 63, 160, 0.5);
}
.klp-hero__chip:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-hero__chip--active {
  background: linear-gradient(120deg, #E23FA0, #FF5A7E);
  border: 0;
  box-shadow: 0 8px 20px rgba(226, 63, 130, 0.4);
  cursor: default;
}
.klp-hero__chip--active .klp-hero__chip-name {
  color: #FFF6EE;
  font-family: "Unbounded", system-ui, sans-serif;
  font-size: 10px;
}

.klp-hero__chip-badge {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFF6EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 8px;
  color: #B01D63;
}

.klp-hero__chip-badge--muted {
  background: rgba(255, 255, 255, 0.1);
  color: #F2F4FF;
}

.klp-hero__chip-name {
  font-weight: 700;
  font-size: 10.5px;
  color: rgba(214, 221, 245, 0.8);
}

.klp-hero__chip-add {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(199, 206, 235, 0.6);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.klp-hero__chip-add:hover {
  border-color: rgba(46, 139, 255, 0.6);
  color: #7FC4FF;
}
.klp-hero__chip-add:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-hero__chip-add-icon {
  width: 16px;
  height: 16px;
}

.klp-hero__main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0 14px;
  text-align: center;
}

.avatar.klp-hero__avatar,
.klp-hero__avatar {
  width: 128px;
  height: 128px;
  border-radius: 36px;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(93, 139, 255, 0.55), 0 24px 50px rgba(46, 110, 255, 0.4);
  animation: klp-float 6s ease-in-out infinite;
  margin-bottom: 16px;
}

.klp-hero__name {
  margin: 0 0 4px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #F2F4FF;
}

.klp-hero__mail {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(199, 206, 235, 0.55);
  word-break: break-word;
}

.klp-hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.klp-hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.klp-hero__stat {
  text-align: center;
  padding: 12px 8px;
  border-radius: 15px;
  background: rgba(9, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.klp-hero__stat-value {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
}

.klp-hero__stat-value--green {
  color: #B7EF52;
  text-shadow: 0 0 22px rgba(163, 230, 53, 0.5);
}

.klp-hero__stat-value--blue {
  color: #7FC4FF;
  text-shadow: 0 0 22px rgba(79, 195, 247, 0.5);
}

.klp-hero__stat-label {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(199, 206, 235, 0.5);
}

.klp-perf__badge {
  margin-left: auto;
  padding: 6px 13px;
  border-radius: 14px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  white-space: nowrap;
}

.klp-perf__svg {
  display: block;
  width: 100%;
  height: 60px;
}

.klp-perf__glow {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(5px);
}

.klp-perf__line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.klp-perf__note {
  margin: 8px 0 0;
  min-height: 38px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(214, 221, 245, 0.7);
}

.klp-perf--excellent:hover {
  border-color: rgba(140, 215, 34, 0.4);
}
.klp-perf--excellent .klp-card__head-icon {
  color: #8CD722;
}
.klp-perf--excellent .klp-perf__badge {
  background: linear-gradient(120deg, #C8F169, #8CD722);
  box-shadow: 0 8px 20px rgba(140, 215, 34, 0.4);
  color: #1D3003;
}
.klp-perf--excellent .klp-perf__glow {
  stroke: rgba(163, 230, 53, 0.35);
}
.klp-perf--excellent .klp-perf__line {
  stroke: #A3E635;
}
.klp-perf--excellent .klp-perf__dot {
  fill: #C8F169;
}

.klp-perf--good:hover {
  border-color: rgba(46, 139, 255, 0.4);
}
.klp-perf--good .klp-card__head-icon {
  color: #7FC4FF;
}
.klp-perf--good .klp-perf__badge {
  background: linear-gradient(120deg, #9CC7FF, #2E8BFF);
  box-shadow: 0 8px 20px rgba(46, 139, 255, 0.4);
  color: #04213F;
}
.klp-perf--good .klp-perf__glow {
  stroke: rgba(79, 168, 255, 0.35);
}
.klp-perf--good .klp-perf__line {
  stroke: #4FA8FF;
}
.klp-perf--good .klp-perf__dot {
  fill: #9CC7FF;
}

.klp-perf--attention:hover {
  border-color: rgba(255, 197, 61, 0.4);
}
.klp-perf--attention .klp-card__head-icon {
  color: #FFC53D;
}
.klp-perf--attention .klp-perf__badge {
  background: linear-gradient(120deg, #FFD66B, #FFA928);
  box-shadow: 0 8px 20px rgba(255, 169, 40, 0.4);
  color: #3A2400;
}
.klp-perf--attention .klp-perf__glow {
  stroke: rgba(255, 197, 61, 0.35);
}
.klp-perf--attention .klp-perf__line {
  stroke: #FFC53D;
}
.klp-perf--attention .klp-perf__dot {
  fill: #FFD66B;
}

.klp-perf--low:hover {
  border-color: rgba(255, 90, 126, 0.4);
}
.klp-perf--low .klp-card__head-icon {
  color: #FF5A7E;
}
.klp-perf--low .klp-perf__badge {
  background: linear-gradient(120deg, #FF8FAB, #E23F6E);
  box-shadow: 0 8px 20px rgba(226, 63, 110, 0.4);
  color: #3B0416;
}
.klp-perf--low .klp-perf__glow {
  stroke: rgba(255, 90, 126, 0.35);
}
.klp-perf--low .klp-perf__line {
  stroke: #FF5A7E;
}
.klp-perf--low .klp-perf__dot {
  fill: #FF8FAB;
}

.klp-next {
  overflow: hidden;
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  border: 0;
  box-shadow: 0 20px 50px rgba(255, 106, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.klp-next::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.3) 50%, transparent 64%);
  background-size: 240% 100%;
  animation: klp-shimmer 4.2s linear infinite;
  pointer-events: none;
}
.klp-next:hover {
  border-color: transparent;
}
.klp-next > * {
  position: relative;
}

.klp-next__head-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: #FFF6EE;
}

.klp-next__duration {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 11px;
  background: rgba(26, 13, 2, 0.25);
  font-size: 9.5px;
  font-weight: 800;
  color: #FFF6EE;
  white-space: nowrap;
}

.klp-next__duration-icon {
  width: 11px;
  height: 11px;
}

.klp-next__date {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #2A1000;
  margin-bottom: 2px;
}

.klp-next__time {
  margin-left: 8px;
  color: #FFF6EE;
}

.klp-next__lesson {
  font-weight: 800;
  font-size: 13px;
  color: #2A1000;
  margin-bottom: 3px;
}

.klp-next__course {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(42, 16, 0, 0.7);
  margin-bottom: 12px;
}

.klp-next__empty {
  flex: 1;
  margin: 4px 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(42, 16, 0, 0.75);
}

.klp-next__cta {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 13px;
  background: #241004;
  color: #FFB067;
  box-shadow: 0 10px 26px rgba(36, 16, 4, 0.45);
  font-family: "Onest", system-ui, sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.klp-next__cta:hover {
  transform: translateY(-2px);
  color: #FFB067;
}
.klp-next__cta:focus-visible {
  outline: 2px solid rgba(36, 16, 4, 0.8);
  outline-offset: 2px;
}

.klp-next__cta-icon {
  width: 15px;
  height: 15px;
}

.klp-attendance__legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(214, 221, 245, 0.75);
}
.klp-attendance__legend + .klp-attendance__legend {
  margin-left: 10px;
}

.klp-attendance__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.klp-attendance__legend-dot--visited {
  background: #8CD722;
  box-shadow: 0 0 8px rgba(140, 215, 34, 0.8);
}

.klp-attendance__legend-dot--missed {
  background: #C24565;
  box-shadow: 0 0 8px rgba(194, 69, 101, 0.8);
}

.klp-attendance__legend-dot--excused {
  background: #FFC53D;
  box-shadow: 0 0 8px rgba(255, 197, 61, 0.8);
}

.klp-attendance__hint {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
}

.klp-attendance__grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 6px;
}

.klp-attendance__grid--page {
  gap: 9px;
}

.klp-attendance__cell {
  aspect-ratio: 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  cursor: default;
  transition: transform 0.15s ease;
}
.klp-attendance__cell:hover {
  transform: scale(1.12);
}

.klp-attendance__grid--page .klp-attendance__cell {
  border-radius: 13px;
  font-size: 13px;
}

.klp-attendance__cell--visited {
  background: linear-gradient(160deg, #B7EF52, #6FCB1F);
  border: 1px solid rgba(183, 239, 82, 0.55);
  box-shadow: 0 5px 14px rgba(140, 220, 50, 0.3);
  color: #1D3003;
}

.klp-attendance__cell--missed {
  background: linear-gradient(160deg, #C24565, #93264B);
  border: 1px solid rgba(255, 120, 150, 0.45);
  box-shadow: 0 5px 14px rgba(190, 50, 90, 0.3);
  color: #FFE3EC;
}

.klp-attendance__cell--current {
  background: linear-gradient(160deg, #B7EF52, #6FCB1F);
  border: 2px solid #4FC3F7;
  box-shadow: 0 0 0 4px rgba(79, 195, 247, 0.22), 0 6px 16px rgba(140, 220, 50, 0.4);
  color: #1D3003;
}

.klp-attendance__cell--none {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(214, 221, 245, 0.5);
}

.klp-attendance__cell--excused {
  background: linear-gradient(160deg, #FFD66B, #FFA928);
  border: 1px solid rgba(255, 197, 61, 0.55);
  box-shadow: 0 5px 14px rgba(255, 169, 40, 0.3);
  color: #3A2400;
}

a.klp-attendance__cell {
  text-decoration: none;
  cursor: pointer;
}
a.klp-attendance__cell:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-courses:hover {
  border-color: rgba(46, 139, 255, 0.4);
}

.klp-courses__list {
  display: flex;
  flex-direction: column;
}

.klp-courses__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  transition: background 0.2s ease;
}
.klp-courses__row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.klp-courses__ring {
  flex: none;
  width: 42px;
  height: 42px;
}

.klp-courses__ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 6;
}

.klp-courses__ring-bar {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

.klp-courses__ring-value {
  font: 700 10px "Unbounded", system-ui, sans-serif;
  fill: #F2F4FF;
}

.klp-courses__main {
  flex: 1;
  min-width: 0;
}

.klp-courses__title {
  margin: 0 0 3px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #F2F4FF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klp-courses__meta {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
}

.klp-courses__go {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2E8BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.klp-courses__go:hover {
  transform: scale(1.1);
}
.klp-courses__go:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-courses__go-icon {
  width: 14px;
  height: 14px;
  color: #fff;
}

.klp-courses__empty-btn {
  align-self: flex-start;
  margin-top: 10px;
  padding: 9px 16px;
  font-size: 12.5px;
}

.klp-awards:hover {
  border-color: rgba(139, 92, 246, 0.4);
}

.klp-awards__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.klp-awards__item {
  width: 52px;
  height: 55px;
  border-radius: 13px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(120, 60, 200, 0.35);
  transition: transform 0.2s ease;
}
.klp-awards__item:hover {
  transform: translateY(-4px) scale(1.08);
}

.klp-awards__item--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.18);
  color: #C9B2FF;
  font-size: 20px;
}

.klp-awards__hint {
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.5);
}

.klp-activity__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.klp-activity__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.klp-activity__icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.klp-activity__icon-svg {
  width: 13px;
  height: 13px;
}

.klp-activity__icon--homework {
  background: rgba(140, 215, 34, 0.14);
  border: 1px solid rgba(140, 215, 34, 0.45);
  color: #B7EF52;
}

.klp-activity__icon--lesson {
  background: rgba(46, 139, 255, 0.14);
  border: 1px solid rgba(46, 139, 255, 0.45);
  color: #9CC7FF;
}

.klp-activity__icon--achievement {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #C9B2FF;
}

.klp-activity__icon--missed {
  background: rgba(194, 69, 101, 0.15);
  border: 1px solid rgba(194, 69, 101, 0.5);
  color: #FF9DB1;
}

.klp-activity__main {
  min-width: 0;
}

.klp-activity__text {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #F2F4FF;
}

.klp-activity__time {
  margin: 1px 0 0;
  font-size: 10px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.45);
}

.klp-projects:hover {
  border-color: rgba(61, 220, 151, 0.4);
}

.klp-projects__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.klp-projects__card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px;
  border-radius: 15px;
  background: rgba(9, 10, 18, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  min-width: 0;
  transition: border-color 0.2s ease;
}
.klp-projects__card:hover {
  border-color: rgba(46, 139, 255, 0.45);
}
.klp-projects__card:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-projects__img {
  flex: none;
  width: 96px;
  height: 66px;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.klp-projects__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(199, 206, 235, 0.4);
}

.klp-projects__img-icon {
  width: 22px;
  height: 22px;
}

.klp-projects__main {
  min-width: 0;
}

.klp-projects__title {
  margin: 0 0 6px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: #F2F4FF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klp-projects__stats {
  display: flex;
  gap: 5px;
}

.klp-projects__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 800;
}

.klp-projects__stat-icon {
  width: 11px;
  height: 11px;
}

.klp-projects__stat--likes {
  background: rgba(255, 59, 92, 0.13);
  color: #FF9DB1;
}

.klp-projects__stat--views {
  background: rgba(255, 166, 0, 0.12);
  color: #FFC46B;
}

.klp-projects__stat--runs {
  background: rgba(61, 220, 151, 0.12);
  color: #7FF5C2;
}

.klp-chat {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, rgba(226, 63, 130, 0.18), rgba(19, 22, 38, 0.72) 60%);
  border-color: rgba(255, 90, 126, 0.35);
  cursor: pointer;
}
.klp-chat:hover {
  border-color: rgba(255, 90, 126, 0.55);
}
.klp-chat:hover .klp-chat__link {
  color: #fff;
}

.klp-chat__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(135deg, #FF5A7E, #E23FA0);
  box-shadow: 0 12px 28px rgba(226, 63, 130, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: klp-pulse 3s ease-in-out infinite;
}

.klp-chat__icon-svg {
  width: 21px;
  height: 21px;
  color: #fff;
}

.klp-chat__main {
  min-width: 0;
}

.klp-chat__title {
  margin: 0 0 6px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.35;
  color: #F2F4FF;
}

.klp-chat__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7FC4FF;
  text-decoration: none;
  transition: color 0.2s ease;
}
.klp-chat__link::before {
  content: "";
  position: absolute;
  inset: 0;
}
.klp-chat__link:hover {
  color: #fff;
}
.klp-chat__link:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
  border-radius: 6px;
}

.klp-chat__link-icon {
  width: 14px;
  height: 14px;
}

.klp-balance__hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
}

.klp-balance__pill {
  align-self: flex-start;
  padding: 9px 18px;
  border-radius: 14px;
  background: rgba(9, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #B7EF52;
  text-shadow: 0 0 22px rgba(163, 230, 53, 0.4);
}

.klp-enroll {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.klp-enroll:hover {
  border-color: rgba(255, 138, 42, 0.4);
}

.klp-enroll__main {
  flex: 1;
  min-width: 0;
}

.klp-enroll__title {
  margin: 0 0 5px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #F2F4FF;
}

.klp-enroll__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(199, 206, 235, 0.7);
}

.klp-enroll .klp-btn {
  flex: none;
}

.klp-welcome {
  align-items: center;
  text-align: center;
  padding: 44px 28px;
  gap: 4px;
}

.klp-welcome__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  color: #FFB067;
}

.klp-welcome__icon-svg {
  width: 100%;
  height: 100%;
}

.klp-welcome__eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF8A2A;
}

.klp-welcome__title {
  margin: 0 0 8px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #F2F4FF;
}

.klp-welcome__text {
  margin: 0;
  max-width: 460px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(199, 206, 235, 0.7);
}

.klp-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.klp-page-head {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 20px 24px;
  box-shadow: 0 20px 50px rgba(4, 5, 12, 0.45);
}

.klp-page-head__titles {
  min-width: 0;
}

.klp-page-head__title {
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: #F2F4FF;
}

.klp-page-head__subtitle {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(199, 206, 235, 0.6);
}

.klp-page-head__back {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E5EAFF;
  transition: background 0.2s ease;
}
.klp-page-head__back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #E5EAFF;
}
.klp-page-head__back:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-page-head__back-icon {
  width: 20px;
  height: 20px;
}

.klp-course__child-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 8px;
  border-radius: 17px;
  background: linear-gradient(120deg, #E23FA0, #FF5A7E);
  box-shadow: 0 10px 24px rgba(226, 63, 130, 0.4);
}

.klp-course__child-badge {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFF6EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  color: #B01D63;
}

.klp-course__child-name {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: #FFF6EE;
}

.klp-course-hero {
  flex-direction: row;
  align-items: center;
  gap: 28px;
  border-radius: 26px;
  padding: 22px 28px;
  box-shadow: 0 24px 60px rgba(4, 5, 12, 0.5);
  background: linear-gradient(165deg, rgba(41, 38, 88, 0.85), rgba(16, 17, 34, 0.92));
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.2);
}

.avatar.klp-course-hero__avatar,
.klp-course-hero__avatar {
  flex: none;
  width: 86px;
  height: 86px;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 0 0 2.5px rgba(93, 139, 255, 0.55), 0 14px 34px rgba(46, 110, 255, 0.35);
  animation: klp-float 6s ease-in-out infinite;
}

.klp-course-hero__metrics {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.klp-course-hero__metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.klp-course-hero__metric-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.7);
}

.klp-course-hero__metric-value {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #F2F4FF;
}

.klp-course-hero__metric-value--green {
  color: #B7EF52;
  text-shadow: 0 0 30px rgba(163, 230, 53, 0.5);
}

.klp-course-hero__metric-total {
  color: rgba(199, 206, 235, 0.4);
}

.klp-course-hero__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.klp-course-hero__ring {
  width: 62px;
  height: 62px;
}

.klp-course-hero__ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 6;
}

.klp-course-hero__ring-bar {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(79, 195, 247, 0.6));
}

.klp-course-hero__ring-value {
  font: 700 12px "Unbounded", system-ui, sans-serif;
  fill: #F2F4FF;
}

.klp-course-attendance {
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border-color: rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 22px 26px;
}

.klp-course-lesson {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(79, 195, 247, 0.35);
  border-radius: 24px;
  padding: 22px 28px;
  box-shadow: 0 0 40px rgba(79, 195, 247, 0.08);
}
.klp-course-lesson:hover {
  border-color: rgba(79, 195, 247, 0.55);
}

.klp-course-lesson__info {
  flex: 1.4;
  min-width: 0;
}

.klp-course-lesson__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

.klp-course-lesson__number {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: #F2F4FF;
}

.klp-course-lesson__name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(229, 234, 255, 0.85);
}

.klp-course-lesson__badge {
  padding: 6px 14px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 11.5px;
}

.klp-course-lesson__badge--visited {
  background: linear-gradient(120deg, #C8F169, #8CD722);
  box-shadow: 0 8px 20px rgba(140, 215, 34, 0.4);
  color: #1D3003;
}

.klp-course-lesson__badge--missed {
  background: linear-gradient(120deg, #FF8FAB, #E23F6E);
  box-shadow: 0 8px 20px rgba(226, 63, 110, 0.4);
  color: #3B0416;
}

.klp-course-lesson__badge--upcoming {
  background: rgba(46, 139, 255, 0.13);
  border: 1px solid rgba(46, 139, 255, 0.45);
  color: #9CC7FF;
}

.klp-course-lesson__reason {
  padding: 5px 12px;
  border-radius: 13px;
  font-size: 10.5px;
  font-weight: 700;
}

.klp-course-lesson__reason--excused {
  background: rgba(255, 197, 61, 0.14);
  border: 1px solid rgba(255, 197, 61, 0.5);
  color: #FFD66B;
}

.klp-course-lesson__reason--unexcused {
  background: rgba(255, 90, 126, 0.12);
  border: 1px solid rgba(255, 90, 126, 0.45);
  color: #FF9DB1;
}

.klp-course-lesson__absence-link {
  font-size: 12.5px;
  font-weight: 700;
  color: #FF8A2A;
  text-decoration: none;
  border-bottom: 1.5px dashed rgba(255, 138, 42, 0.5);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.klp-course-lesson__absence-link:hover {
  color: #FFB067;
}
.klp-course-lesson__absence-link:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-course-lesson__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.klp-course-lesson__date {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #FFB067;
}

.klp-course-lesson__task {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(229, 234, 255, 0.9);
}

.klp-course-lesson__task-icon {
  width: 18px;
  height: 18px;
}

.klp-course-lesson__task-icon--done {
  color: #3DDC97;
  filter: drop-shadow(0 0 6px rgba(61, 220, 151, 0.7));
}

.klp-course-lesson__task-icon--undone {
  color: #FF9DB1;
}

.klp-course-lesson__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
  margin: 0 26px;
}

.klp-course-lesson__teacher {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.klp-course-lesson__teacher-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(93, 139, 255, 0.4);
}

.klp-course-lesson__teacher-main {
  flex: 1;
  min-width: 0;
}

.klp-course-lesson__teacher-name {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 15.5px;
  color: #F2F4FF;
}

.klp-course-lesson__teacher-desc {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(199, 206, 235, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klp-course-lesson__teacher-chat {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(46, 139, 255, 0.5);
  background: rgba(46, 139, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #BDD8FF;
  transition: background 0.2s ease;
}
.klp-course-lesson__teacher-chat:hover {
  background: #2E8BFF;
  color: #fff;
}
.klp-course-lesson__teacher-chat:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-course-lesson__teacher-chat-icon {
  width: 18px;
  height: 18px;
}

.klp-modal .modal__header-row {
  display: flex;
  align-items: center;
  gap: 11px;
}
.klp-modal .modal__header-row-left {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 auto;
  min-width: 0;
}
.klp-modal .modal__title {
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.klp-modal__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.klp-modal__icon--schedule {
  background: linear-gradient(120deg, #FFA13D, #FF6A00);
  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.4);
  color: #2A1000;
}

.klp-modal__icon--awards {
  background: linear-gradient(120deg, #A78BFA, #7C3AED);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
  color: #F3EDFF;
}

.klp-modal__icon--absence {
  background: linear-gradient(135deg, #FF5A7E, #E23FA0);
  box-shadow: 0 8px 22px rgba(226, 63, 130, 0.4);
  color: #FFF6EE;
}

.klp-modal__icon-svg {
  width: 19px;
  height: 19px;
}

.klp-modal__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.klp-modal__subtitle {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.5);
}

.klp-modal__schedule {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.klp-modal__lesson {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: border-color 0.2s ease;
}
.klp-modal__lesson:hover {
  border-color: rgba(255, 138, 42, 0.5);
}

.klp-modal__lesson--next {
  background: rgba(255, 138, 42, 0.09);
  border-color: rgba(255, 138, 42, 0.4);
}

.klp-modal__lesson-date {
  flex: none;
  width: 46px;
  text-align: center;
  padding: 7px 0 8px;
  border-radius: 12px;
  background: rgba(9, 10, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.klp-modal__lesson-day {
  display: block;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  color: #F2F4FF;
}

.klp-modal__lesson-month {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF8A2A;
}

.klp-modal__lesson-main {
  flex: 1;
  min-width: 0;
}

.klp-modal__lesson-title {
  margin: 0 0 2px;
  font-weight: 800;
  font-size: 13px;
  color: #F2F4FF;
}

.klp-modal__lesson-sub {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.55);
}

.klp-modal__lesson-time {
  flex: none;
  padding: 6px 11px;
  border-radius: 12px;
  background: rgba(255, 138, 42, 0.13);
  border: 1px solid rgba(255, 138, 42, 0.45);
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #FFB067;
}

.klp-modal__awards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.klp-modal__award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: border-color 0.2s ease;
}
.klp-modal__award:hover {
  border-color: rgba(167, 139, 250, 0.5);
}

.klp-modal__award-img {
  width: 58px;
  height: 61px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 22px rgba(120, 60, 200, 0.4);
}

.klp-modal__award-img--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.18);
  color: #C9B2FF;
  font-size: 22px;
}

.klp-modal__award-name {
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  color: rgba(214, 221, 245, 0.8);
}

.klp-modal__empty {
  padding: 14px 4px;
  font-size: 13px;
  color: rgba(199, 206, 235, 0.55);
}

.klp-absence__lesson {
  margin: 0 0 14px;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #F2F4FF;
}

.klp-absence__errors {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 59, 92, 0.12);
  border: 1px solid rgba(255, 59, 92, 0.4);
}

.klp-absence__error {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #FF9DB1;
}

.klp-absence__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.klp-absence__option {
  display: block;
  cursor: pointer;
}
.klp-absence__option:focus-within .klp-absence__option-card {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-absence__option-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.klp-absence__option-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.klp-absence__option-title {
  font-weight: 800;
  font-size: 12.5px;
  color: #F2F4FF;
}

.klp-absence__option-hint {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(199, 206, 235, 0.55);
}

.klp-absence__option input:checked + .klp-absence__option-card--excused {
  background: rgba(255, 197, 61, 0.12);
  border-color: rgba(255, 197, 61, 0.6);
}
.klp-absence__option input:checked + .klp-absence__option-card--excused .klp-absence__option-title {
  color: #FFD66B;
}

.klp-absence__option input:checked + .klp-absence__option-card--unexcused {
  background: rgba(255, 90, 126, 0.1);
  border-color: rgba(255, 90, 126, 0.55);
}
.klp-absence__option input:checked + .klp-absence__option-card--unexcused .klp-absence__option-title {
  color: #FF9DB1;
}

.klp-absence__comment {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(9, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F2F4FF;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 58px;
}
.klp-absence__comment::placeholder {
  color: rgba(199, 206, 235, 0.4);
}
.klp-absence__comment:focus {
  outline: none;
  border-color: rgba(255, 161, 61, 0.6);
}

.klp-absence__submit {
  width: 100%;
}

.profile__content.role-dashboard.klp .role-dashboard__header {
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.78), rgba(15, 17, 30, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: none;
}
.profile__content.role-dashboard.klp .role-dashboard__header h2 {
  font-family: "Unbounded", system-ui, sans-serif;
}
.profile__content.role-dashboard.klp .role-dashboard__card,
.profile__content.role-dashboard.klp .role-dashboard__action {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: none;
}
.profile__content.role-dashboard.klp .role-dashboard__card {
  background: rgba(19, 22, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.13);
}
.profile__content.role-dashboard.klp .role-dashboard__card--accent {
  background: linear-gradient(165deg, rgba(41, 38, 88, 0.85), rgba(16, 17, 34, 0.92));
}

body.profiles--klp .skeleton-box,
body.profiles--klp .skeleton-line {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.05);
}

.profile__content.role-dashboard.klp-skel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.klp-skel {
  pointer-events: none;
}
.klp-skel .skeleton-box--stat {
  height: 60px;
  border-radius: 15px;
}
.klp-skel .skeleton-box--chart-sm {
  width: 100%;
  height: 80px;
  border-radius: 14px;
}
.klp-skel .skeleton-box--cell {
  aspect-ratio: 1;
  border-radius: 9px;
}
.klp-skel .skeleton-box--award {
  width: 52px;
  height: 55px;
  border-radius: 13px;
}

.klp-skel__hero,
.klp-skel__perf,
.klp-skel__next,
.klp-skel__wide,
.klp-skel__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(19, 22, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.klp-skel__hero {
  grid-column: span 4;
  grid-row: span 2;
  align-items: center;
}

.klp-skel__chips {
  display: flex;
  gap: 7px;
  align-self: stretch;
}

.klp-skel__avatar {
  width: 128px;
  height: 128px;
  border-radius: 36px;
  margin-top: 12px;
}

.klp-skel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-self: stretch;
  margin-top: auto;
}

.klp-skel__perf {
  grid-column: span 5;
}

.klp-skel__next {
  grid-column: span 3;
}

.klp-skel__wide {
  grid-column: span 8;
}

.klp-skel__card {
  grid-column: span 6;
}

.klp-skel__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.klp-skel__card-head .skeleton-line--sm {
  max-width: 180px;
}

.klp-skel__spacer {
  flex: 1;
}

.klp-skel__cells {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 6px;
}

.klp-skel__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 0;
}
.klp-skel__row .skeleton-box--avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
}

.klp-skel__row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.klp-skel__awards {
  display: flex;
  gap: 8px;
}

@media (max-width: 1250px) {
  .klp-span-3,
  .klp-span-4,
  .klp-span-5 {
    grid-column: span 6;
  }
  .klp-span-8,
  .klp-rows-2 {
    grid-column: span 12;
  }
  .klp-rows-2 {
    grid-row: auto;
  }
  .klp-projects {
    grid-column: span 6;
  }
  .klp-projects__grid {
    grid-template-columns: 1fr;
  }
  .klp-hero__main {
    padding: 14px 0 12px;
  }
  .klp-skel__hero,
  .klp-skel__wide {
    grid-column: span 12;
  }
  .klp-skel__hero {
    grid-row: auto;
  }
  .klp-skel__perf,
  .klp-skel__next {
    grid-column: span 6;
  }
}
@media (max-width: 1100px) {
  .klp-attendance__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .klp-course-hero__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .klp-course-hero__divider {
    display: none;
  }
  .klp-course-lesson {
    flex-direction: column;
    gap: 16px;
  }
  .klp-course-lesson__divider {
    width: auto;
    height: 1px;
    margin: 0;
  }
}
@media (max-width: 768px) {
  .profile__content.role-dashboard.klp-bento,
  .profile__content.role-dashboard.klp-skel {
    gap: 0.625rem;
  }
  .profile__content.role-dashboard.klp > .profile__block {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .klp-span-3,
  .klp-span-4,
  .klp-span-5,
  .klp-span-8 {
    grid-column: span 12;
  }
  .klp-card {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .klp-attendance__grid,
  .klp-attendance__grid--page {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
  }
  .klp-attendance__cell {
    border-radius: 12px;
    font-size: 12px;
  }
  .klp-card__head {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .klp-projects__grid {
    grid-template-columns: 1fr;
  }
  .avatar.klp-hero__avatar,
  .klp-hero__avatar {
    width: 96px;
    height: 96px;
    border-radius: 28px;
  }
  .klp-next__date {
    font-size: 21px;
  }
  .klp-page-head {
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .klp-page-head__title {
    font-size: 17px;
  }
  .klp-page-head__subtitle {
    font-size: 12px;
  }
  .klp-course-hero {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px;
  }
  .klp-course-hero__metrics {
    width: 100%;
  }
  .klp-course-hero__metric-value {
    font-size: 23px;
  }
  .klp-course-lesson {
    padding: 16px;
  }
  .klp-course-lesson__number {
    font-size: 16px;
  }
  .klp-course-lesson__meta {
    gap: 12px;
  }
  .klp-enroll {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .klp-modal__awards {
    grid-template-columns: repeat(3, 1fr);
  }
  .klp-absence__options {
    grid-template-columns: 1fr;
  }
  .klp-skel__perf,
  .klp-skel__next,
  .klp-skel__card {
    grid-column: span 12;
  }
  .klp-skel__cells {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .klp-hero__chips {
    gap: 5px;
  }
  .klp-hero__chip {
    padding: 5px 10px 5px 6px;
  }
  .klp-attendance__legend {
    font-size: 9.5px;
  }
  .klp-attendance__legend + .klp-attendance__legend {
    margin-left: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile__content.role-dashboard.klp > * {
    animation: none;
  }
  .klp-hero__avatar,
  .klp-course-hero__avatar,
  .klp-chat__icon {
    animation: none;
  }
  .klp-shimmer::before,
  .klp-next::before {
    animation: none;
    display: none;
  }
  .klp-card,
  .klp-btn,
  .klp-next__cta,
  .klp-courses__go,
  .klp-awards__item,
  .klp-attendance__cell,
  .klp-hero__chip,
  .klp-hero__chip-add,
  .klp-projects__card,
  .klp-chat__link,
  .klp-absence__option-card,
  .klp-course-lesson__absence-link {
    transition: none;
  }
  .klp-btn--cta:hover,
  .klp-next__cta:hover,
  .klp-courses__go:hover,
  .klp-awards__item:hover,
  .klp-attendance__cell:hover {
    transform: none;
  }
}
.klp-kids__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 72px 72px 72px 72px 96px;
  gap: 10px;
  align-items: center;
  padding: 0 22px;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(199, 206, 235, 0.45);
}

.klp-kids__head-col--center,
.klp-kids__head-col--num {
  text-align: center;
}

.klp-kids__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.klp-kids__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 72px 72px 72px 72px 96px;
  gap: 10px;
  align-items: center;
  background: linear-gradient(165deg, rgba(34, 38, 66, 0.74), rgba(15, 17, 30, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 16px 22px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.klp-kids__row:hover {
  border-color: rgba(226, 63, 160, 0.4);
  transform: translateX(3px);
}
.klp-kids__row:focus-within {
  border-color: rgba(226, 63, 160, 0.4);
}

.klp-kids__row-link {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  z-index: 1;
}
.klp-kids__row-link:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-kids__person {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.klp-kids__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2.5px rgba(93, 139, 255, 0.6), 0 8px 20px rgba(4, 5, 12, 0.5);
}

.klp-kids__person-main {
  min-width: 0;
}

.klp-kids__name {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 16px;
  color: #F2F4FF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klp-kids__mail {
  margin: 0;
  font-size: 13px;
  color: rgba(199, 206, 235, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klp-kids__awards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.klp-kids__award {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 5px 12px rgba(4, 5, 12, 0.5);
}

.klp-kids__award--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.18);
  color: #C9B2FF;
  font-size: 16px;
}

.klp-kids__award-more {
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.5);
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #C9B2FF;
}

.klp-kids__award-empty {
  font-size: 11px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.4);
}

.klp-kids__num {
  text-align: center;
}

.klp-kids__num-value {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #F2F4FF;
}

.klp-kids__num-label {
  display: none;
}

.klp-kids__actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.klp-kids__open {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2E8BFF;
  box-shadow: 0 8px 22px rgba(46, 139, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.klp-kids__open:hover {
  transform: scale(1.1);
}
.klp-kids__open:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-kids__open-icon {
  width: 18px;
  height: 18px;
  color: #fff;
}

.klp-kids__more {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  list-style: none;
}
.klp-kids__more::-webkit-details-marker {
  display: none;
}
.klp-kids__more:hover {
  background: rgba(255, 255, 255, 0.1);
}
.klp-kids__more:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-kids__connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.klp-kids__connect:hover {
  border-color: rgba(255, 138, 42, 0.55);
  background: rgba(255, 138, 42, 0.04);
}
.klp-kids__connect:focus-visible {
  outline: 2px solid rgba(255, 161, 61, 0.8);
  outline-offset: 2px;
}

.klp-kids__connect-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: rgba(255, 138, 42, 0.8);
}

.klp-kids__connect-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(199, 206, 235, 0.6);
}

.parent-children-table__actions {
  position: relative;
  display: inline-flex;
}
.parent-children-table__actions summary {
  list-style: none;
}
.parent-children-table__actions summary::-webkit-details-marker {
  display: none;
}

.parent-children-table__actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 11rem;
  background: rgba(18, 18, 65, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0.35rem;
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
}

.parent-children-table__actions[open] .parent-children-table__actions-menu {
  display: flex;
}

.parent-children-table__actions-menu.is-portal-open {
  display: flex;
}

.parent-children-table__actions-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95rem;
}
.parent-children-table__actions-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.parent-children-table__actions-item--danger {
  color: rgba(255, 122, 122, 0.92);
}

@media (max-width: 1300px) {
  .klp-kids__head {
    display: none;
  }
  .klp-kids__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 1rem;
  }
  .klp-kids__row:hover {
    transform: none;
  }
  .klp-kids__person {
    grid-column: 1/4;
  }
  .klp-kids__actions {
    grid-column: 4/5;
    justify-self: end;
  }
  .klp-kids__awards {
    grid-column: 1/-1;
    justify-content: flex-start;
  }
  .klp-kids__num {
    display: block;
    padding: 8px 4px;
    border-radius: 12px;
    background: rgba(9, 10, 18, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .klp-kids__num-value {
    font-size: 14px;
  }
  .klp-kids__num-label {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 600;
    color: rgba(199, 206, 235, 0.5);
  }
  .klp-kids__avatar {
    width: 46px;
    height: 46px;
  }
  .klp-kids__name {
    font-size: 14px;
  }
  .klp-kids__mail {
    font-size: 11.5px;
  }
}
@media (max-width: 640px) {
  .klp-kids__connect {
    padding: 16px;
    border-radius: 18px;
  }
  .klp-kids__connect-text {
    font-size: 11.5px;
  }
  .klp-kids__award {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .klp-kids__open {
    width: 34px;
    height: 34px;
  }
  .klp-kids__open .klp-kids__open-icon {
    width: 15px;
    height: 15px;
  }
  .klp-kids__more {
    width: 34px;
    height: 34px;
  }
}
.parent-add-child__dialog {
  max-width: 620px;
  width: min(620px, 100% - 2rem);
  border-radius: 32px;
  padding: 1.75rem;
}
.parent-add-child__dialog .modal__title {
  font-size: clamp(1.6rem, 4.8vw, 2.2rem);
}
.parent-add-child__dialog .modal__back {
  background: transparent;
  border: 0;
}
.parent-add-child__dialog .modal__close {
  width: 2rem;
  height: 2rem;
}

.parent-add-child {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: start;
}

.parent-add-child__hint {
  margin: 0;
  opacity: 0.75;
  color: rgba(220, 226, 245, 0.86);
}

.parent-add-child__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.parent-add-child__form {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.parent-add-child__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.parent-add-child__label {
  display: block;
  width: 100%;
  text-align: start;
  font-size: 0.85rem;
  color: rgba(176, 183, 201, 0.85);
}

.parent-add-child__input {
  --form-autofill-bg: $b22;
  --form-autofill-text: $wt92;
  --form-field-border: $w10;
  width: 100%;
  height: 3.1rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}
.parent-add-child__input::placeholder {
  color: rgba(176, 183, 201, 0.7);
}
.parent-add-child__input:focus {
  border-color: rgba(22, 119, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
}
.parent-add-child__input:-webkit-autofill, .parent-add-child__input:-webkit-autofill:hover, .parent-add-child__input:-webkit-autofill:focus, .parent-add-child__input:-webkit-autofill:active, .parent-add-child__input:-internal-autofill-selected, .parent-add-child__input:-internal-autofill-previewed, .parent-add-child__input:autofill {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  caret-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.22) inset !important;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.22) inset !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  background-color: rgba(0, 0, 0, 0.22) !important;
  background-image: none !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  border-radius: 14px !important;
  transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s !important;
}
.parent-add-child__input:-moz-autofill {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.22) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  filter: none !important;
}

.parent-add-child .form__errors,
.parent-child-registration .form__errors {
  margin-bottom: 0;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255, 122, 122, 0.14);
  border-color: rgba(255, 122, 122, 0.38);
}
.parent-add-child .form__errors ul,
.parent-child-registration .form__errors ul {
  margin-top: 0;
}
.parent-add-child .form__errors li,
.parent-child-registration .form__errors li {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

.parent-add-child__input.is-invalid,
.parent-child-registration__input.is-invalid {
  border-color: rgba(255, 122, 122, 0.85);
  box-shadow: 0 0 0 3px rgba(255, 122, 122, 0.14);
}

.parent-add-child__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0;
  padding-top: 1rem;
}

.parent-child-registration__dialog {
  max-width: 620px;
  width: min(620px, 100% - 2rem);
  border-radius: 32px;
  padding: 1.75rem;
}
.parent-child-registration__dialog .modal__title {
  font-size: clamp(1.6rem, 4.8vw, 2.2rem);
}
.parent-child-registration__dialog .modal__back {
  background: transparent;
  border: 0;
}
.parent-child-registration__dialog .modal__close {
  width: 2rem;
  height: 2rem;
}

.parent-child-registration {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.parent-child-registration__hint {
  margin: 0;
  opacity: 0.75;
  color: rgba(220, 226, 245, 0.86);
}

.parent-child-registration__divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.parent-child-registration__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.parent-child-registration__field {
  display: flex;
  flex-direction: column;
}

.parent-child-registration__input {
  --form-autofill-bg: $b22;
  --form-autofill-text: $wt92;
  --form-field-border: $w10;
  width: 100%;
  height: 3.1rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}
.parent-child-registration__input:-webkit-autofill, .parent-child-registration__input:-webkit-autofill:hover, .parent-child-registration__input:-webkit-autofill:focus, .parent-child-registration__input:-webkit-autofill:active, .parent-child-registration__input:-internal-autofill-selected, .parent-child-registration__input:-internal-autofill-previewed, .parent-child-registration__input:autofill {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  caret-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.22) inset !important;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.22) inset !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  background-color: rgba(0, 0, 0, 0.22) !important;
  background-image: none !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  border-radius: 14px !important;
  transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s !important;
}
.parent-child-registration__input:-moz-autofill {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.22) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  filter: none !important;
}
.parent-child-registration__input::placeholder {
  color: rgba(176, 183, 201, 0.7);
}
.parent-child-registration__input:focus {
  border-color: rgba(22, 119, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
}

.parent-child-registration__policy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  opacity: 0.9;
}

.parent-child-registration__policy-link {
  color: #1677ff;
  text-decoration: none;
}
.parent-child-registration__policy-link:hover {
  text-decoration: underline;
}

.btn-app--full {
  width: 100%;
  justify-content: center;
}

@media (max-width: 900px) {
  .parent-add-child__bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .parent-add-child__bottom .btn-app {
    width: 100%;
    justify-content: center;
  }
  .parent-child-registration__dialog,
  .parent-add-child__dialog {
    width: min(100%, 100% - 1rem);
    border-radius: 24px;
    padding: 1.25rem;
  }
}
.child-dashboard__header-meta {
  margin: 0.35rem 0 0;
  color: rgba(176, 183, 201, 0.92);
}

.child-dashboard__back {
  flex: 0 0 auto;
}

.child-dashboard__stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.35rem;
  min-height: 12.75rem;
}

.child-dashboard__stat-chart {
  position: relative;
  height: 5.1rem;
  padding: 0.2rem 0.1rem 0;
  background: transparent;
  border: 0;
  overflow: visible;
}

.child-dashboard__stat-bars {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  align-items: end;
  gap: 0.42rem;
  height: 100%;
}

.child-dashboard__stat-bar {
  display: block;
  justify-self: center;
  width: 0.24rem;
  min-height: 0.72rem;
  height: var(--child-stat-bar-height);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  opacity: 0.34;
}
.child-dashboard__stat-bar:nth-child(n+4) {
  opacity: 0.46;
}
.child-dashboard__stat-bar:nth-child(n+7) {
  opacity: 0.58;
}
.child-dashboard__stat-bar:nth-child(n+10) {
  opacity: 0.72;
}
.child-dashboard__stat-bar:nth-child(n+13) {
  opacity: 0.86;
}
.child-dashboard__stat-bar:last-child {
  opacity: 1;
}

.child-dashboard__stat-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.child-dashboard__stat-chart-line,
.child-dashboard__stat-chart-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.child-dashboard__stat-chart-path--smooth {
  stroke: rgba(193, 201, 233, 0.72);
  stroke-width: 3.25;
}

.child-dashboard__stat-chart-line--angular {
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 3.25;
}

.child-dashboard__stat-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.child-dashboard__stat-title {
  margin: 0;
  max-width: 10rem;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.2;
}

.child-dashboard__stat-value {
  flex: 0 0 auto;
  text-align: right;
  line-height: 0.9;
}

.child-dashboard__empty-state.empty-state {
  max-width: none;
  margin-top: 1rem;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.child-dashboard__courses,
.child-dashboard__rewards {
  min-width: 0;
}

.child-dashboard__courses .role-dashboard__list {
  max-height: none;
}

.child-dashboard__empty {
  margin: 0;
  padding-top: 1rem;
}

.child-dashboard__rewards {
  min-width: 0;
}
.child-dashboard__rewards.role-dashboard__card {
  overflow: visible;
}

.child-dashboard__achievements {
  margin-top: 1rem;
  padding: 1.15rem;
  border-radius: 1.65rem;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.child-dashboard__reward {
  flex: 0 0 4.35rem;
  width: 4.35rem;
  height: 4.35rem;
  border-radius: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  isolation: isolate;
}
.child-dashboard__reward::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 180deg, rgb(111, 247, 255), rgb(134, 69, 210), rgb(255, 122, 0), rgb(111, 247, 255));
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.child-dashboard__reward--locked {
  opacity: 0.45;
  filter: grayscale(1);
}

.child-dashboard__reward-icon,
.child-dashboard__reward-fallback {
  position: relative;
  z-index: 1;
}

.child-dashboard__reward-icon {
  max-width: 78%;
  max-height: 78%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

.child-dashboard__reward-fallback {
  font-size: 1.65rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .child-dashboard__header-meta {
    max-width: 100%;
  }
  .child-dashboard__stat {
    min-height: 12rem;
  }
}
@media (max-width: 920px) {
  .child-dashboard .role-dashboard__actions {
    grid-template-columns: 1fr;
  }
  .child-dashboard__stat {
    min-height: 11.5rem;
  }
  .child-dashboard__stat-title {
    max-width: 8.75rem;
  }
}
@media (max-width: 767px) {
  .child-dashboard__empty-state.empty-state {
    min-height: 0;
  }
  .child-dashboard .role-dashboard__actions {
    display: flex;
    flex-direction: column;
  }
  .child-dashboard__courses,
  .child-dashboard__rewards {
    grid-column: 1;
  }
}
@media (max-width: 768px) {
  .profile__content.role-dashboard.child-dashboard {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.95rem;
  }
  .profile__content.role-dashboard.child-dashboard > .profile__block {
    padding: 1rem;
    border-radius: 1.75rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__header {
    grid-column: 1/-1;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__header-left {
    width: 100%;
    gap: 0.75rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__badge {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__header-titles .title-middle-small {
    font-size: 1.35rem;
    line-height: 0.95;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat {
    grid-column: span 2;
    min-height: 8.7rem;
    gap: 0.75rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-chart {
    height: 3rem;
    padding: 0;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-bars {
    gap: 0.28rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-bar {
    width: 0.2rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-chart-path--smooth,
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-chart-line--angular {
    stroke-width: 2.6;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-title {
    max-width: none;
    font-size: 0.8rem;
    line-height: 1.15;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-value {
    text-align: left;
    line-height: 0.9;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1/-1;
    gap: 0.95rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .profile__block,
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .role-dashboard__action {
    min-height: 11rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .role-dashboard__action {
    padding: 1rem;
    justify-content: space-between;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .role-dashboard__action .role-dashboard__action-top {
    padding-right: 0;
    gap: 0.55rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .role-dashboard__action .role-dashboard__action-plus {
    position: static;
    transform: none;
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    margin-top: auto;
    margin-left: auto;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .child-dashboard__balance-card {
    min-height: 9.1rem;
    padding: 0.9rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__balance-card {
    grid-column: auto;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__balance-card .role-dashboard__card-head {
    padding-bottom: 0.55rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__balance-card .role-dashboard__balance {
    padding-top: 0.55rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__balance-card .role-dashboard__balance-pill {
    width: 100%;
    min-width: 0;
    min-height: 2.55rem;
    padding: 0 1.05rem;
    align-self: stretch;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses,
  .profile__content.role-dashboard.child-dashboard .child-dashboard__rewards {
    grid-column: 1/-1;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses .role-dashboard__card-head,
  .profile__content.role-dashboard.child-dashboard .child-dashboard__rewards .role-dashboard__card-head {
    padding-bottom: 0.8rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses .role-dashboard__list {
    max-height: none;
    padding-top: 0.35rem;
    padding-right: 0;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses .role-dashboard__row {
    padding: 0.95rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses .role-dashboard__row:last-child {
    border-bottom: 0;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses .role-dashboard__row-avatar {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 2.2rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__courses .role-dashboard__row-title {
    white-space: normal;
    line-height: 1.05;
  }
}
@media (max-width: 420px) {
  .profile__content.role-dashboard.child-dashboard {
    gap: 0.85rem;
  }
  .profile__content.role-dashboard.child-dashboard > .profile__block {
    padding: 0.95rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__header-titles .title-middle-small {
    font-size: 1.18rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .child-dashboard__balance-card {
    min-height: 8.55rem;
    padding: 0.85rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__balance-card .role-dashboard__balance-pill {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0 0.9rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat {
    min-height: 8.15rem;
    gap: 0.65rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-title {
    font-size: 0.74rem;
  }
  .profile__content.role-dashboard.child-dashboard .child-dashboard__stat-value {
    font-size: 1.45rem;
  }
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .profile__block,
  .profile__content.role-dashboard.child-dashboard .role-dashboard__actions > .role-dashboard__action {
    min-height: 10.5rem;
  }
}
.student-achievement-tooltip {
  position: fixed;
  z-index: 10000040;
  max-width: 22rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.student-achievement-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.student-achievement-tooltip__inner {
  background: rgba(18, 13, 42, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 61, 224, 0.45);
  border-radius: 0.875rem;
  box-shadow: 0 20px 46px rgba(5, 3, 18, 0.65);
  padding: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
}
.student-achievement-tooltip__rich {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.student-achievement-tooltip__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.student-achievement-tooltip__icon--unlocked {
  background: linear-gradient(135deg, rgb(0, 117, 255), rgb(127, 41, 250));
  box-shadow: 0 16px 28px rgba(127, 41, 250, 0.28);
}
.student-achievement-tooltip__icon--locked {
  background: rgb(53, 48, 82);
}
.student-achievement-tooltip__icon-img {
  max-width: 68%;
  max-height: 68%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}
.student-achievement-tooltip__icon-lock {
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
}
.student-achievement-tooltip__content {
  min-width: 0;
}
.student-achievement-tooltip__title {
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1.25;
  margin: 0 0 0.25rem;
}
.student-achievement-tooltip__desc {
  color: rgba(176, 183, 201, 0.92);
  font-weight: 650;
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0 0 0.45rem;
}
.student-achievement-tooltip__points {
  font-weight: 900;
  font-size: 0.85rem;
}
.student-achievement-tooltip__points--unlocked {
  color: rgba(255, 206, 84, 0.95);
}
.student-achievement-tooltip__points--locked {
  color: rgba(176, 183, 201, 0.62);
}
.student-achievement-tooltip__bar {
  margin-top: 0.1rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.student-achievement-tooltip__bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fbf71, #7ef2a8);
  box-shadow: 0 0 8px rgba(53, 224, 138, 0.5);
}
.student-achievement-tooltip__frac {
  margin-top: 0.3rem;
  color: #7ef2a8;
  font-size: 0.72rem;
  font-weight: 800;
}
.student-achievement-tooltip__badge {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(255, 193, 84, 0.3);
  border-radius: 0.45rem;
  background: rgba(255, 193, 84, 0.12);
  color: rgba(255, 206, 84, 0.95);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.student-achievement-tooltip__simple {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.35;
  white-space: pre-line;
}
.student-achievement-tooltip__arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
}
.student-achievement-tooltip__arrow:before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(226, 61, 224, 0.45);
}
.student-achievement-tooltip__arrow:after {
  content: "";
  position: absolute;
  left: -7px;
  top: 1px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #17123a;
}
.student-achievement-tooltip.is-bottom .student-achievement-tooltip__arrow {
  bottom: auto;
  top: 0;
}
.student-achievement-tooltip.is-bottom .student-achievement-tooltip__arrow:before {
  top: 0;
  border-top: none;
  border-bottom: 8px solid rgba(226, 61, 224, 0.45);
}
.student-achievement-tooltip.is-bottom .student-achievement-tooltip__arrow:after {
  top: 0;
  border-top: none;
  border-bottom: 7px solid #17123a;
}

@media (hover: none), (pointer: coarse) {
  .student-achievement-tooltip {
    display: none !important;
  }
}
.student-achievement-notification {
  position: fixed;
  inset: 0;
  z-index: 10000050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.student-achievement-notification.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.student-achievement-notification.is-visible .student-achievement-notification__glow {
  opacity: 0.55;
  transform: scale(1);
  animation: sdAchievementGlow 2.1s ease-in-out infinite;
}
.student-achievement-notification.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.student-achievement-notification.is-flying {
  pointer-events: none;
  transition-duration: 0.14s;
}
.student-achievement-notification__fly-wrapper {
  position: fixed;
  z-index: 10000060;
  pointer-events: none;
  margin: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
.student-achievement-notification__fly-clone {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  margin: 0;
  transform: scale(1) rotate(0deg);
  opacity: 1;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.4)) saturate(1.08);
}
.student-achievement-notification__fly-clone.student-achievement-notification__icon-tile {
  width: 100% !important;
  height: 100% !important;
  animation: none !important;
}
.student-achievement-notification__fly-clone--debug {
  outline: 2px dashed rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.35));
}
.student-achievement-notification__fly-debug-marker {
  position: fixed;
  z-index: 10000061;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(127, 41, 250, 0.28);
  pointer-events: none;
  opacity: 0.9;
}
.student-achievement-notification__landing-burst {
  position: fixed;
  z-index: 10000062;
  pointer-events: none;
  width: var(--burst-w, 72px);
  height: var(--burst-h, 72px);
  border-radius: 1.25rem;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
}
.student-achievement-notification__landing-burst:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 206, 84, 0.96), rgba(255, 122, 0, 0.92));
  filter: blur(10px);
  opacity: 0;
  transform: scale(0.2);
  animation: sdAchievementLandingFill 0.82s ease-out forwards;
}
.student-achievement-notification__landing-burst:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 4px solid rgba(255, 206, 84, 0.92);
  opacity: 0;
  transform: scale(1);
  animation: sdAchievementLandingRing 0.62s ease-out forwards;
}
.student-achievement-notification__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.student-achievement-notification__particles {
  position: absolute;
  inset: 0;
}
.student-achievement-notification__glow {
  position: absolute;
  width: min(560px, 100vw - 2rem);
  height: 320px;
  border-radius: 2.2rem;
  background: linear-gradient(90deg, rgba(127, 41, 250, 0.9), rgba(255, 206, 84, 0.85));
  filter: blur(42px);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.student-achievement-notification__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1rem;
  color: rgba(255, 206, 84, 0.92);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: sdAchievementParticle 1.9s ease-out var(--d, 0s) forwards;
}
.student-achievement-notification__card {
  position: relative;
  pointer-events: auto;
  border-radius: 2rem;
  padding: 0.35rem;
  background: linear-gradient(135deg, rgb(127, 41, 250), rgb(255, 206, 84));
  box-shadow: 0 44px 96px rgba(0, 0, 0, 0.58);
  transform: translateY(26px) scale(0.84) rotateX(10deg);
  transform-origin: center top;
  opacity: 0;
  transition: transform 0.52s cubic-bezier(0.18, 0.88, 0.2, 1), opacity 0.28s ease, box-shadow 0.32s ease;
}
.student-achievement-notification__card.is-visible {
  transform: translateY(0) scale(1) rotateX(0deg);
  opacity: 1;
  box-shadow: 0 52px 110px rgba(0, 0, 0, 0.6);
}
.student-achievement-notification__card-inner {
  position: relative;
  overflow: hidden;
  border-radius: 1.85rem;
  background: radial-gradient(circle at top, rgba(67, 75, 135, 0.26), rgba(42, 38, 71, 0.96) 34%), #2a2647;
  padding: 2.25rem 2.3rem 1.9rem;
  min-width: min(520px, 100vw - 2rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.student-achievement-notification__card-inner:before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 2.2rem;
  background: linear-gradient(135deg, rgba(127, 41, 250, 0.6), rgba(255, 206, 84, 0.5));
  filter: blur(28px);
  opacity: 0.55;
  z-index: -1;
}
.student-achievement-notification__card-inner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.06) 62%, transparent 80%);
  transform: translateX(-145%) skewX(-18deg);
  animation: sdAchievementSheen 2.8s ease-out 0.35s 1 both;
  pointer-events: none;
}
.student-achievement-notification__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: rgba(255, 206, 84, 0.95);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.student-achievement-notification__header-icon {
  font-size: 1.2rem;
}
.student-achievement-notification__icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.student-achievement-notification__icon-tile {
  width: 8.25rem;
  height: 8.25rem;
  border-radius: 2rem;
  background: linear-gradient(145deg, rgb(20, 137, 255), rgb(127, 41, 250) 58%, rgba(255, 183, 0, 0.92));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 48px rgba(95, 62, 205, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  animation: sdAchievementIconFloat 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.8s infinite;
}
.student-achievement-notification__icon-tile:before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 2.3rem;
  background: rgba(255, 206, 84, 0.55);
  filter: blur(22px);
  opacity: 0;
  z-index: -1;
}
.student-achievement-notification__icon-tile:after {
  content: "";
  position: absolute;
  inset: -32%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.08) 58%, transparent 70%);
  transform: translateX(-135%) rotate(14deg);
  animation: sdAchievementIconSheen 3.4s ease-in-out 1.05s infinite;
}
.student-achievement-notification__icon-tile--ghost {
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.14s ease-out, transform 0.18s ease-out;
  animation: none !important;
}
.student-achievement-notification.is-visible .student-achievement-notification__icon-tile:before {
  opacity: 0.55;
  animation: sdAchievementIconGlow 2.2s ease-in-out infinite;
}
.student-achievement-notification__icon-img {
  max-width: 72%;
  max-height: 72%;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.35));
  animation: sdAchievementIconPresence 0.9s cubic-bezier(0.21, 1, 0.31, 1) 0.12s both;
}
.student-achievement-notification__icon-fallback {
  font-size: 3.25rem;
  line-height: 1;
}
.student-achievement-notification__content {
  text-align: center;
}
.student-achievement-notification__title {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.15;
}
.student-achievement-notification__desc {
  margin: 0 0 1.4rem;
  color: rgba(176, 183, 201, 0.92);
  font-weight: 650;
  font-size: 1.1rem;
  line-height: 1.35;
}
.student-achievement-notification__reward {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(255, 206, 84), rgb(255, 168, 0));
  box-shadow: 0 16px 28px rgba(255, 206, 84, 0.28);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 900;
  font-size: 1.15rem;
}
.student-achievement-notification__reward-icon {
  font-size: 1.15rem;
}
.student-achievement-notification__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
}
.student-achievement-notification__close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.student-achievement-notification__dev-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
}

.student-levelup-notification {
  position: fixed;
  inset: 0;
  z-index: 10000040;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.student-levelup-notification.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.student-levelup-notification.is-visible .student-levelup-notification__glow {
  opacity: 0.55;
  transform: scale(1);
  animation: sdAchievementGlow 2.1s ease-in-out infinite;
}
.student-levelup-notification__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.student-levelup-notification__particles {
  position: absolute;
  inset: 0;
}
.student-levelup-notification__glow {
  position: absolute;
  width: min(620px, 100vw - 2rem);
  height: 340px;
  border-radius: 2.2rem;
  background: linear-gradient(90deg, rgba(255, 206, 84, 0.92), rgba(127, 41, 250, 0.88));
  filter: blur(42px);
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.student-levelup-notification__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 1.35rem;
  opacity: 0;
  color: rgba(255, 206, 84, 0.95);
  animation: sdAchievementParticle 1.9s ease-out var(--d, 0s) forwards;
}
.student-levelup-notification__card {
  position: relative;
  width: min(560px, 100vw - 2rem);
  border-radius: 2.2rem;
  background: linear-gradient(180deg, rgba(18, 20, 60, 0.95), rgba(16, 18, 46, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 36px 78px rgba(0, 0, 0, 0.56);
  padding: 2.05rem 2.25rem 1.95rem;
  transform: translateY(18px) scale(0.96) rotateX(8deg);
  transform-origin: center top;
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.18, 0.88, 0.2, 1), opacity 0.22s ease, box-shadow 0.28s ease;
  --lu-progress: 0%;
}
.student-levelup-notification__card.is-visible {
  transform: translateY(0) scale(1) rotateX(0deg);
  opacity: 1;
  box-shadow: 0 44px 92px rgba(0, 0, 0, 0.58);
}
.student-levelup-notification__card:before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 2.2rem;
  background: linear-gradient(135deg, rgba(127, 41, 250, 0.6), rgba(255, 206, 84, 0.5));
  filter: blur(28px);
  opacity: 0.55;
  z-index: -1;
}
.student-levelup-notification__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: rgba(255, 206, 84, 0.95);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.student-levelup-notification__header-icon {
  font-size: 1.2rem;
}
.student-levelup-notification__level {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.student-levelup-notification__level-value {
  font-weight: 900;
  font-family: "DrukWideCyr Bold";
  font-size: 5.2rem;
  line-height: 1;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 6px rgba(255, 206, 84, 0.65);
  text-shadow: 0 12px 0 rgba(0, 0, 0, 0.18), 0 18px 26px rgba(0, 0, 0, 0.4);
}
.student-levelup-notification__level-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 206, 84, 0.18);
  border: 1px solid rgba(255, 206, 84, 0.22);
  color: rgba(255, 206, 84, 0.95);
  font-weight: 900;
}
.student-levelup-notification__meta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: center;
  text-align: center;
}
.student-levelup-notification__points {
  margin: 0;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
}
.student-levelup-notification__progress {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
  color: rgba(255, 255, 255, 0.82);
}
.student-levelup-notification__progress-label {
  font-weight: 800;
  font-size: 0.95rem;
}
.student-levelup-notification__progress-value {
  font-weight: 900;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
}
.student-levelup-notification__to-next {
  font-weight: 800;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
}
.student-levelup-notification__bar {
  width: min(420px, 100%);
  margin-top: 0.25rem;
}
.student-levelup-notification__bar-track {
  width: 100%;
  height: 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.student-levelup-notification__bar-fill {
  height: 100%;
  width: var(--lu-progress, 0%);
  background: linear-gradient(90deg, rgb(255, 206, 84), rgb(127, 41, 250));
  border-radius: 999px;
  transition: width 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.student-levelup-notification__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
}
.student-levelup-notification__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes sdLevelUpPulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
  }
  22% {
    transform: scale(1.06);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.42));
  }
  55% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sdAchievementGlow {
  0% {
    opacity: 0.42;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.04);
  }
  100% {
    opacity: 0.42;
    transform: scale(0.96);
  }
}
@keyframes sdDashboardAchievementRingHue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@keyframes kaTwinkle {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}
@keyframes kaGlint {
  from {
    transform: translateX(-130%) rotate(10deg);
  }
  to {
    transform: translateX(130%) rotate(10deg);
  }
}
@keyframes sdAchievementLockFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}
@keyframes sdAchievementLockShake {
  0%, 100% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(-11deg);
  }
  36% {
    transform: rotate(9deg);
  }
  54% {
    transform: rotate(-6deg);
  }
  72% {
    transform: rotate(4deg);
  }
  88% {
    transform: rotate(-2deg);
  }
}
@keyframes sdDashboardAchievementPulse {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) saturate(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  34% {
    transform: translateY(-4px) scale(1.14) rotate(-1deg);
    filter: brightness(1.12) saturate(1.1);
    box-shadow: 0 18px 36px rgba(255, 206, 84, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
  62% {
    transform: translateY(-1px) scale(1.06) rotate(0deg);
    filter: brightness(1.08) saturate(1.06);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1) saturate(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}
@keyframes sdDashboardAchievementIconPop {
  0% {
    opacity: 0.2;
    transform: scale(0.68) rotate(-10deg);
    filter: brightness(0.95);
  }
  48% {
    opacity: 1;
    transform: scale(1.16) rotate(7deg);
    filter: brightness(1.08);
  }
  76% {
    opacity: 1;
    transform: scale(0.96) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
}
@keyframes sdAchievementLandingFill {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  18% {
    opacity: 0.86;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.55);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}
@keyframes sdAchievementLandingRing {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}
@keyframes sdAchievementLandingBurst {
  0% {
    opacity: 0;
    transform: scale(0.65);
    filter: brightness(1);
  }
  14% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.08);
  }
  55% {
    opacity: 0.7;
    transform: scale(1.28);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
    filter: brightness(1);
  }
}
@keyframes sdAchievementIconFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  30% {
    transform: translate3d(0, -5px, 0) scale(1.02);
  }
  60% {
    transform: translate3d(0, -2px, 0) scale(1.01);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes sdAchievementIconSheen {
  0% {
    transform: translateX(-135%) rotate(14deg);
    opacity: 0;
  }
  18% {
    opacity: 0.2;
  }
  44% {
    opacity: 0.78;
  }
  100% {
    transform: translateX(135%) rotate(14deg);
    opacity: 0;
  }
}
@keyframes sdAchievementIconPresence {
  0% {
    opacity: 0;
    transform: scale(0.78);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.35));
  }
}
@keyframes sdAchievementIconGlow {
  0% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.62;
    transform: scale(1.06);
  }
  100% {
    opacity: 0.35;
    transform: scale(0.96);
  }
}
@keyframes sdAchievementSheen {
  0% {
    transform: translateX(-145%) skewX(-18deg);
    opacity: 0;
  }
  24% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.42;
  }
  100% {
    transform: translateX(145%) skewX(-18deg);
    opacity: 0;
  }
}
@keyframes sdAchievementParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(0);
  }
}
.qa-tools {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.qa-tools__hero {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  position: relative;
  z-index: 20;
}
.qa-tools__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.qa-tools__head-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.qa-tools__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.qa-tools__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}
.qa-tools__lead {
  margin: 0;
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.45;
}
.qa-tools__env {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.qa-tools__env--development {
  border-color: rgba(52, 199, 89, 0.42);
  color: rgb(98.1784860558, 214.0215139442, 127.3362549801);
}
.qa-tools__env--test {
  border-color: rgba(255, 122, 0, 0.42);
  color: #F8972E;
}
.qa-tools__warning {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 122, 0, 0.32);
  background: rgba(255, 122, 0, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  line-height: 1.4;
}

.qa-card {
  background: rgba(18, 18, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.qa-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.qa-picker__label {
  flex: 1 1 100%;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.qa-picker__control {
  flex: 1 1 auto;
  display: flex;
  gap: 0.6rem;
  min-width: 0;
}
.qa-picker__select {
  flex: 1 1 auto;
  min-width: 0;
}

.qa-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.qa-search__input {
  width: 100%;
}
.qa-search__results {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 12, 40, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.qa-search__results[hidden] {
  display: none;
}
.qa-search__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.qa-search__option:hover, .qa-search__option.is-active {
  background: rgba(255, 255, 255, 0.12);
}
.qa-search__option:focus-visible {
  outline: 2px solid rgba(40, 50, 245, 0.55);
  outline-offset: -2px;
}
.qa-search__empty {
  padding: 0.55rem 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
}

.qa-field {
  width: 100%;
  height: 2.85rem;
  padding: 0 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  color-scheme: dark;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.qa-field:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.qa-field:focus-visible {
  border-color: #2832f5;
  box-shadow: 0 0 0 3px rgba(40, 50, 245, 0.28);
}
.qa-field option {
  color: #111;
}

.qa-state {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.85rem;
}

.qa-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
}
.qa-stat__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.qa-stat__value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.qa-stat__hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
}
.qa-stat__hint--warn {
  color: #F8972E;
}
.qa-stat--level {
  grid-column: span 1;
}

.qa-progress {
  margin-top: 0.55rem;
  height: 0.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.qa-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0075FF, #8645D2);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.qa-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.2rem;
}
.qa-panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.qa-panel__empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.4;
}

.qa-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.qa-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.qa-form__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.qa-form__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.qa-form__reset {
  margin-top: 0.2rem;
}

.qa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.qa-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 100px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.qa-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}
.qa-chip:active {
  transform: translateY(0);
}
.qa-chip:focus-visible {
  outline: 2px solid rgba(40, 50, 245, 0.55);
  outline-offset: 2px;
}

.qa-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}
.qa-btn:active {
  transform: translateY(1px);
}
.qa-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}
.qa-btn--primary {
  background: #2832f5;
  color: #fff;
  box-shadow: 0 6px 18px rgba(40, 50, 245, 0.32);
}
.qa-btn--primary:hover {
  background: rgb(78.9866666667, 87.1733333333, 246.8133333333);
  transform: translateY(-1px);
}
.qa-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}
.qa-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
.qa-btn--danger {
  background: transparent;
  border-color: rgba(246, 57, 114, 0.5);
  color: #F63972;
}
.qa-btn--danger:hover {
  background: rgba(246, 57, 114, 0.12);
  border-color: rgba(246, 57, 114, 0.8);
}

.qa-empty {
  padding: 2.5rem 1.5rem;
  border-radius: 1.75rem;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.qa-empty__title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.qa-empty__text {
  margin: 0 auto;
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
  line-height: 1.45;
}

@media (max-width: 600px) {
  .qa-tools {
    padding: 1rem 0.9rem;
  }
  .qa-picker__control {
    flex-wrap: wrap;
  }
  .qa-form__actions .qa-btn {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qa-chip,
  .qa-btn,
  .qa-field,
  .qa-progress__bar {
    transition: none;
  }
  .qa-chip:hover,
  .qa-btn--primary:hover,
  .qa-btn:active {
    transform: none;
  }
}
.cosmetics-shop {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  color: #fff;
}
.cosmetics-shop__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  align-items: center;
  gap: 1rem;
  min-height: 8.5rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.35rem 1rem;
  border-radius: 1.65rem;
  background: radial-gradient(circle at 74% 38%, rgba(255, 196, 73, 0.18), transparent 11rem), linear-gradient(180deg, rgba(34, 32, 76, 0.98), rgba(31, 29, 70, 0.98));
  overflow: hidden;
}
.cosmetics-shop__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% 85%, rgba(197, 40, 163, 0.16), transparent 13rem);
  pointer-events: none;
}
.cosmetics-shop__hero-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cosmetics-shop__title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}
.cosmetics-shop__title-icon {
  display: inline-flex;
  width: clamp(3.2rem, 5vw, 4.4rem);
  height: clamp(3.2rem, 5vw, 4.4rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25));
}
.cosmetics-shop__title-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cosmetics-shop__heading {
  min-width: 0;
  flex: 1 1 auto;
}
.cosmetics-shop__title {
  margin: 0;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.75rem, 3.55vw, 3.1rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0.01em;
}
.cosmetics-shop__subtitle {
  margin: 0.35rem 0 0;
  max-width: 31rem;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
}
.cosmetics-shop__balance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.32rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: rgba(22, 22, 57, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #fff;
  white-space: nowrap;
}
.cosmetics-shop__balance-coin {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
}
.cosmetics-shop__balance-value {
  font-family: "DrukWideCyr Bold";
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__balance-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #8b54ff, #6c2bff);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__hero-art {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 7.2rem;
  pointer-events: none;
}
.cosmetics-shop__hero-img {
  position: absolute;
  right: -0.45rem;
  bottom: -0.85rem;
  display: block;
  width: min(21rem, 112%);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}
.cosmetics-shop__tabs, .cosmetics-shop__category-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}
.cosmetics-shop__tabs {
  justify-content: flex-start;
}
.cosmetics-shop__tab, .cosmetics-shop__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.6rem 1.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  background: rgba(36, 35, 83, 0.72);
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: filter 0.16s ease, transform 0.16s ease;
}
.cosmetics-shop__tab.is-active, .cosmetics-shop__category.is-active {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(90deg, #D70DBA, #E79542);
  color: #fff;
}
.cosmetics-shop__tab:hover, .cosmetics-shop__category:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.cosmetics-shop__category-bar {
  justify-content: space-between;
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem;
  background: rgba(36, 35, 83, 0.72);
}
.cosmetics-shop__category-tabs {
  display: inline-flex;
  min-width: 0;
  gap: 0.35rem;
}
.cosmetics-shop__category {
  min-width: 9.2rem;
  min-height: 2.45rem;
  border: 0;
  background: transparent;
}
.cosmetics-shop__rarity {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.45rem;
  padding: 0.45rem 1.05rem;
  border-radius: 0.55rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.cosmetics-shop__rarity-label {
  text-transform: lowercase;
}
.cosmetics-shop__rarity-chevron {
  font-size: 1.15rem;
  line-height: 1;
}
.cosmetics-shop__panels {
  min-height: 0;
}
.cosmetics-shop__pane {
  display: none;
}
.cosmetics-shop__pane.is-active {
  display: block;
}
.cosmetics-shop__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.74fr);
  gap: 1rem;
  min-height: 0;
}
.cosmetics-shop__catalog {
  min-width: 0;
  max-height: min(27rem, 100vh - 21rem);
  overflow-y: auto;
  padding-right: 0.45rem;
  scrollbar-width: thin;
  scrollbar-color: #F000CE rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog::-webkit-scrollbar {
  width: 0.34rem;
}
.cosmetics-shop__catalog::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #F000CE, #009E7A);
}
.cosmetics-shop__group {
  margin-bottom: 0.8rem;
}
.cosmetics-shop__group-title {
  margin: 0 0 0.65rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  font-weight: 900;
}
.cosmetics-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.cosmetics-shop__empty, .cosmetics-shop__collection-empty {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}
.cosmetics-shop__collection-empty-img {
  display: block;
  width: min(23rem, 90%);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
}
.cosmetics-shop__collection-grid {
  max-height: min(30rem, 100vh - 18rem);
  overflow-y: auto;
  padding-right: 0.45rem;
}
.cosmetics-shop__preview {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.15rem 1rem;
  border-radius: 1rem;
  background: radial-gradient(circle at 50% 34%, rgba(197, 40, 163, 0.14), transparent 12rem), linear-gradient(180deg, rgba(36, 35, 83, 0.5), rgba(36, 35, 83, 0.22));
  overflow: hidden;
}
.cosmetics-shop__preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 0.13rem, transparent 0.15rem);
  background-size: 3.7rem 3.7rem;
  opacity: 0.22;
  pointer-events: none;
}
.cosmetics-shop__preview-title, .cosmetics-shop__preview-name, .cosmetics-shop__preview-caption {
  position: relative;
  z-index: 1;
}
.cosmetics-shop__preview-title {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1rem;
  font-weight: 900;
}
.cosmetics-shop__preview-frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(18rem, 100%);
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.cosmetics-shop__preview-avatar {
  display: block;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-shop__preview-name {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  line-height: 1;
  text-align: center;
}
.cosmetics-shop__preview-caption {
  margin: auto 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.cosmetics-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-height: 13.2rem;
  padding: 0.7rem 0.55rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 0.65rem;
  background: rgba(49, 48, 105, 0.76);
  color: #fff;
  text-align: center;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cosmetics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.cosmetics-card.is-owned {
  border-color: rgba(95, 174, 145, 0.56);
}
.cosmetics-card.is-denied {
  animation: cosmetics-deny 0.9s ease;
}
.cosmetics-card--common {
  border-color: rgba(95, 174, 145, 0.65);
}
.cosmetics-card--uncommon {
  border-color: rgba(95, 174, 145, 0.65);
}
.cosmetics-card--rare {
  border-color: rgba(81, 72, 216, 0.65);
}
.cosmetics-card--epic {
  border-color: rgba(197, 40, 163, 0.7);
}
.cosmetics-card--legendary {
  border-color: rgba(182, 124, 42, 0.75);
}
.cosmetics-card__rarity {
  align-self: flex-start;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.63rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cosmetics-card__rarity--common, .cosmetics-card__rarity--uncommon {
  background: rgba(95, 174, 145, 0.88);
}
.cosmetics-card__rarity--rare {
  background: rgba(81, 72, 216, 0.88);
}
.cosmetics-card__rarity--epic {
  background: rgba(197, 40, 163, 0.88);
}
.cosmetics-card__rarity--legendary {
  background: rgba(182, 124, 42, 0.88);
}
.cosmetics-card__preview {
  width: 6.25rem;
  height: 6.25rem;
  flex: 0 0 auto;
  border-radius: 0.75rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.22));
}
.cosmetics-card__title {
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.cosmetics-card__footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.42rem;
}
.cosmetics-card__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  max-width: 100%;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cosmetics-card__price-coin {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
}
.cosmetics-card__buy, .cosmetics-card__equip {
  width: min(100%, 6.9rem);
  min-height: 1.72rem;
  border: 0;
  border-radius: 0.22rem;
  padding: 0.28rem 0.5rem;
  color: #fff;
  background: linear-gradient(90deg, #D70DBA, #E79542);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.cosmetics-card__buy:hover:not(:disabled), .cosmetics-card__equip:hover:not(:disabled) {
  filter: brightness(1.04);
}
.cosmetics-card__buy:disabled, .cosmetics-card__equip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cosmetics-card__equip {
  background: linear-gradient(90deg, #007FFF, #00A3FF);
  text-transform: none;
}
.cosmetics-card__equip.is-equipped {
  background: linear-gradient(90deg, #5FAE91, #3C9E6E);
}

.cosmetics-preview--default {
  background: linear-gradient(135deg, rgba(238, 241, 246, 0.16), rgba(223, 228, 238, 0.08));
}

.cosmetics-preview--frame-arrows {
  background-image: url(/assets/cosmetics/frame-arrows-3ad629a135d3ef2eefa25393d069bf751bcda5b1f3480a032c43e26e37896257.png);
}

.cosmetics-preview--frame-floral {
  background-image: url(/assets/cosmetics/frame-floral-d49e6066162e5e56a4e721daebc38c5711a77e9cdd8efb3fb6ae3b07785c5ead.png);
}

.cosmetics-preview--frame-pixel {
  background-image: url(/assets/cosmetics/frame-pixel-01515ceac93d0a61dcc4b521efdfa50244fcd07835a610c9c049b4d7a43d3761.png);
}

.cosmetics-preview--frame-rainbow {
  background-image: url(/assets/cosmetics/frame-rainbow-8268cab980905798015e7081f59b67e570749da7068e25f85f105233cb10737e.png);
}

.cosmetics-preview--frame-tech {
  background-image: url(/assets/cosmetics/frame-tech-0b3794fa1b1260d6d8886dba6582ec180d5be3349ddf5f0eacc97f407d5789eb.png);
}

.cosmetics-preview--frame-water {
  background-image: url(/assets/cosmetics/frame-water-696e95963de7a127c2f7e80112cf788450ecdd35c2eb2dbed357e8899881c500.png);
}

@keyframes cosmetics-deny {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
}
.student-dashboard__balance-shop {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #3d7bd6;
  text-decoration: none;
}
.student-dashboard__balance-shop:hover {
  text-decoration: underline;
}

.coin-packs {
  margin-top: 1.2rem;
}
.coin-packs__title {
  margin: 0 0 0.25rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}
.coin-packs__note {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
}
.coin-packs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1.1rem;
}

.coin-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(224, 162, 27, 0.35);
  background: linear-gradient(160deg, rgba(255, 210, 74, 0.1), rgba(255, 210, 74, 0.02));
  text-align: center;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .coin-pack:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 162, 27, 0.65);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  }
}
.coin-pack:focus-within {
  border-color: rgba(224, 162, 27, 0.7);
}
.coin-pack__amount {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.coin-pack__bag {
  width: 1.6rem;
  height: 1.6rem;
}
.coin-pack__coins {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
}
.coin-pack__title {
  margin: 0;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}
.coin-pack__bonus {
  font-size: 0.8rem;
  font-weight: 700;
  color: #4caf7d;
}
.coin-pack__buy {
  margin-top: auto;
  border: 0;
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
  font-weight: 800;
  cursor: pointer;
  background: #e0a21b;
  color: #fff;
  transition: background 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease, opacity 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .coin-pack__buy:hover {
    background: rgb(230.4310756972, 174.0135458167, 51.1689243028);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(224, 162, 27, 0.38);
  }
}
.coin-pack__buy:active {
  transform: translateY(0);
  box-shadow: none;
}
.coin-pack__buy:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.coin-pack__buy:disabled {
  opacity: 0.5;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .coin-pack,
  .coin-pack__buy {
    transition: none;
  }
  .coin-pack:hover,
  .coin-pack__buy:hover,
  .coin-pack__buy:active {
    transform: none;
  }
}
turbo-frame#studentShopModalFrame {
  display: block;
}

.profile__shop-block {
  margin-top: 1.25rem;
  min-width: 0;
  scroll-margin-top: 1.25rem;
}
.profile__shop-block .cosmetics-shop {
  max-width: none;
}

.profile__shop-frame {
  display: block;
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.42);
}

.profile__shop-placeholder {
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  border-radius: 1.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.46);
  background: radial-gradient(circle at 66% 52%, rgba(111, 81, 177, 0.2), transparent 16rem), #242350;
  text-align: center;
}

.profile__shop-placeholder-img {
  width: min(20rem, 86%);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
}

.profile__shop-placeholder-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 700;
}

.cosmetics-shop__hero {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
  min-height: clamp(10.8rem, 22vh, 13.4rem);
  padding: clamp(1.1rem, 2.2vw, 1.65rem) clamp(1.1rem, 2.4vw, 1.85rem);
}
.cosmetics-shop__hero-main {
  position: static;
  display: block;
}
.cosmetics-shop__title-row {
  width: min(100%, 36rem);
  align-items: center;
}
.cosmetics-shop__title {
  white-space: nowrap;
}
.cosmetics-shop__balance {
  position: absolute;
  z-index: 3;
  top: clamp(0.85rem, 2vw, 1.25rem);
  right: clamp(0.95rem, 2.4vw, 1.55rem);
}
.cosmetics-shop__hero-img {
  right: clamp(0.25rem, 2vw, 1.6rem);
  bottom: clamp(-1.25rem, -2vw, -0.55rem);
  width: min(26rem, 118%);
}
.cosmetics-shop__rarity {
  position: relative;
  padding: 0;
}
.cosmetics-shop__rarity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.45rem;
  padding: 0.45rem 1.05rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.cosmetics-shop__rarity-menu {
  position: absolute;
  z-index: 8;
  top: calc(100% + 0.35rem);
  right: 0.2rem;
  display: none;
  min-width: 12.4rem;
  padding: 0.45rem;
  border-radius: 0.8rem;
  background: rgba(73, 72, 121, 0.96);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}
.cosmetics-shop__rarity-menu.is-open {
  display: flex;
  flex-direction: column;
}
.cosmetics-shop__rarity-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.55rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: #fff;
  font-size: 0.96rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.cosmetics-shop__rarity-option.is-active::after {
  content: "✓";
  font-size: 1.1rem;
  line-height: 1;
}
.cosmetics-shop__rarity-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog .cosmetics-shop__group {
  display: none;
}
.cosmetics-shop__catalog .cosmetics-shop__group.is-active {
  display: block;
}

.cosmetics-card {
  cursor: pointer;
}
.cosmetics-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.42);
  outline-offset: 2px;
}
.cosmetics-card.is-selected {
  box-shadow: 0 0 0 2px rgba(240, 0, 206, 0.68), 0 12px 24px rgba(0, 0, 0, 0.24);
}
.cosmetics-card__preview {
  background-color: rgba(24, 25, 65, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cosmetics-card .cosmetics-shop__collection-grid {
  max-height: clamp(20rem, 100dvh - 18rem, 32rem);
  scrollbar-width: thin;
  scrollbar-color: #F000CE rgba(255, 255, 255, 0.08);
}

@supports not (height: 100dvh) {
  .modal.student-shop-modal .student-shop-modal__dialog {
    max-height: min(48rem, 100vh - 1rem);
  }
  .modal.student-shop-modal .student-shop-modal__placeholder,
  .modal.student-shop-modal .cosmetics-shop {
    min-height: min(48rem, 100vh - 1rem);
  }
  .modal.student-shop-modal .cosmetics-shop__catalog {
    max-height: clamp(18rem, 100vh - 24rem, 27rem);
  }
}
@media (max-width: 920px) {
  .cosmetics-shop__hero {
    grid-template-columns: 1fr;
  }
  .cosmetics-shop__hero-art {
    display: none;
  }
  .cosmetics-shop__hero-main {
    flex-direction: column;
  }
  .cosmetics-shop__title {
    white-space: normal;
  }
  .cosmetics-shop__balance {
    position: static;
    width: fit-content;
    margin-top: 0.75rem;
  }
  .cosmetics-shop__content {
    grid-template-columns: 1fr;
  }
  .cosmetics-shop__preview {
    display: none;
  }
  .cosmetics-shop__grid {
    grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr));
  }
}
@media (max-width: 640px) {
  .cosmetics-shop {
    padding: 1.1rem;
  }
  .cosmetics-shop__title-row {
    gap: 0.65rem;
  }
  .cosmetics-shop__title-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
  .cosmetics-shop__tabs, .cosmetics-shop__category-bar, .cosmetics-shop__category-tabs {
    align-items: stretch;
    flex-direction: column;
  }
  .cosmetics-shop__tab, .cosmetics-shop__category {
    width: 100%;
  }
  .cosmetics-shop__rarity {
    justify-content: center;
  }
  .cosmetics-shop__grid {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }
  .student-shop-modal {
    padding: 0.25rem;
  }
  .student-shop-modal .student-shop-modal__dialog {
    width: calc(100vw - 0.5rem);
    max-height: calc(100vh - 0.5rem);
    border-radius: 1.2rem;
  }
  .student-shop-modal .cosmetics-shop {
    height: calc(100vh - 0.5rem);
    padding: 1rem;
  }
}
.modal.student-shop-modal {
  z-index: 10000080;
  padding: clamp(0.25rem, 1vw, 0.65rem);
}
.modal.student-shop-modal .student-shop-modal__dialog {
  width: min(76rem, 100vw - 1rem);
  max-height: min(49rem, 100dvh - 1rem);
  background: transparent;
  overflow: visible;
}
.modal.student-shop-modal .modal__close {
  width: 2.25rem;
  height: 2.25rem;
  top: 0.7rem;
  right: 0.7rem;
  border-radius: 0.55rem;
  background: rgba(18, 19, 50, 0.82);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}
.modal.student-shop-modal .modal__body {
  padding: 0;
  overflow: visible;
}
.modal.student-shop-modal .student-shop-modal__frame {
  display: block;
  min-height: 0;
  border-radius: 1.9rem;
  overflow: hidden;
  background: transparent;
}
.modal.student-shop-modal .student-shop-modal__placeholder {
  min-height: min(48rem, 100dvh - 1rem);
  border-radius: 1.9rem;
  background: radial-gradient(circle at 76% 20%, rgba(129, 78, 255, 0.18), transparent 28%), linear-gradient(180deg, #242654, #202142);
}

.cosmetics-shop {
  position: relative;
  width: 100%;
  min-height: min(48rem, 100dvh - 1rem);
  margin: 0;
  padding: clamp(1.3rem, 2.2vw, 2rem);
  border-radius: 1.9rem;
  background: radial-gradient(circle at 78% 10%, rgba(126, 90, 255, 0.18), transparent 24%), radial-gradient(circle at 76% 58%, rgba(240, 0, 206, 0.08), transparent 22%), linear-gradient(180deg, #232451, #202142);
  overflow: hidden;
}
.cosmetics-shop__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  gap: 1rem;
  min-height: 13rem;
  padding: clamp(1.2rem, 2vw, 1.7rem);
  border-radius: 1.65rem;
  background: linear-gradient(90deg, rgba(34, 34, 86, 0.96), rgba(48, 32, 98, 0.96));
  overflow: hidden;
}
.cosmetics-shop__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 85%, rgba(255, 170, 77, 0.08), transparent 20%), radial-gradient(circle at 84% 18%, rgba(139, 84, 255, 0.2), transparent 28%);
  pointer-events: none;
}
.cosmetics-shop__hero-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
}
.cosmetics-shop__title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 39rem;
}
.cosmetics-shop__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.3rem;
  height: 4.3rem;
  flex: 0 0 4.3rem;
  border-radius: 1rem;
  background: rgba(255, 197, 61, 0.12);
}
.cosmetics-shop__title-icon-img {
  width: 2.45rem;
  height: 2.45rem;
}
.cosmetics-shop__heading {
  min-width: 0;
}
.cosmetics-shop__title {
  margin: 0;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 0.88;
}
.cosmetics-shop__subtitle {
  margin: 0.45rem 0 0;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.cosmetics-shop__balance {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  min-height: 4.35rem;
  padding: 0.8rem clamp(1.35rem, 2.6vw, 2rem);
  border-radius: 1.15rem;
  border: 2px solid #F000CE;
  background: linear-gradient(180deg, rgba(44, 45, 98, 0.96), rgba(31, 42, 88, 0.96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.cosmetics-shop__balance::before, .cosmetics-shop__balance::after {
  content: "";
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  background: url(/assets/student_dashboard/coin-793c9d0cc9286c889665e5a9226902f471cce10618a67877e92bc2de7ea42fae.svg) center/contain no-repeat;
  opacity: 0.82;
  pointer-events: none;
}
.cosmetics-shop__balance::before {
  top: -0.7rem;
  left: 57%;
}
.cosmetics-shop__balance::after {
  right: -0.8rem;
  top: 50%;
  transform: translateY(-50%);
}
.cosmetics-shop__balance-coin {
  position: absolute;
  left: -0.55rem;
  bottom: -0.55rem;
  width: 2.25rem;
  height: 2.25rem;
  opacity: 0.88;
}
.cosmetics-shop__balance-value {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1;
}
.cosmetics-shop__balance-plus {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #8354FF, #B760FF);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__hero-art {
  position: relative;
  z-index: 1;
  min-height: 0;
}
.cosmetics-shop__hero-img {
  position: absolute;
  right: 0.35rem;
  bottom: -1.25rem;
  width: min(22rem, 116%);
  height: auto;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.28));
}
.cosmetics-shop__tabs {
  display: inline-flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.cosmetics-shop__tab {
  min-width: 12rem;
  min-height: 3.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  padding: 0.7rem 1.25rem;
  background: rgba(39, 40, 92, 0.66);
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.55rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cosmetics-shop__tab.is-active {
  border-color: transparent;
  background: linear-gradient(90deg, #E509C8, #F2A043);
  color: #fff;
  box-shadow: 0 14px 26px rgba(240, 0, 206, 0.18);
}
.cosmetics-shop__panels {
  margin-top: 1rem;
}
.cosmetics-shop__pane {
  display: none;
}
.cosmetics-shop__pane.is-active {
  display: block;
}
.cosmetics-shop__category-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: rgba(40, 41, 93, 0.74);
}
.cosmetics-shop__category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cosmetics-shop__category {
  min-width: 10.5rem;
  min-height: 2.95rem;
  border: 0;
  border-radius: 0.8rem;
  padding: 0.65rem 1.15rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}
.cosmetics-shop__category.is-active {
  background: linear-gradient(90deg, #E509C8, #F2A043);
  color: #fff;
}
.cosmetics-shop__rarity {
  position: relative;
  flex: 0 0 auto;
}
.cosmetics-shop__rarity-button {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.95rem;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
.cosmetics-shop__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.7fr);
  gap: 1rem;
  min-height: 0;
}
.cosmetics-shop__content--collection {
  align-items: start;
}
.cosmetics-shop__catalog {
  min-width: 0;
  max-height: clamp(19rem, 100dvh - 24rem, 28rem);
  padding-right: 0.45rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #F000CE rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog::-webkit-scrollbar {
  width: 0.34rem;
}
.cosmetics-shop__catalog::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #F000CE, #009E7A);
}
.cosmetics-shop__collection-grid {
  max-height: clamp(21rem, 100dvh - 20rem, 31rem);
}
.cosmetics-shop__group {
  display: none;
  margin-bottom: 0.8rem;
}
.cosmetics-shop__group.is-active {
  display: block;
}
.cosmetics-shop__group-title {
  margin: 0 0 0.8rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  font-weight: 900;
}
.cosmetics-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.cosmetics-shop__preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  min-height: 100%;
  padding: 1.2rem 1rem 1rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(39, 38, 89, 0.96), rgba(37, 36, 86, 0.82));
  overflow: hidden;
}
.cosmetics-shop__preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 0.13rem, transparent 0.15rem);
  background-size: 3.5rem 3.5rem;
  opacity: 0.16;
  pointer-events: none;
}
.cosmetics-shop__preview-title, .cosmetics-shop__preview-caption, .cosmetics-shop__preview-name {
  position: relative;
  z-index: 1;
}
.cosmetics-shop__preview-title {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  font-weight: 900;
}
.cosmetics-shop__preview-stage {
  position: relative;
  z-index: 1;
  width: min(18rem, 100%);
  padding-top: 0.3rem;
}
.cosmetics-shop__preview-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(18rem, 100%);
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cosmetics-shop__preview-avatar {
  display: block;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-shop__preview-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.3);
  animation: userAvatarFigureFloat 3.4s ease-in-out infinite;
}
.cosmetics-shop__preview-badge--default {
  animation: none;
}
.cosmetics-shop__preview-name {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  line-height: 1;
  text-align: center;
}
.cosmetics-shop__preview-caption {
  margin: auto 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.cosmetics-shop__collection-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 24rem);
  gap: 1rem;
  margin-bottom: 1rem;
}
.cosmetics-shop__collection-profile, .cosmetics-shop__current {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(38, 39, 88, 0.96), rgba(35, 36, 82, 0.82));
}
.cosmetics-shop__collection-profile-avatar {
  position: relative;
  flex: 0 0 auto;
}
.cosmetics-shop__collection-profile-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cosmetics-shop__collection-profile-img {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-shop__collection-profile-badge {
  position: absolute;
  right: -0.2rem;
  bottom: 0.2rem;
  width: 2.3rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
}
.cosmetics-shop__collection-profile-name, .cosmetics-shop__current-title {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
}
.cosmetics-shop__collection-profile-subtitle {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
.cosmetics-shop__current {
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
}
.cosmetics-shop__current-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
.cosmetics-shop__current-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 5.8rem;
  padding: 0.8rem 0.65rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
}
.cosmetics-shop__current-item-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.cosmetics-shop__current-frame {
  width: 3.6rem;
  height: 3.6rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cosmetics-shop__current-name {
  font-size: 1rem;
}
.cosmetics-shop__current-badge {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.cosmetics-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-height: 14.2rem;
  padding: 0.7rem 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.85rem;
  background: rgba(49, 48, 105, 0.92);
  overflow: hidden;
}
.cosmetics-card__selected-mark {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #6AD5A4, #41A27E);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}
.cosmetics-card__preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.6rem;
  height: 6.6rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cosmetics-card__preview--theme {
  border-radius: 0.9rem;
  background-color: rgba(21, 22, 59, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cosmetics-card__preview--badge {
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(21, 22, 59, 0.58), rgba(31, 32, 78, 0.85));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cosmetics-card__preview-avatar {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-card__preview-name {
  text-align: center;
  font-family: "DrukWideCyr Bold";
  font-size: 1rem;
  line-height: 1.08;
}
.cosmetics-card__preview-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  font-size: 1.35rem;
}
.cosmetics-card__equip, .cosmetics-card__buy {
  width: min(100%, 7.65rem);
  min-height: 2rem;
  border-radius: 0.38rem;
  text-transform: none;
}
.cosmetics-card__equip.is-equipped {
  background: linear-gradient(90deg, #45A77A, #69C89D);
}

.cosmetics-preview--frame-bronze,
.cosmetics-preview--frame-silver,
.cosmetics-preview--frame-gold {
  border-radius: 50%;
}

.cosmetics-preview--frame-bronze {
  box-shadow: inset 0 0 0 4px #b87333, 0 0 0 1px rgba(184, 115, 51, 0.32);
}

.cosmetics-preview--frame-silver {
  box-shadow: inset 0 0 0 4px #c7ced8, 0 0 10px rgba(199, 206, 216, 0.22);
}

.cosmetics-preview--frame-gold {
  box-shadow: inset 0 0 0 4px #e0a21b, 0 0 10px rgba(224, 162, 27, 0.24);
}

.cosmetics-shop__preview-name--theme-dark,
.cosmetics-card__preview-name--theme-dark {
  color: #d5e4ff;
  text-shadow: 0 0 10px rgba(110, 168, 254, 0.28);
}

.cosmetics-shop__preview-name--theme-neon,
.cosmetics-card__preview-name--theme-neon {
  color: #7affd9;
  text-shadow: 0 0 12px rgba(22, 240, 200, 0.48);
}

.cosmetics-shop__preview-badge--badge-star,
.cosmetics-card__preview-badge--badge-star {
  background: radial-gradient(circle at 30% 30%, rgba(255, 240, 171, 0.95), rgba(255, 190, 71, 0.88));
}

.cosmetics-shop__preview-badge--badge-flame,
.cosmetics-card__preview-badge--badge-flame {
  background: radial-gradient(circle at 30% 30%, rgba(255, 181, 120, 0.95), rgba(255, 91, 91, 0.88));
}

.cosmetics-shop__preview-badge--default,
.cosmetics-card__preview-badge--default {
  background: rgba(255, 255, 255, 0.12);
}

.cosmetics-shop__preview-name--theme-aqua,
.cosmetics-card__preview-name--theme-aqua {
  color: #8fe9ff;
  text-shadow: 0 0 12px rgba(53, 217, 255, 0.45);
}

.cosmetics-shop__preview-name--theme-gold,
.cosmetics-card__preview-name--theme-gold {
  background: linear-gradient(92deg, #fff1c2 0%, #ffcf52 45%, #e0a21b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-shop__preview-name--theme-fire,
.cosmetics-card__preview-name--theme-fire {
  background: linear-gradient(92deg, #ffd56b 0%, #ff7a3d 50%, #ff3d57 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-shop__preview-name--theme-rainbow,
.cosmetics-card__preview-name--theme-rainbow {
  background: linear-gradient(92deg, #ff5ec4 0%, #ffd23d 30%, #5effa6 55%, #35d9ff 78%, #b06bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-preview--frame-emerald {
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #2ecc71, 0 0 10px rgba(46, 204, 113, 0.3);
}

.cosmetics-preview--frame-ruby {
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #e0245e, 0 0 10px rgba(224, 36, 94, 0.32);
}

.cosmetics-preview--frame-cosmic {
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #8a5bff, 0 0 12px rgba(176, 107, 255, 0.35);
}

.cosmetics-preview--frame-ice {
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #7fd8ff, inset 0 0 0 6px rgba(255, 255, 255, 0.4), 0 0 12px rgba(127, 216, 255, 0.4);
}

.cosmetics-preview--frame-lava {
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #ff6a2b, inset 0 0 12px rgba(255, 178, 62, 0.55), 0 0 14px rgba(255, 106, 43, 0.45);
}

.cosmetics-preview--frame-galaxy {
  border: 4px solid transparent;
  border-radius: 50%;
  background: linear-gradient(#242350, #242350) padding-box, conic-gradient(from 40deg, #35d9ff, #8a5bff, #ff5ec4, #ffd166, #35d9ff) border-box;
  box-shadow: 0 0 14px rgba(138, 91, 255, 0.45);
}

.cosmetics-preview--frame-royal {
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #7f29fa, inset 0 0 0 7px rgba(255, 209, 102, 0.9), 0 0 16px rgba(127, 41, 250, 0.5);
}

.cosmetics-shop__preview-name--theme-ice,
.cosmetics-card__preview-name--theme-ice {
  background: linear-gradient(92deg, #eafcff 0%, #9fe8ff 55%, #4db8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-shop__preview-name--theme-candy,
.cosmetics-card__preview-name--theme-candy {
  background: linear-gradient(92deg, #ffc6e0 0%, #ff8fb8 45%, #ffb36b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-shop__preview-name--theme-emerald,
.cosmetics-card__preview-name--theme-emerald {
  background: linear-gradient(92deg, #d7ffe9 0%, #5be584 50%, #12a35a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-shop__preview-name--theme-galaxy,
.cosmetics-card__preview-name--theme-galaxy {
  background: linear-gradient(92deg, #8fd3ff 0%, #8a5bff 40%, #ff5ec4 75%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cosmetics-shop__preview-name--theme-royal,
.cosmetics-card__preview-name--theme-royal {
  background: linear-gradient(92deg, #e8c8ff 0%, #a55bff 45%, #ffd166 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .cosmetics-shop__preview-badge {
    animation: none;
  }
}
@media (max-width: 1100px) {
  .cosmetics-shop__content, .cosmetics-shop__collection-hero {
    grid-template-columns: 1fr;
  }
  .cosmetics-shop__preview {
    min-height: auto;
  }
}
@media (max-width: 920px) {
  .cosmetics-shop__hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cosmetics-shop__hero-art {
    display: none;
  }
  .cosmetics-shop__balance {
    position: static;
    width: fit-content;
  }
  .cosmetics-shop__tabs {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  .cosmetics-shop__tab {
    flex: 1 1 12rem;
  }
  .cosmetics-shop__content {
    grid-template-columns: 1fr;
  }
  .cosmetics-shop__preview {
    order: -1;
  }
  .cosmetics-shop__grid {
    grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr));
  }
}
@media (max-width: 640px) {
  .modal.student-shop-modal {
    padding: 0.2rem;
  }
  .modal.student-shop-modal .student-shop-modal__dialog {
    width: calc(100vw - 0.4rem);
    max-height: calc(100dvh - 0.4rem);
  }
  .cosmetics-shop {
    min-height: calc(100dvh - 0.4rem);
    padding: 1rem;
    border-radius: 1.2rem;
  }
  .cosmetics-shop__title {
    font-size: 2.05rem;
  }
  .cosmetics-shop__title-row, .cosmetics-shop__category-bar, .cosmetics-shop__current-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .cosmetics-shop__title-row, .cosmetics-shop__category-bar, .cosmetics-shop__tabs, .cosmetics-shop__category-tabs {
    align-items: stretch;
  }
  .cosmetics-shop__balance {
    width: 100%;
  }
  .cosmetics-shop__category, .cosmetics-shop__tab {
    width: 100%;
    min-width: 0;
  }
  .cosmetics-shop__rarity {
    width: 100%;
  }
  .cosmetics-shop__rarity-button {
    width: 100%;
    justify-content: center;
  }
  .cosmetics-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cosmetics-shop__collection-profile, .cosmetics-shop__current {
    padding: 1rem;
  }
}
.modal.student-shop-modal {
  padding: 0.0625rem;
  background: rgba(10, 8, 32, 0.72);
}
.modal.student-shop-modal .student-shop-modal__dialog {
  width: min(55rem, 100vw - 0.125rem);
  max-height: min(43.5625rem, 100dvh - 0.125rem);
  border: 0;
  border-radius: 1.5rem;
  background: transparent;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.42);
  overflow: visible;
}
.modal.student-shop-modal .modal__body {
  padding: 0;
  overflow: visible;
}
.modal.student-shop-modal .student-shop-modal__frame {
  display: block;
  border-radius: 1.5rem;
  overflow: hidden;
}
.modal.student-shop-modal .student-shop-modal__placeholder {
  min-height: min(43.5625rem, 100dvh - 0.125rem);
  border-radius: 1.5rem;
  background: #242350;
}

.cosmetics-shop {
  position: relative;
  width: 100%;
  min-height: min(43.5625rem, 100dvh - 0.125rem);
  margin: 0;
  padding: 2rem 2rem 0.85rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.46);
  border-radius: 1.5rem;
  background: radial-gradient(circle at 66% 52%, rgba(111, 81, 177, 0.2), transparent 16rem), #242350;
  color: #fff;
  overflow: hidden;
}
.cosmetics-shop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(/assets/student_dashboard/daily_chest_modal/paws-340b7659c842d4d92c24998614ac9433b6b765f3c74a12f26af3e4230098575a.png);
  background-size: 24rem 16rem;
  background-repeat: repeat;
  opacity: 0.2;
  pointer-events: none;
}
.cosmetics-shop > * {
  position: relative;
  z-index: 1;
}
.cosmetics-shop__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  align-items: start;
  gap: 1rem;
  min-height: 4.85rem;
  margin: 0 0 1.15rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.cosmetics-shop__hero::after {
  display: none;
}
.cosmetics-shop__hero-main {
  position: static;
  z-index: 2;
  display: block;
  min-width: 0;
}
.cosmetics-shop__title-row {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  max-width: 33rem;
}
.cosmetics-shop__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex: 0 0 4rem;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 0.5rem 0.65rem rgba(0, 0, 0, 0.2));
}
.cosmetics-shop__title-icon-img {
  display: block;
  width: 3.55rem;
  height: 3.55rem;
  object-fit: contain;
}
.cosmetics-shop__title {
  margin: 0;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: clamp(2rem, 4.15vw, 2.72rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.cosmetics-shop__subtitle {
  margin: 0.18rem 0 0;
  max-width: 33rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.2;
}
.cosmetics-shop__balance {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.25rem;
  padding: 0.32rem 0.45rem 0.32rem 0.65rem;
  border: 0;
  border-radius: 0.7rem;
  background: rgba(29, 28, 73, 0.82);
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.05);
  overflow: visible;
  white-space: nowrap;
}
.cosmetics-shop__balance::before, .cosmetics-shop__balance::after {
  display: none;
}
.cosmetics-shop__balance-coin {
  position: static;
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 1.4rem;
  opacity: 1;
}
.cosmetics-shop__balance-value {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__balance-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #8A4FFF, #6D2BFF);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__hero-art {
  position: relative;
  z-index: 2;
  min-height: 4.85rem;
  pointer-events: none;
}
.cosmetics-shop__hero-img {
  position: absolute;
  right: 6.15rem;
  top: -1.05rem;
  bottom: auto;
  display: block;
  width: 9.9rem;
  height: auto;
  filter: drop-shadow(0 1rem 1.25rem rgba(0, 0, 0, 0.28));
}
.cosmetics-shop__tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0.1875rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.11);
  border-radius: 0.5rem;
  background: rgba(35, 34, 82, 0.52);
}
.cosmetics-shop__tab {
  min-width: 8.1rem;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 0.42rem;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__tab.is-active {
  background: linear-gradient(90deg, #D70DBA 0%, #E79542 100%);
  box-shadow: none;
}
.cosmetics-shop__panels {
  margin: 0;
}
.cosmetics-shop__category-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.9rem;
  margin: 0 0 0.75rem;
  padding: 0.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.11);
  border-radius: 0.5rem;
  background: rgba(35, 34, 82, 0.52);
}
.cosmetics-shop__category-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.cosmetics-shop__category {
  min-width: 8.1rem;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 0.42rem;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}
.cosmetics-shop__category.is-active {
  background: linear-gradient(90deg, #D70DBA 0%, #E79542 100%);
}
.cosmetics-shop__rarity {
  position: relative;
  flex: 0 0 auto;
  padding: 0;
}
.cosmetics-shop__rarity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 0.42rem;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.cosmetics-shop__rarity-label {
  text-transform: lowercase;
}
.cosmetics-shop__rarity-chevron {
  font-size: 1.15rem;
  line-height: 1;
}
.cosmetics-shop__rarity-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.25rem);
  right: 0.05rem;
  display: none;
  width: 9.85rem;
  padding: 0;
  border-radius: 0.5rem;
  background: rgba(73, 72, 121, 0.97);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.cosmetics-shop__rarity-menu.is-open {
  display: flex;
  flex-direction: column;
}
.cosmetics-shop__rarity-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.82rem;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.04);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.cosmetics-shop__rarity-option.is-active::after {
  content: "✓";
  font-size: 1.35rem;
  line-height: 1;
}
.cosmetics-shop__content {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(18rem, 1fr);
  gap: 1.18rem;
  min-height: 0;
}
.cosmetics-shop__content--collection {
  grid-template-columns: 1fr;
}
.cosmetics-shop__catalog {
  min-width: 0;
  max-height: 25.1rem;
  padding-right: 0.9rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #F000CE rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog::-webkit-scrollbar {
  width: 0.34rem;
}
.cosmetics-shop__catalog::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.cosmetics-shop__catalog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #F000CE, #009E7A);
}
.cosmetics-shop__collection-grid {
  max-height: 22rem;
}
.cosmetics-shop__group {
  display: none;
  margin: 0;
}
.cosmetics-shop__group.is-active {
  display: block;
}
.cosmetics-shop__group-title {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cosmetics-shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.cosmetics-shop__content--collection .cosmetics-shop__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.cosmetics-shop__preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  min-width: 0;
  min-height: 25.1rem;
  padding: 1.25rem 0 0.5rem;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.cosmetics-shop__preview::before {
  display: none;
}
.cosmetics-shop__preview--collection {
  display: none;
}
.cosmetics-shop__preview-title, .cosmetics-shop__preview-caption, .cosmetics-shop__preview-name {
  position: relative;
  z-index: 1;
}
.cosmetics-shop__preview-title {
  align-self: flex-start;
  margin-left: 2.1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 900;
}
.cosmetics-shop__preview-stage {
  position: relative;
  z-index: 1;
  width: min(17.3rem, 100%);
  padding-top: 0;
}
.cosmetics-shop__preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(17.3rem, 100%);
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0.85rem 1.2rem rgba(0, 0, 0, 0.26));
}
.cosmetics-shop__preview-avatar {
  display: block;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-shop__preview-badge {
  position: absolute;
  right: 0.4rem;
  bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.4rem;
  box-shadow: 0 0.875rem 1.5rem rgba(0, 0, 0, 0.22);
}
.cosmetics-shop__preview-name {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 1.7rem;
  line-height: 1;
  text-align: center;
}
.cosmetics-shop__preview-caption {
  margin: auto 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.cosmetics-shop__collection-hero {
  display: grid;
  grid-template-columns: minmax(0, 19.7rem) minmax(0, 18.6rem);
  gap: 0.55rem;
  max-width: 39.5rem;
  margin: 0 0 0.75rem;
}
.cosmetics-shop__collection-profile, .cosmetics-shop__current {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.95rem;
  padding: 0.75rem 1rem;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, rgba(43, 43, 95, 0.64), rgba(40, 39, 91, 0.5));
}
.cosmetics-shop__collection-profile-avatar {
  position: relative;
  flex: 0 0 auto;
}
.cosmetics-shop__collection-profile-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5.25rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cosmetics-shop__collection-profile-img {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-shop__collection-profile-badge {
  position: absolute;
  right: -0.1rem;
  bottom: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  font-size: 0.9rem;
}
.cosmetics-shop__collection-profile-name, .cosmetics-shop__current-title {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}
.cosmetics-shop__collection-profile-name {
  font-family: "DrukWideCyr Bold";
  font-size: 1.25rem;
  line-height: 1.05;
}
.cosmetics-shop__collection-profile-subtitle {
  display: none;
}
.cosmetics-shop__current {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.45rem;
}
.cosmetics-shop__current-grid {
  display: grid;
  grid-template-columns: 4rem minmax(7rem, 1fr) 3.2rem;
  align-items: center;
  gap: 1rem;
  width: 100%;
}
.cosmetics-shop__current-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.cosmetics-shop__current-item-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.cosmetics-shop__current-frame {
  width: 3.8rem;
  height: 3.8rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.cosmetics-shop__current-name {
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 1rem;
  line-height: 1.05;
}
.cosmetics-shop__current-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  font-size: 1.25rem;
}

.cosmetics-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-height: 12.25rem;
  padding: 0.42rem 0.45rem 0.38rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.45rem;
  background: rgba(57, 55, 108, 0.92);
  color: #fff;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cosmetics-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.18);
}
.cosmetics-card.is-selected {
  border-color: #F000CE;
  box-shadow: inset 0 0 0 0.0625rem #F000CE;
}
.cosmetics-card--common, .cosmetics-card--uncommon, .cosmetics-card.is-owned {
  border-color: transparent;
}
.cosmetics-card--rare, .cosmetics-card--epic, .cosmetics-card--legendary {
  border-color: transparent;
}
.cosmetics-card__selected-mark {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #F000CE;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}
.cosmetics-card__rarity {
  align-self: flex-start;
  max-width: calc(100% - 1.4rem);
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cosmetics-card__rarity--common, .cosmetics-card__rarity--uncommon {
  background: rgba(95, 174, 145, 0.88);
}
.cosmetics-card__rarity--rare {
  background: rgba(81, 72, 216, 0.88);
}
.cosmetics-card__rarity--epic {
  background: rgba(197, 40, 163, 0.88);
}
.cosmetics-card__rarity--legendary {
  background: rgba(182, 124, 42, 0.88);
}
.cosmetics-card__preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 6.25rem;
  margin-top: -0.05rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0.625rem 0.875rem rgba(0, 0, 0, 0.22));
}
.cosmetics-card__preview--theme {
  border-radius: 0.5rem;
  background-color: rgba(21, 22, 59, 0.58);
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
}
.cosmetics-card__preview--badge {
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(21, 22, 59, 0.58), rgba(31, 32, 78, 0.85));
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
}
.cosmetics-card__preview-avatar {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.cosmetics-card__preview-name {
  text-align: center;
  font-family: "DrukWideCyr Bold";
  font-size: 0.92rem;
  line-height: 1.08;
}
.cosmetics-card__preview-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.3rem;
}
.cosmetics-card__title {
  margin: 0;
  max-width: 100%;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.cosmetics-card__footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
}
.cosmetics-card__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  max-width: 100%;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cosmetics-card__price-coin {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
}
.cosmetics-card__buy, .cosmetics-card__equip {
  width: min(100%, 6.45rem);
  min-height: 1.35rem;
  padding: 0.2rem 0.5rem;
  border: 0;
  border-radius: 0.22rem;
  background: linear-gradient(90deg, #D70DBA 0%, #E79542 100%);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.cosmetics-card__equip {
  background: #28A7FF;
  text-transform: none;
}
.cosmetics-card__equip.is-equipped {
  background: linear-gradient(90deg, #D70DBA 0%, #E79542 100%);
}

@media (max-width: 920px) {
  .cosmetics-shop {
    min-height: calc(100dvh - 0.125rem);
    padding: 1.25rem;
    overflow-y: auto;
  }
  .cosmetics-shop__hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cosmetics-shop__hero-art {
    display: none;
  }
  .cosmetics-shop__title {
    white-space: normal;
  }
  .cosmetics-shop__balance {
    position: static;
    width: fit-content;
    margin-top: 0.75rem;
  }
  .cosmetics-shop__tabs, .cosmetics-shop__category-bar, .cosmetics-shop__category-tabs {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }
  .cosmetics-shop__tab, .cosmetics-shop__category, .cosmetics-shop__rarity, .cosmetics-shop__rarity-button {
    width: 100%;
  }
  .cosmetics-shop__content, .cosmetics-shop__content--collection, .cosmetics-shop__collection-hero {
    grid-template-columns: 1fr;
  }
  .cosmetics-shop__preview {
    display: none;
  }
  .cosmetics-shop__grid, .cosmetics-shop__content--collection .cosmetics-shop__grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  }
}
.modal.student-shop-modal .student-shop-modal__dialog {
  width: min(62rem, 100vw - 0.125rem);
}
.modal.student-shop-modal .student-shop-modal__placeholder {
  min-height: min(43.5625rem, 100dvh - 0.125rem);
}

.cosmetics-shop__hero {
  grid-template-columns: minmax(0, 1fr) 21rem;
  min-height: 5.8rem;
}
.cosmetics-shop__title-row {
  align-items: stretch;
  max-width: 100%;
}
.cosmetics-shop__title-icon {
  width: 4.75rem;
  height: 4.75rem;
  flex-basis: 4.75rem;
}
.cosmetics-shop__title-icon-img {
  width: 4.35rem;
  height: 4.35rem;
}
.cosmetics-shop__heading {
  text-align: left;
}
.cosmetics-shop__title {
  font-size: clamp(2rem, 3.55vw, 2.62rem);
  text-align: left;
}
.cosmetics-shop__subtitle {
  max-width: 35rem;
  text-align: left;
}
.cosmetics-shop__balance {
  right: 0.45rem;
}
.cosmetics-shop__hero-img {
  right: 6.95rem;
  width: 9.35rem;
}
.cosmetics-shop__purchase-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.cosmetics-shop__purchase-modal.is-hidden {
  display: none;
}
.cosmetics-shop__purchase-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 8, 34, 0.58);
  backdrop-filter: blur(0.12rem);
}
.cosmetics-shop__purchase-dialog {
  position: relative;
  z-index: 1;
  width: min(25rem, 100%);
  padding: 1.45rem 1.35rem 1.25rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(49, 48, 105, 0.98), rgba(34, 34, 80, 0.98));
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.38);
  color: #fff;
  text-align: center;
}
.cosmetics-shop__purchase-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}
.cosmetics-shop__purchase-title {
  margin: 0 2rem 0.7rem;
  color: #fff;
  font-family: "DrukWideCyr Bold";
  font-size: 1.2rem;
  line-height: 1.08;
}
.cosmetics-shop__purchase-text {
  margin: 0 auto 1rem;
  max-width: 18rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
.cosmetics-shop__purchase-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(24, 23, 65, 0.72);
  font-family: "DrukWideCyr Bold";
  font-size: 1.15rem;
  line-height: 1;
}
.cosmetics-shop__purchase-coin {
  width: 1.35rem;
  height: 1.35rem;
}
.cosmetics-shop__purchase-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.cosmetics-shop__purchase-cancel, .cosmetics-shop__purchase-confirm {
  min-height: 2.55rem;
  border: 0;
  border-radius: 0.55rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
}
.cosmetics-shop__purchase-cancel {
  background: rgba(255, 255, 255, 0.1);
}
.cosmetics-shop__purchase-confirm {
  background: linear-gradient(90deg, #D70DBA 0%, #E79542 100%);
}

@media (max-width: 920px) {
  .modal.student-shop-modal .student-shop-modal__dialog {
    width: calc(100vw - 0.4rem);
  }
  .cosmetics-shop__title-icon {
    width: 4rem;
    height: 4rem;
    flex-basis: 4rem;
  }
  .cosmetics-shop__title-icon-img {
    width: 3.75rem;
    height: 3.75rem;
  }
}
.profile__content--laboratory {
  max-width: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.profile__content--laboratory .laboratory-header {
  gap: 1rem !important;
  min-height: 5.5rem;
  padding: 1.25rem 1.5rem;
  justify-content: center;
}
.profile__content--laboratory .laboratory-header__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 3rem;
}
.profile__content--laboratory .laboratory-header__title {
  margin: 0;
  text-align: center;
  line-height: 1.1;
}
.profile__content--laboratory .laboratory-header__aside {
  margin-left: 0;
  justify-content: flex-end;
}
.profile__content--laboratory .laboratory-header__logo {
  width: auto;
  max-width: clamp(4.5rem, 20vw, 6.5rem);
  max-height: 1.75rem;
}
.profile__content--laboratory .laboratory-slider__wrapper {
  min-width: 0;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-container {
  overflow: hidden;
  padding-bottom: 2.75rem;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-container__header {
  overflow: visible;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-wrapper {
  align-items: stretch;
  justify-content: flex-start !important;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-wrapper:has(.laboratory-projects-empty-slide) {
  justify-content: center !important;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-container:not(.swiper-initialized) .swiper-wrapper {
  gap: 0.625rem;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-container:not(.swiper-initialized) .swiper-wrapper > .swiper-slide {
  flex: 0 0 calc((100% - 1.25rem) / 3);
  width: calc((100% - 1.25rem) / 3);
  max-width: calc((100% - 1.25rem) / 3);
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-slide {
  flex: 0 0 auto;
  height: auto;
}
.profile__content--laboratory .laboratory-slider__wrapper .swiper-pagination {
  margin-top: 1.25rem;
  padding-left: 0;
}
.profile__content--laboratory .laboratory-slider__wrapper .entity-card--blue {
  height: 100%;
  margin-bottom: 0;
}
.profile__content--laboratory .laboratory-slider__wrapper .laboratory-projects-empty-slide {
  width: min(32rem, 100%) !important;
  max-width: min(32rem, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 min(32rem, 100%) !important;
}
.profile__content--laboratory .laboratory-slider__wrapper .laboratory-projects-empty-state.empty-state {
  width: 100%;
  max-width: none;
  min-height: 16rem;
  margin-bottom: 0;
}
.profile__content--laboratory .laboratory-slider__wrapper--loading .swiper-container {
  pointer-events: none;
}
.profile__content--laboratory .laboratory-slider__wrapper--loading .swiper-pagination {
  display: none;
}
.profile__content--laboratory .laboratory-slider__skeleton {
  display: flex;
  align-items: stretch;
  gap: 0.625rem;
  transform: none !important;
}
.profile__content--laboratory .laboratory-slider__skeleton > .swiper-slide {
  flex: 0 0 calc((100% - 1.25rem) / 3);
  width: calc((100% - 1.25rem) / 3);
  max-width: calc((100% - 1.25rem) / 3);
}
.profile__content--laboratory .laboratory-project-card-skeleton {
  overflow: hidden;
  border-radius: 1.5rem;
  background: rgba(36, 34, 45, 0.94);
  animation: laboratorySkeletonFade 0.9s ease-in-out infinite alternate;
  animation-delay: var(--sk-delay, 0ms);
}
.profile__content--laboratory .laboratory-project-card-skeleton__image {
  height: clamp(10rem, 16vw, 18rem);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
}
.profile__content--laboratory .laboratory-project-card-skeleton__body {
  padding: 1rem;
}
.profile__content--laboratory .laboratory-project-card-skeleton__title {
  width: 45%;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.profile__content--laboratory .laboratory-project-card-skeleton__stats {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.profile__content--laboratory .laboratory-project-card-skeleton__stats span {
  width: 2.25rem;
  height: 0.875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.profile__content--laboratory .laboratory-trends__header,
.profile__content--laboratory .laboratory-sort__header {
  gap: 1rem !important;
  margin-bottom: 0.75rem;
  min-height: 4.75rem;
  padding: 1rem 1.25rem;
}
.profile__content--laboratory .laboratory-trends__row,
.profile__content--laboratory .laboratory-sort__row {
  align-items: center;
  row-gap: 0.75rem;
  column-gap: 0.75rem;
  min-height: 0;
}
.profile__content--laboratory .laboratory-trends__row {
  justify-content: space-between;
}
.profile__content--laboratory .laboratory-trends__title {
  margin: 0;
  line-height: 1.1;
}
.profile__content--laboratory .laboratory-trends__toggle,
.profile__content--laboratory .laboratory-sort__toggle {
  width: 100%;
}
.profile__content--laboratory .laboratory-trends__toggle .toggle-switch__item,
.profile__content--laboratory .laboratory-sort__toggle .toggle-switch__item {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 0.5rem 0.875rem;
}
.profile__content--laboratory .laboratory-trends__toggle {
  max-width: 22rem;
  margin-left: auto;
}
.profile__content--laboratory .laboratory-sort__row {
  justify-content: flex-end;
}
.profile__content--laboratory .laboratory-sort__toggle {
  max-width: 20rem;
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 999px) {
  .profile__content--laboratory .laboratory-slider__wrapper .swiper-container:not(.swiper-initialized) .swiper-wrapper > .swiper-slide,
  .profile__content--laboratory .laboratory-slider__wrapper .laboratory-slider__skeleton > .swiper-slide {
    flex-basis: calc((100% - 1.25rem) / 3);
    width: calc((100% - 1.25rem) / 3);
    max-width: calc((100% - 1.25rem) / 3);
  }
}
@media (max-width: 949px) {
  .profile__content--laboratory .laboratory-slider__wrapper .swiper-container:not(.swiper-initialized) .swiper-wrapper > .swiper-slide,
  .profile__content--laboratory .laboratory-slider__wrapper .laboratory-slider__skeleton > .swiper-slide {
    flex-basis: calc((100% - 0.625rem) / 2);
    width: calc((100% - 0.625rem) / 2);
    max-width: calc((100% - 0.625rem) / 2);
  }
}
@media (max-width: 767px) {
  .profile__content--laboratory .laboratory-slider__wrapper .swiper-container:not(.swiper-initialized) .swiper-wrapper > .swiper-slide,
  .profile__content--laboratory .laboratory-slider__wrapper .laboratory-slider__skeleton > .swiper-slide {
    flex-basis: 95.238%;
    width: 95.238%;
    max-width: 95.238%;
  }
}
@media (max-width: 768px) {
  .profile__content--laboratory {
    gap: 1.25rem;
  }
  .profile__content--laboratory .laboratory-header {
    min-height: 4.75rem;
    padding: 1rem 1rem;
  }
  .profile__content--laboratory .laboratory-header__row {
    gap: 0.5rem;
  }
  .profile__content--laboratory .laboratory-header__logo {
    max-width: 4.75rem;
    max-height: 1.5rem;
  }
  .profile__content--laboratory .laboratory-trends__header,
  .profile__content--laboratory .laboratory-sort__header {
    margin-bottom: 0.5rem;
    min-height: 4rem;
    padding: 0.75rem 0.875rem;
  }
  .profile__content--laboratory .laboratory-trends__row,
  .profile__content--laboratory .laboratory-sort__row {
    justify-content: flex-start;
  }
  .profile__content--laboratory .laboratory-trends__toggle,
  .profile__content--laboratory .laboratory-sort__toggle {
    max-width: 100%;
  }
  .profile__content--laboratory .laboratory-trends__toggle .toggle-switch__item,
  .profile__content--laboratory .laboratory-sort__toggle .toggle-switch__item {
    padding: 0.5rem 0.625rem;
    font-size: 0.95rem;
  }
  .profile__content--laboratory .laboratory-sort__toggle {
    margin-left: 0;
  }
  .profile__content--laboratory .laboratory-slider__wrapper .swiper-container {
    padding-bottom: 3rem;
  }
}

@keyframes laboratorySkeletonFade {
  from {
    opacity: 0.58;
  }
  to {
    opacity: 1;
  }
}
#profile.pages_support:has(.support-ops) {
  height: calc(100svh - var(--profiles-header-height, 4.5rem));
  min-height: 0;
}
#profile.pages_support:has(.support-ops) > turbo-frame {
  height: 100%;
  min-height: 0;
}

.support-ops {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(183, 201, 255, 0.06);
  border-radius: 1.9rem;
  background: linear-gradient(145deg, rgba(10, 14, 68, 0.98), rgba(48, 28, 118, 0.92));
  box-shadow: 0 34px 80px rgba(4, 4, 12, 0.38), inset 0 1px 0 rgba(183, 201, 255, 0.06);
}
.support-ops__sidebar {
  flex: 0 0 22rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(183, 201, 255, 0.07);
  background: linear-gradient(180deg, rgba(10, 15, 74, 0.99) 0%, rgba(18, 14, 72, 0.97) 100%);
  overflow: hidden;
}
.support-ops__header {
  flex: 0 0 auto;
  padding: 1.25rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid rgba(183, 201, 255, 0.06);
}
.support-ops__title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 1rem;
}
.support-ops__tabs {
  display: flex;
  gap: 0;
  margin: 0 -0.1rem;
}
.support-ops__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem 0.7rem;
  border-radius: 0.85rem 0.85rem 0 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
  position: relative;
}
.support-ops__tab:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(183, 201, 255, 0.04);
}
.support-ops__tab--active {
  background: rgba(183, 201, 255, 0.06);
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}
.support-ops__tab--active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #82a1ff, #8645D2);
}
.support-ops__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: rgba(183, 201, 255, 0.12);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  line-height: 1;
}
.support-ops__filters {
  display: flex;
  gap: 0.3rem;
  padding: 0.75rem 0 0.8rem;
  flex-wrap: wrap;
}
.support-ops__filter {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(183, 201, 255, 0.07);
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.support-ops__filter:hover {
  background: rgba(183, 201, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
}
.support-ops__filter--active {
  background: rgba(183, 201, 255, 0.08);
  border-color: rgba(183, 201, 255, 0.18);
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}
.support-ops__list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0 1rem;
}
.support-ops__list::-webkit-scrollbar {
  width: 4px;
}
.support-ops__list::-webkit-scrollbar-track {
  background: transparent;
}
.support-ops__list::-webkit-scrollbar-thumb {
  background: rgba(183, 201, 255, 0.08);
  border-radius: 2px;
}
.support-ops__panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at top right, rgba(108, 92, 255, 0.2), transparent 30%), radial-gradient(circle at bottom left, rgba(255, 140, 80, 0.09), transparent 28%), linear-gradient(180deg, rgba(18, 22, 82, 0.92), rgba(40, 28, 108, 0.88));
}
.support-ops__panel > turbo-frame {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.support-ops__welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  height: 100%;
  padding: 3rem 2rem;
  text-align: center;
}
.support-ops__welcome-icon {
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  background: rgba(183, 201, 255, 0.06);
  border: 1px solid rgba(183, 201, 255, 0.07);
  font-size: 2.2rem;
  line-height: 1;
}
.support-ops__welcome-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
}
.support-ops__welcome-text {
  max-width: 26rem;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.support-ops__empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.support-ops__empty-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: rgba(46, 199, 89, 0.1);
  border: 1px solid rgba(46, 199, 89, 0.18);
  font-size: 1.4rem;
  line-height: 1;
}
.support-ops__empty-text {
  color: rgba(255, 255, 255, 0.55);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.86rem;
  margin: 0;
}

.support-ops__card {
  position: relative;
  margin: 0.3rem 0.65rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.1rem;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}
.support-ops__card:hover {
  background: rgba(183, 201, 255, 0.05);
  border-color: rgba(183, 201, 255, 0.07);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(4, 7, 30, 0.18);
}
.support-ops__card--active {
  background: linear-gradient(135deg, rgba(86, 106, 245, 0.22), rgba(183, 201, 255, 0.07));
  border-color: rgba(143, 161, 255, 0.2);
}
.support-ops__card--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 0.22rem;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #82a1ff, #8645D2);
}
.support-ops__card--active:hover {
  background: linear-gradient(135deg, rgba(98, 118, 255, 0.26), rgba(183, 201, 255, 0.07));
}
.support-ops__card-link {
  display: block;
  padding: 0.85rem 1rem 0.55rem 1.25rem;
  text-decoration: none;
  color: inherit;
}
.support-ops__card-link:hover {
  color: inherit;
}
.support-ops__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.support-ops__card-name {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0.18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-ops__card--active .support-ops__card-name {
  color: #fff;
}
.support-ops__card-meta {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.32rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-ops__card-preview {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}
.support-ops__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1rem 0.85rem 1.25rem;
}
.support-ops__card-footer .button_to {
  margin: 0;
  flex: 0 0 auto;
}
.support-ops__card-owner {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.support-ops__card-time {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  color: rgba(183, 201, 255, 0.32);
  flex: 0 0 auto;
}
.support-ops__card-btn {
  flex: 0 0 auto;
  height: 1.8rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(183, 201, 255, 0.1);
  border-radius: 999px;
  background: rgba(183, 201, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.support-ops__card-btn:hover {
  color: #fff;
  transform: translateY(-1px);
}
.support-ops__card-btn--take {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.88), rgba(37, 99, 235, 0.94));
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
}
.support-ops__card-btn--release {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.9), rgba(190, 24, 93, 0.94));
  color: #fff;
  box-shadow: 0 10px 20px rgba(190, 24, 93, 0.24);
}
.support-ops__card-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.8rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  line-height: 1;
}
.support-ops__card-state--busy {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.support-ops__status {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  height: 1.45rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  line-height: 1;
}
.support-ops__status::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.support-ops__status--open {
  background: rgba(46, 182, 125, 0.14);
  color: rgb(52, 199, 89);
}
.support-ops__status--open::before {
  background: rgb(52, 199, 89);
}
.support-ops__status--pending {
  background: rgba(248, 151, 46, 0.14);
  color: #F8972E;
}
.support-ops__status--pending::before {
  background: #F8972E;
}
.support-ops__status--closed {
  background: rgba(160, 174, 192, 0.1);
  color: #A0AEC0;
}
.support-ops__status--closed::before {
  background: #A0AEC0;
}
.support-ops__status--archived {
  background: rgba(120, 119, 131, 0.1);
  color: #787783;
}
.support-ops__status--archived::before {
  background: #787783;
}

#profile.pages_support:has(.support-user) .profile-content-container {
  width: 100%;
  max-width: none;
}

.support-user {
  width: 100%;
  padding: 0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.support-user__online-dot {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #5eff9e;
  box-shadow: 0 0 0 0.25rem rgba(94, 255, 158, 0.1);
  flex: 0 0 auto;
}
.support-user__online-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.75rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.support-user__hero {
  position: relative;
  overflow: hidden;
  min-height: 18.6rem;
  margin-bottom: 1.9rem;
  padding: 2.55rem 3rem;
  border-radius: 1.55rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: radial-gradient(circle at 92% 95%, rgba(255, 255, 255, 0.16), transparent 28%), linear-gradient(120deg, #2630f5 0%, #3128ee 45%, #5628c4 100%);
  box-shadow: 0 28px 70px rgba(5, 8, 45, 0.34);
}
.support-user__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  opacity: 0.7;
  pointer-events: none;
}
.support-user__hero::after {
  content: "";
  position: absolute;
  inset: auto -7rem -7rem auto;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 64%);
  pointer-events: none;
}
.support-user__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.2rem;
  min-height: 100%;
}
.support-user__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 auto;
  max-width: 42rem;
}
.support-user__title {
  margin: 0.35rem 0 0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 3.2vw, 3.35rem);
  line-height: 1.03;
  letter-spacing: -0.055em;
}
.support-user__lead {
  max-width: 40rem;
  margin: 0.15rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
}
.support-user__lead strong {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}
.support-user__hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.support-user__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 3rem;
  padding: 0 1.45rem;
  border-radius: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.support-user__btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.support-user__btn--dark {
  background: #fff;
  color: #11132e;
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.9rem 1.8rem rgba(0, 0, 0, 0.22);
}
.support-user__btn--dark:hover {
  color: #11132e;
  box-shadow: 0 1.1rem 2.2rem rgba(0, 0, 0, 0.28);
}
.support-user__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.support-user__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.support-user__hero-stats {
  display: grid;
  gap: 0.75rem;
  width: min(17.5rem, 100%);
  flex: 0 0 17.5rem;
  margin-top: 0.15rem;
}
.support-user__stat-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: rgba(10, 11, 30, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.support-user__stat-icon {
  width: 2.45rem;
  height: 2.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 2.45rem;
}
.support-user__stat-body {
  min-width: 0;
}
.support-user__stat-value {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
}
.support-user__stat-label {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.68);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.support-user__channels-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}
.support-user__channels-heading {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  min-width: 0;
}
.support-user__channels-title {
  margin: 0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.support-user__channels-sub {
  color: rgba(255, 255, 255, 0.46);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
}
.support-user__channels-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.84rem;
  text-decoration: none;
}
.support-user__channels-all:hover {
  color: #fff;
}
.support-user__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2.6rem;
}
.support-user__channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 16.6rem;
  padding: 1.45rem;
  overflow: hidden;
  border-radius: 1.15rem;
  background: rgba(24, 27, 76, 0.78);
  border: 1px solid rgba(140, 160, 220, 0.18);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.support-user__channel-card:hover {
  transform: translateY(-2px);
  background: rgba(27, 31, 86, 0.88);
  border-color: rgba(140, 160, 220, 0.28);
}
.support-user__channel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.support-user__channel-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.82rem;
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.support-user__channel-icon--chat {
  color: #2dc1fd;
  background: rgba(74, 84, 255, 0.14);
  border: 1px solid rgba(74, 84, 255, 0.32);
}
.support-user__channel-icon--contacts {
  color: #b591ff;
  background: rgba(127, 41, 251, 0.14);
  border: 1px solid rgba(127, 41, 251, 0.32);
}
.support-user__channel-icon--hours {
  color: #2dc1fd;
  background: rgba(45, 193, 253, 0.12);
  border: 1px solid rgba(45, 193, 253, 0.3);
}
.support-user__channel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 1.45rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.support-user__channel-badge--online {
  color: #5eff9e;
  background: rgba(94, 255, 158, 0.1);
  border: 1px solid rgba(94, 255, 158, 0.28);
}
.support-user__channel-badge--default {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(140, 160, 220, 0.08);
  border: 1px solid rgba(140, 160, 220, 0.2);
}
.support-user__badge-dot {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.support-user__badge-dot--blue {
  background: currentColor;
}
.support-user__badge-dot--green {
  background: #5eff9e;
}
.support-user__channel-title {
  margin: 0 0 0.35rem;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.support-user__channel-text {
  margin: 0;
  color: rgba(213, 221, 255, 0.68);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.55;
}
.support-user__channel-text strong {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
}
.support-user__channel-operator, .support-user__contact-row, .support-user__schedule-row, .support-user__messenger {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(140, 160, 220, 0.16);
}
.support-user__channel-operator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.55rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
}
.support-user__operator-dot {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.46);
  flex: 0 0 auto;
}
.support-user__operator-status {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.support-user__channel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.75rem;
  margin-top: auto;
  border-radius: 0.78rem;
  background: #2630f5;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 0.7rem 1.5rem rgba(38, 48, 245, 0.28);
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}
.support-user__channel-cta:hover {
  transform: translateY(-1px);
  background: #4a54ff;
  color: #fff;
  box-shadow: 0 0.9rem 1.8rem rgba(38, 48, 245, 0.36);
}
.support-user__contact-rows, .support-user__schedule {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.support-user__contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.55rem;
  padding: 0.62rem 0.85rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
}
.support-user__contact-row-icon {
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.92rem;
  flex: 0 0 auto;
}
.support-user__contact-row-value {
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-user__contact-row-value:hover {
  color: #fff;
}
.support-user__contact-copy, .support-user__contact-row-tag {
  margin-left: auto;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.035em;
  line-height: 1;
  padding: 0.2rem;
  white-space: nowrap;
}
.support-user__contact-copy {
  cursor: pointer;
}
.support-user__contact-copy:hover {
  color: rgba(255, 255, 255, 0.82);
}
.support-user__messengers {
  display: flex;
  gap: 0.55rem;
  margin-top: auto;
}
.support-user__messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  flex: 1 1 0;
  height: 2.5rem;
  border-radius: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: none;
}
.support-user__messenger:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.support-user__schedule-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.62rem 0.85rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.74);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.84rem;
}
.support-user__schedule-row--today {
  background: rgba(45, 193, 253, 0.06);
  border-color: rgba(45, 193, 253, 0.28);
}
.support-user__schedule-day {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.74);
  flex: 0 0 auto;
}
.support-user__schedule-today-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.1rem;
  padding: 0 0.42rem;
  border-radius: 0.28rem;
  background: rgba(45, 193, 253, 0.14);
  color: #2dc1fd;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.support-user__schedule-time {
  margin-left: auto;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
}
.support-user__schedule-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.72rem;
  background: rgba(255, 122, 0, 0.07);
  border: 1px solid rgba(255, 122, 0, 0.22);
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
}

.sidebar-feedback-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  margin-left: auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #EA4DBC, #FF0061);
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(234, 77, 188, 0.35);
}

.feedback-section-heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.9rem 0.15rem;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.feedback-section-heading__title {
  margin: 0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.feedback-section-heading__subtitle {
  color: rgba(255, 255, 255, 0.46);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.86rem;
}

.feedback-section {
  display: grid;
  grid-template-columns: minmax(16.5rem, 18.6rem) minmax(0, 1fr);
  gap: 1rem 1.35rem;
  padding: 1.45rem;
  border-radius: 1.35rem;
  background: rgba(24, 27, 76, 0.78);
  border: 1px solid rgba(140, 160, 220, 0.18);
  box-shadow: 0 1.35rem 3.6rem rgba(5, 8, 45, 0.22);
}
.feedback-section__header {
  grid-column: 1/-1;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 0.2rem;
}
.feedback-section__title {
  margin: 0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.feedback-section__subtitle {
  color: rgba(255, 255, 255, 0.46);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.86rem;
}
.feedback-section__top {
  display: contents;
}
.feedback-section__children-col {
  grid-column: 1;
  grid-row: 1/span 5;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  min-width: 0;
  padding-right: 1.1rem;
  border-right: 1px solid rgba(140, 160, 220, 0.13);
}
.feedback-section__children-label {
  padding: 0.1rem 0.2rem 0.25rem;
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.feedback-section__children-sep {
  height: 1px;
  margin: 0.2rem 0 0.15rem;
  background: rgba(140, 160, 220, 0.16);
}
.feedback-section__selected-col, .feedback-section__categories, .feedback-section__form, .feedback-section__history {
  grid-column: 2;
  min-width: 0;
}
.feedback-section__selected-col {
  display: block;
}
.feedback-section__child-pick, .feedback-section__general-q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(140, 160, 220, 0.16);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.feedback-section__child-pick:hover, .feedback-section__general-q:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(140, 160, 220, 0.28);
}
.feedback-section__child-pick--active {
  background: rgba(74, 84, 255, 0.1);
  border-color: rgba(74, 84, 255, 0.45);
  box-shadow: inset 0 0 0 1px rgba(74, 84, 255, 0.25);
}
.feedback-section__child-pick-avatar, .feedback-section__selected-avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
}
.feedback-section__child-pick-avatar-img, .feedback-section__selected-avatar-img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.72rem !important;
  object-fit: cover;
}
.feedback-section__child-pick-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.feedback-section__child-pick-name {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-section__child-pick-meta {
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-section__child-pick-check {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2630f5;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  flex: 0 0 auto;
}
.feedback-section__add-child {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.7rem;
  border-radius: 0.78rem;
  border: 1px dashed rgba(140, 160, 220, 0.22);
  color: rgba(255, 255, 255, 0.72);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: none;
}
.feedback-section__add-child:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(140, 160, 220, 0.34);
  color: #fff;
}
.feedback-section__general-q {
  align-items: flex-start;
  background: rgba(45, 193, 253, 0.06);
  border-color: rgba(45, 193, 253, 0.28);
}
.feedback-section__general-q.feedback-section__child-pick--active {
  background: rgba(45, 193, 253, 0.1);
  border-color: rgba(45, 193, 253, 0.44);
}
.feedback-section__general-q-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  color: #2dc1fd;
  background: rgba(45, 193, 253, 0.12);
  border: 1px solid rgba(45, 193, 253, 0.3);
  font-size: 1rem;
  flex: 0 0 2.25rem;
}
.feedback-section__general-q-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.feedback-section__general-q-name {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
}
.feedback-section__general-q-desc {
  color: rgba(255, 255, 255, 0.58);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.42;
}
.feedback-section__selected-panel {
  display: flex;
  flex-direction: column;
}
.feedback-section__selected-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.05rem;
  padding: 0.9rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(140, 160, 220, 0.16);
}
.feedback-section__selected-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.feedback-section__selected-name {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-section__selected-detail {
  color: rgba(255, 255, 255, 0.46);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-section__selected-header-spacer {
  flex: 1 1 auto;
}
.feedback-section__selected-stats {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.feedback-section__selected-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0 0.75rem;
  border-radius: 0.55rem;
  background: rgba(140, 160, 220, 0.08);
  border: 1px solid rgba(140, 160, 220, 0.14);
  color: rgba(255, 255, 255, 0.6);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  white-space: nowrap;
}
.feedback-section__selected-stat-val {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}
.feedback-section__selected-stat-val--accent {
  color: #5eff9e;
}
.feedback-section__selected-stat-lbl {
  color: rgba(255, 255, 255, 0.52);
}
.feedback-section__categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}
.feedback-section__cat {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 5.7rem;
  padding: 1rem;
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(140, 160, 220, 0.16);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.feedback-section__cat:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(140, 160, 220, 0.28);
}
.feedback-section__cat--selected {
  background: rgba(74, 84, 255, 0.1);
  border-color: rgba(74, 84, 255, 0.45);
}
.feedback-section__cat-icon {
  width: 2.15rem;
  height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.66rem;
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 2.15rem;
  color: #2dc1fd;
  background: rgba(45, 193, 253, 0.12);
  border: 1px solid rgba(45, 193, 253, 0.28);
}
.feedback-section .feedback-section__cat--star .feedback-section__cat-icon,
.feedback-section .feedback-section__cat--idea .feedback-section__cat-icon {
  color: #ffc83c;
  background: rgba(255, 200, 60, 0.12);
  border-color: rgba(255, 200, 60, 0.22);
}
.feedback-section .feedback-section__cat--warn .feedback-section__cat-icon {
  color: #ff7a00;
  background: rgba(255, 122, 0, 0.12);
  border-color: rgba(255, 122, 0, 0.24);
}
.feedback-section .feedback-section__cat--report .feedback-section__cat-icon {
  color: #b591ff;
  background: rgba(127, 41, 251, 0.14);
  border-color: rgba(127, 41, 251, 0.28);
}
.feedback-section .feedback-section__cat--calendar .feedback-section__cat-icon {
  color: #2dc1fd;
  background: rgba(45, 193, 253, 0.12);
  border-color: rgba(45, 193, 253, 0.28);
}
.feedback-section__cat-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.feedback-section__cat-title {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.22;
}
.feedback-section__cat-desc {
  color: rgba(255, 255, 255, 0.46);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.74rem;
  line-height: 1.35;
}
.feedback-section__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  padding: 0.85rem 0.9rem 0.25rem;
}
.feedback-section__tag {
  display: inline-flex;
  align-items: center;
  height: 1.9rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: rgba(140, 160, 220, 0.08);
  border: 1px solid rgba(140, 160, 220, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.feedback-section__tag:hover {
  background: rgba(140, 160, 220, 0.12);
  color: #fff;
}
.feedback-section__tag--active {
  color: #82a1ff;
  background: rgba(74, 84, 255, 0.12);
  border-color: rgba(74, 84, 255, 0.28);
}
.feedback-section__tag--add {
  border-style: dashed;
}
.feedback-section__form {
  position: relative;
  margin: 0.05rem 0 0.15rem;
  overflow: hidden;
  border-radius: 0.95rem;
  background: rgba(11, 13, 48, 0.45);
  border: 1px solid rgba(140, 160, 220, 0.16);
}
.feedback-section__textarea {
  display: block;
  width: 100%;
  min-height: 6.4rem;
  padding: 0.8rem 1.05rem 1.05rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
}
.feedback-section__textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}
.feedback-section__hint {
  display: none;
}
.feedback-section__form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(140, 160, 220, 0.16);
}
.feedback-section__attach-icons, .feedback-section__form-right, .feedback-section__stars {
  display: flex;
  align-items: center;
}
.feedback-section__attach-icons {
  gap: 0.45rem;
}
.feedback-section__form-right {
  gap: 1rem;
  margin-left: auto;
}
.feedback-section__attach-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.feedback-section__attach-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
}
.feedback-section__stars {
  gap: 0.12rem;
}
.feedback-section__star {
  color: rgba(255, 255, 255, 0.15);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease;
}
.feedback-section__star--filled, .feedback-section__star:hover {
  color: #ffcc00;
}
.feedback-section__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.35rem;
  padding: 0 1rem;
  border-radius: 0.72rem;
  background: #2630f5;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.3rem rgba(38, 48, 245, 0.28);
  transition: transform 0.14s ease, background 0.14s ease;
}
.feedback-section__submit:hover {
  transform: translateY(-1px);
  background: #4a54ff;
  color: #fff;
}
.feedback-section__history {
  padding-top: 0.9rem;
  border-top: 0;
}
.feedback-section__history-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}
.feedback-section__history-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1rem;
}
.feedback-section__history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 0.5rem;
  background: rgba(140, 160, 220, 0.1);
  color: rgba(255, 255, 255, 0.62);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
}
.feedback-section__history-filters {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}
.feedback-section__history-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  padding: 0 0.72rem;
  border-radius: 0.58rem;
  background: rgba(140, 160, 220, 0.08);
  border: 1px solid rgba(140, 160, 220, 0.14);
  color: rgba(255, 255, 255, 0.5);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.feedback-section__history-filter:hover {
  background: rgba(140, 160, 220, 0.12);
  color: rgba(255, 255, 255, 0.76);
}
.feedback-section__history-filter--active {
  background: rgba(74, 84, 255, 0.18);
  color: #fff;
  border-color: rgba(74, 84, 255, 0.35);
}
.feedback-section__tickets {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.feedback-section__ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.88rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(140, 160, 220, 0.16);
  transition: background 0.14s ease, border-color 0.14s ease;
}
.feedback-section__ticket:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(140, 160, 220, 0.26);
}
.feedback-section__ticket-head {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  margin: 0;
}
.feedback-section__ticket-avatar {
  width: 2.15rem;
  height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.62rem;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.feedback-section__ticket-avatar--you {
  background: linear-gradient(135deg, #7f29fa, #2630f5);
}
.feedback-section__ticket-avatar--staff {
  background: linear-gradient(135deg, #2dc1fd, #2630f5);
}
.feedback-section__ticket-meta {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.feedback-section__ticket-title {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-section__ticket-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
}
.feedback-section__ticket-sender-badge {
  display: inline-flex;
  align-items: center;
  height: 1.12rem;
  padding: 0 0.38rem;
  border-radius: 0.32rem;
  background: rgba(74, 84, 255, 0.16);
  color: #82a1ff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.feedback-section__ticket-sender-badge--staff {
  color: #2dc1fd;
  background: rgba(45, 193, 253, 0.14);
}
.feedback-section__ticket-date {
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
}
.feedback-section__ticket-status {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  padding: 0 0.55rem;
  border-radius: 0.45rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.feedback-section__ticket-status--resolved, .feedback-section__ticket-status--read {
  color: #5eff9e;
  background: rgba(94, 255, 158, 0.1);
  border: 1px solid rgba(94, 255, 158, 0.24);
}
.feedback-section__ticket-status--pending {
  color: #2dc1fd;
  background: rgba(45, 193, 253, 0.1);
  border: 1px solid rgba(45, 193, 253, 0.24);
}
.feedback-section__ticket-status--review {
  color: #ff7a00;
  background: rgba(255, 122, 0, 0.1);
  border: 1px solid rgba(255, 122, 0, 0.24);
}
.feedback-section__ticket-body {
  grid-column: 1/-1;
  margin: 0 0 0 2.9rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.45;
}
.feedback-section__ticket-reply {
  grid-column: 1/-1;
  margin: 0.15rem 0 0 2.9rem;
  padding: 0.8rem 0.9rem;
  border-left: 2px solid rgba(45, 193, 253, 0.72);
  border-radius: 0.78rem;
  background: rgba(45, 193, 253, 0.08);
  border-top: 1px solid rgba(45, 193, 253, 0.12);
  border-right: 1px solid rgba(45, 193, 253, 0.12);
  border-bottom: 1px solid rgba(45, 193, 253, 0.12);
}
.feedback-section__ticket-reply-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.feedback-section__ticket-reply-name {
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
}
.feedback-section__ticket-reply-role {
  display: inline-flex;
  align-items: center;
  height: 1.05rem;
  padding: 0 0.36rem;
  border-radius: 0.28rem;
  background: rgba(45, 193, 253, 0.16);
  color: #2dc1fd;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.feedback-section__ticket-reply-date {
  color: rgba(255, 255, 255, 0.42);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.68rem;
}
.feedback-section__ticket-reply-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.45;
}
.feedback-section__tickets-empty {
  padding: 2rem 1.5rem;
  text-align: center;
}
.feedback-section__tickets-empty-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
}

@media (max-width: 1180px) {
  .feedback-section-heading {
    flex-direction: column;
    gap: 0.35rem;
  }
  .support-user__channels {
    grid-template-columns: 1fr;
  }
  .support-user__channel-card {
    min-height: 0;
  }
  .feedback-section {
    grid-template-columns: 1fr;
  }
  .feedback-section__children-col, .feedback-section__selected-col, .feedback-section__categories, .feedback-section__tags, .feedback-section__form, .feedback-section__history {
    grid-column: 1;
    grid-row: auto;
  }
  .feedback-section__top {
    display: block;
  }
  .feedback-section__children-col {
    margin-bottom: 1rem;
    padding-right: 0;
    border-right: 0;
  }
}
@media (max-width: 960px) {
  .support-ops {
    flex-direction: column;
    border-radius: 1.4rem;
  }
  .support-ops__sidebar {
    flex: 0 0 auto;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid rgba(183, 201, 255, 0.06);
  }
  .support-ops__list {
    max-height: 30vh;
  }
  .support-ops__panel {
    flex: 1 1 auto;
    min-height: 0;
  }
  .support-user__hero {
    padding: 1.8rem;
  }
  .support-user__hero-inner {
    flex-direction: column;
  }
  .support-user__hero-stats {
    width: 100%;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .support-user__channels-heading {
    flex-direction: column;
    gap: 0.35rem;
  }
  .feedback-section__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .support-user__hero {
    min-height: 0;
    padding: 1.45rem;
    border-radius: 1.15rem;
  }
  .support-user__title {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }
  .support-user__hero-buttons {
    flex-direction: column;
  }
  .support-user__btn {
    width: 100%;
  }
  .support-user__hero-stats {
    grid-template-columns: 1fr;
  }
  .support-user__channels-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .support-user__messengers {
    flex-direction: column;
  }
  .feedback-section {
    padding: 1rem;
    border-radius: 1.05rem;
  }
  .feedback-section__header {
    flex-direction: column;
    gap: 0.25rem;
  }
  .feedback-section__categories {
    grid-template-columns: 1fr;
  }
  .feedback-section__selected-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .feedback-section__selected-stats {
    width: 100%;
    justify-content: flex-start;
    margin-left: 3.6rem;
  }
  .feedback-section__form-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  .feedback-section__form-right {
    justify-content: space-between;
    margin-left: 0;
  }
  .feedback-section__history-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .feedback-section__history-filters {
    margin-left: 0;
  }
  .feedback-section__ticket {
    grid-template-columns: 1fr;
  }
  .feedback-section__ticket-status {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-left: 2.9rem;
  }
}
@media (max-width: 600px) {
  .support-ops {
    border-radius: 1.2rem;
  }
  .support-ops__card-link {
    padding: 0.75rem 0.85rem 0.75rem 1rem;
  }
  .support-ops__header {
    padding: 1rem 1rem 0;
  }
  .feedback-section__ticket-body, .feedback-section__ticket-reply, .feedback-section__ticket-status {
    margin-left: 0;
  }
}
#shop {
  overflow-x: clip;
  background-color: #121241;
}
#shop #main .page-image {
  bottom: -15%;
}
#shop #main .page-image--main {
  height: 70%;
}
#shop section#main .background__images-block.container {
  max-height: 310px;
  max-width: 100vw;
  height: 100vh;
  top: 18rem;
  overflow: hidden;
  position: absolute;
  padding: 0;
  left: 0;
}
#shop section#main .background__images-block.container .background__image__robot {
  margin-right: -4rem;
  height: 100%;
  top: initial;
  bottom: 0;
  max-height: initial;
}
#shop section#main .background__images-block.container .background__image__constructor {
  display: none;
}
#shop .catalog__categories {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.375rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.3) transparent;
}
#shop .catalog__categories::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#shop .catalog__categories::-webkit-scrollbar-track {
  background: transparent;
}
#shop .catalog__categories::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.3);
  border-radius: 3px;
  transition: background 0.3s ease-in-out;
}
#shop .catalog__categories::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.5);
}
#shop .catalog__categories--tag {
  display: flex;
  border: 1px solid #2630f5;
  border-radius: 100px;
  color: #fff;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: 0.3s background ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  #shop .catalog__categories--tag:hover {
    background: rgba(38, 48, 245, 0.2);
  }
}
.legal-page, #politika, #offerta {
  --legal-text: rgba(255, 255, 255, 0.92);
  --legal-muted: rgba(255, 255, 255, 0.72);
  --legal-border: rgba(255, 255, 255, 0.14);
  --legal-card-bg: rgba(255, 255, 255, 0.08);
  --legal-card-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
  --legal-link: #82a1ff;
  --legal-selection: rgba(38, 48, 245, 0.35);
  position: relative;
  overflow: hidden;
  background: radial-gradient(1100px 700px at 18% 12%, rgba(38, 48, 245, 0.22), rgba(38, 48, 245, 0) 60%), radial-gradient(1000px 650px at 82% 0%, rgba(234, 77, 188, 0.16), rgba(234, 77, 188, 0) 55%), radial-gradient(900px 700px at 80% 90%, rgba(255, 122, 0, 0.1), rgba(255, 122, 0, 0) 50%), #030305;
}
.legal-page::after, #politika::after, #offerta::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 25%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55) 70%);
}
.legal-page--paper {
  --legal-text: #1E1D30;
  --legal-muted: rgba(30, 29, 48, 0.72);
  --legal-border: rgba(30, 29, 48, 0.16);
  --legal-card-bg: rgba(255, 255, 255, 0.96);
  --legal-card-shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
  --legal-link: #2630f5;
  --legal-selection: rgba(38, 48, 245, 0.18);
}
.legal-page--solid {
  --legal-card-bg: #0b0b12;
  --legal-border: rgba(255, 255, 255, 0.10);
}
.legal-page__card {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  max-width: 980px;
  padding: clamp(1.25rem, 2.2vw, 2.75rem);
  border-radius: 24px;
  border: 1px solid var(--legal-border);
  background: var(--legal-card-bg);
  box-shadow: var(--legal-card-shadow);
}
.legal-page--glass .legal-page__card {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.legal-page__content {
  color: var(--legal-text);
  font-family: "Inter Regular", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.legal-page__content ::selection {
  background: var(--legal-selection);
}
.legal-page__content :where(div, p, span, font, li, td, th, blockquote, a, strong, em) {
  color: inherit !important;
}
.legal-page__content :where(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 0.9rem;
  color: inherit;
  font-family: "Gilory Bold", "Inter Bold", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.2;
  letter-spacing: 0.015em;
}
.legal-page__content h1 {
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
  margin-bottom: 1.2rem;
}
.legal-page__content h2 {
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  margin-top: 1.6rem;
}
.legal-page__content h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  margin-top: 1.2rem;
}
.legal-page__content p {
  margin: 0 0 1rem;
}
.legal-page__content :where(ul, ol) {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.legal-page__content li {
  margin: 0.35rem 0;
}
.legal-page__content blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--legal-border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.legal-page__content hr {
  border: none;
  height: 1px;
  background: var(--legal-border);
  margin: 1.25rem 0;
}
.legal-page__content a {
  color: var(--legal-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .legal-page__content a:hover {
    opacity: 0.9;
  }
}
.legal-page__content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--legal-border);
  border-radius: 14px;
}
.legal-page__content th, .legal-page__content td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--legal-border);
  vertical-align: top;
  min-width: 160px;
}
.legal-page__content th {
  font-family: "Inter Medium", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: rgba(255, 255, 255, 0.06);
}
.legal-page__content img, .legal-page__content video, .legal-page__content iframe {
  max-width: 100%;
  height: auto;
}
.legal-page__content pre {
  overflow: auto;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--legal-border);
  background: rgba(255, 255, 255, 0.05);
}
.legal-page__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  padding: 0.15em 0.35em;
  border-radius: 8px;
  border: 1px solid var(--legal-border);
  background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 576px) {
  .legal-page__card {
    border-radius: 18px;
    padding: 1.25rem;
  }
  .legal-page__content {
    font-size: 15px;
    line-height: 1.72;
  }
}

@media print {
  .legal-page, #politika, #offerta {
    background: #fff !important;
  }
  .legal-page::after, #politika::after, #offerta::after {
    display: none;
  }
  .legal-page__card {
    box-shadow: none;
    border: 1px solid #e6e6e6;
    background: #fff;
  }
  .legal-page__content {
    color: #000 !important;
  }
  .legal-page__content :where(div, p, span, font, li, td, th, blockquote, a, strong, em) {
    color: inherit !important;
  }
  .legal-page__content a {
    color: #000;
  }
}
#thank-you .background {
  height: 100%;
}
#thank-you .page-image {
  height: 75%;
  bottom: 0;
  right: 10%;
}
#thank-you .container .info-block {
  height: 100%;
}
#thank-you .container .info-block .title-large {
  max-width: 700px;
}
@media (max-width: 1440px) {
  #thank-you .page-image {
    height: 55%;
  }
}
@media (max-width: 1280px) {
  #thank-you .page-image {
    height: 50%;
  }
}
@media (max-width: 1023px) {
  #thank-you #thank-you .page-image {
    right: 5%;
  }
}
@media (max-width: 580px) {
  #thank-you .page-image {
    right: -15%;
  }
  #thank-you .container .info-block .actions {
    display: flex;
    width: 100%;
    margin-top: auto;
  }
  #thank-you .container .info-block .actions a {
    width: 100%;
  }
}

.faq-page {
  position: relative;
  min-height: 100vh;
  padding: 2rem 0 3rem;
  overflow: hidden;
  isolation: isolate;
  background-color: #05060f;
  background-image: radial-gradient(circle at 12% 14%, rgba(72, 111, 255, 0.26), transparent 0 28%), radial-gradient(circle at 84% 12%, rgba(155, 81, 224, 0.22), transparent 0 20%), radial-gradient(circle at 78% 70%, rgba(255, 122, 0, 0.14), transparent 0 18%), radial-gradient(circle at 18% 82%, rgba(33, 212, 253, 0.08), transparent 0 16%), linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 35%), linear-gradient(180deg, #05060f 0%, #090b16 42%, #05060d 100%);
}
.faq-page::before, .faq-page::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: -1;
}
.faq-page::before {
  top: -10rem;
  left: -8rem;
  width: 30rem;
  height: 30rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(85, 111, 255, 0.26) 0%, rgba(85, 111, 255, 0.08) 36%, rgba(85, 111, 255, 0) 72%);
  filter: blur(18px);
}
.faq-page::after {
  right: -12rem;
  bottom: -2rem;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.16) 0%, rgba(168, 85, 247, 0.12) 38%, rgba(255, 122, 0, 0) 72%);
  filter: blur(22px);
}
.faq-page .container {
  position: relative;
  z-index: 1;
}
.faq-page .container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.34;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0.9), transparent 76%);
}
.faq-page .container::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 5rem;
  bottom: 2rem;
  pointer-events: none;
  z-index: -1;
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(88, 104, 255, 0.08), rgba(88, 104, 255, 0) 28%, rgba(255, 255, 255, 0) 72%, rgba(168, 85, 247, 0.07) 100%);
  filter: blur(6px);
}
.faq-page__layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  position: relative;
}
.faq-page__layout::before {
  content: "";
  position: absolute;
  inset: -1rem -1rem auto -1rem;
  height: 16rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.08), transparent 0 12%), radial-gradient(circle at 68% 18%, rgba(88, 166, 255, 0.12), transparent 0 18%), radial-gradient(circle at 82% 62%, rgba(255, 122, 0, 0.1), transparent 0 14%);
  filter: blur(2px);
}
.faq-page__sidebar, .faq-page__card {
  position: relative;
  background: radial-gradient(circle at top right, rgba(88, 104, 255, 0.08), transparent 0 28%), linear-gradient(180deg, rgba(16, 19, 33, 0.88) 0%, rgba(9, 11, 22, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.faq-page__sidebar::before, .faq-page__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 30%, rgba(85, 111, 255, 0.2) 68%, rgba(255, 122, 0, 0.12) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.faq-page__sidebar {
  position: sticky;
  top: 2rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-page__content, .faq-page__panel, .faq-page__card {
  min-width: 0;
  align-self: start;
}
.faq-page__card {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.faq-page__section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.faq-page__panel-title, .faq-page__instructions-title, .faq-page__meta-title, .faq-page__video-title {
  margin: 0;
}
.faq-page__description {
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
.faq-page__menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-page__menu-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  color: #fff;
  padding: 0.95rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.faq-page__menu-item:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.faq-page__menu-item.is-active {
  background: linear-gradient(135deg, rgba(38, 48, 245, 0.46), rgba(134, 69, 210, 0.42) 55%, rgba(255, 122, 0, 0.3));
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(4px);
  box-shadow: 0 16px 32px rgba(20, 26, 74, 0.36);
}
.faq-page__menu-label {
  display: block;
  font-weight: 700;
}
.faq-page__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.faq-page__meta-block, .faq-page__video-block, .faq-page__instructions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-page__meta-heading, .faq-page__video-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.faq-page__meta-subtitle, .faq-page__video-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
}
.faq-page__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.faq-page__meta-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  min-width: 0;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.faq-page__meta-card--site {
  border-color: rgba(88, 166, 255, 0.28);
}
.faq-page__meta-card--site .faq-page__meta-surface {
  border-color: rgba(88, 166, 255, 0.26);
  background: linear-gradient(180deg, rgba(18, 28, 56, 0.92), rgba(11, 16, 31, 0.96));
}
.faq-page__meta-card--login {
  border-color: rgba(147, 51, 234, 0.24);
}
.faq-page__meta-card--login .faq-page__meta-surface {
  border-color: rgba(147, 51, 234, 0.24);
  background: linear-gradient(180deg, rgba(33, 16, 57, 0.9), rgba(15, 11, 29, 0.96));
}
.faq-page__meta-card--password {
  border-color: rgba(255, 122, 0, 0.22);
}
.faq-page__meta-card--password .faq-page__meta-surface {
  border-color: rgba(255, 122, 0, 0.24);
  background: linear-gradient(180deg, rgba(52, 24, 10, 0.9), rgba(20, 11, 8, 0.96));
}
.faq-page__meta-card--extra {
  border-color: rgba(16, 185, 129, 0.24);
}
.faq-page__meta-card--extra .faq-page__meta-surface {
  border-color: rgba(16, 185, 129, 0.24);
  background: linear-gradient(180deg, rgba(11, 43, 34, 0.92), rgba(8, 18, 16, 0.96));
}
.faq-page__meta-label {
  color: rgba(255, 255, 255, 0.68);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.faq-page__meta-surface {
  min-height: 4.25rem;
  padding: 0.9rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  background: rgba(9, 12, 25, 0.84);
}
.faq-page__meta-link, .faq-page__meta-value {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.faq-page__meta-link {
  text-decoration: none;
}
.faq-page__meta-link:hover {
  text-decoration: underline;
}
.faq-page__video {
  width: 100%;
}
.faq-page__video-frame, .faq-page__video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.faq-page__video-frame {
  display: block;
  background: #050816;
}
.faq-page__video-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.76);
  background: linear-gradient(180deg, rgba(8, 10, 28, 0.88), rgba(11, 14, 38, 0.7));
}
.faq-page__instructions-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-page__instructions-list li {
  color: rgba(255, 255, 255, 0.84);
}
@media (max-width: 900px) {
  .faq-page {
    min-height: auto;
    padding-top: 1.25rem;
  }
  .faq-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-page__sidebar {
    position: static;
    top: auto;
  }
  .faq-page__sidebar .faq-page__menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .faq-page {
    padding-bottom: 2rem;
  }
  .faq-page__sidebar, .faq-page__card {
    padding: 1rem;
    border-radius: 1.25rem;
  }
  .faq-page__sidebar .faq-page__menu {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-page__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-page__meta-link, .faq-page__meta-value {
    font-size: 1.05rem;
  }
}

body.tests {
  background-image: url(/assets/shared/backgrounds/tests-7821adce6258e132ffb3a17a8801031b5dd942ea92f017894c1b7ec705ebc196.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .tests .test-purpose__card:nth-child(1) .test-purpose__card-text, .tests .test-purpose__card:nth-last-child(2) .test-purpose__card-text {
    max-width: 100%;
  }
}

.test__header {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-block: 10svh 20svh;
}
.test__tags {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.test__title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70%;
  margin: 0 auto;
}
.test__description {
  display: flex;
  justify-content: space-between;
}
.test__description-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.test__description-item:nth-child(1) {
  flex: 0 0 20%;
}
.test__description-item:nth-child(2) {
  display: flex;
  flex-direction: column;
  transform: rotate(-2.5deg);
}
.test__description-item:nth-child(2) p {
  width: fit-content;
  background-color: #F63972;
  padding: 0.2rem 0.6rem;
}
.test__description-item:nth-child(2) p:nth-last-child(1) {
  margin-top: -1px;
}
.test__description-item:nth-last-child(1) {
  flex: 0 0 25%;
}
.test__action {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.test__action .test__button {
  width: 50%;
}
.test__age-selection--list {
  margin-top: 6rem;
}
.test__age-selection--list .entity-card__info .entity-card__action {
  width: 100%;
}
@media (max-width: 768px) {
  .test__description {
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .test__age-selection--list .entity-card--secondary .entity-card__info {
    padding: 0.75rem 0.75rem 0.7rem;
    gap: 0.4rem;
  }
  .test__age-selection--list .entity-card--secondary .entity-card__name {
    line-height: 1.2;
  }
  .test__age-selection--list .entity-card--secondary .entity-card__age {
    line-height: 1.25;
  }
  .test__age-selection--list .entity-card--secondary .entity-card__action {
    min-height: 0;
    padding: 0.55rem 0.65rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    word-break: break-word;
  }
}