* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Background catalog */
section.page.backgrounds {
  padding: 0 !important;
  background: transparent !important;
}

.backgrounds_container {
  max-width: 1435px !important;
  width: 100%;
  padding-left: 112px;
  padding-right: 20px;
  box-sizing: border-box;
}

.backgrounds_page_main {
  padding-top: 60px;
  padding-bottom: 60px;
}

.backgrounds_hero,
.backgrounds_filters,
.backgrounds_toolbar,
.backgrounds_pagination,
.backgrounds_empty {
  border: 1px solid var(--seraya-plashka) !important;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.backgrounds_hero {
  border-radius: 32px !important;
  margin-bottom: 32px !important;
}

.backgrounds_hero_content {
  min-height: 270px;
  padding: 32px !important;
  display: flex;
  align-items: flex-end;
}

.backgrounds_hero_image {
  opacity: .38 !important;
  filter: saturate(.9) contrast(1.04);
}

.backgrounds_hero_shade {
  background: linear-gradient(90deg, rgba(4,4,4,.96) 0%, rgba(4,4,4,.82) 44%, rgba(4,4,4,.34) 100%) !important;
}

.backgrounds_hero_glow {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)) !important;
}

.backgrounds_hero_copy {
  max-width: 720px !important;
  gap: 12px !important;
}

.backgrounds_eyebrow {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.68) !important;
  letter-spacing: .14em !important;
}

.backgrounds_eyebrow_dot {
  background: #fff !important;
  box-shadow: 0 0 12px rgba(255,255,255,.65) !important;
}

.backgrounds_title {
  font-family: var(--font-family);
  font-weight: 700 !important;
  font-size: 36px !important;
  line-height: 111% !important;
  letter-spacing: 0 !important;
  color: var(--obvodka-vybora);
}

.backgrounds_subtitle {
  max-width: 680px !important;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.5) !important;
}

.backgrounds_layout {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important;
  gap: 32px !important;
}

.backgrounds_filters {
  top: 28px !important;
  border-radius: 32px !important;
  padding: 24px 22px !important;
  position: static !important;
  max-height: none;
  overflow: visible;
}

.backgrounds_filters::-webkit-scrollbar {
  width: 4px;
}

.backgrounds_filters::-webkit-scrollbar-track {
  background: rgba(255,255,255,.04);
}

.backgrounds_filters::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.24);
  border-radius: 999px;
}

.backgrounds_filter_group {
  margin-bottom: 20px !important;
}

.backgrounds_filters label,
.backgrounds_filters > p {
  display: block;
  margin-bottom: 10px !important;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.45) !important;
}

.backgrounds_search {
  height: 48px;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(0,0,0,.26) !important;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px !important;
  padding-left: 12px !important;
  padding-right: 8px !important;
  color: #fff !important;
}

.backgrounds_search:focus {
  border-color: rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.07) !important;
}

.backgrounds_segmented {
  display: flex !important;
  gap: 6px !important;
  padding: 7px !important;
  border-radius: 20px !important;
  border: 0 !important;
  background: var(--color) !important;
}

.backgrounds_segmented--type {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 24px !important;
}

.backgrounds_segmented--type .backgrounds_segmented_button {
  text-overflow: clip;
}

.backgrounds_segmented--sort {
  flex-wrap: wrap;
}

.backgrounds_segmented_button,
.backgrounds_filter_button,
.backgrounds_style_button,
.backgrounds_page_button {
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(0,0,0,.28) !important;
  color: rgba(255,255,255,.78) !important;
  font-family: var(--font-family);
  font-weight: 700 !important;
  transition: transform .25s, opacity .25s, background .25s, border-color .25s, color .25s;
}

.backgrounds_segmented_button {
  min-height: 40px !important;
  border-radius: 14px !important;
  min-width: 0;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 11px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backgrounds_segmented_button:hover,
.backgrounds_filter_button:hover,
.backgrounds_style_button:hover,
.backgrounds_page_button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

.backgrounds_segmented_button_active,
.backgrounds_filter_button_active,
.backgrounds_style_button_active {
  border-color: transparent !important;
  box-shadow: 0 0 17px 0 rgba(255,255,255,.29) !important;
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
}

.backgrounds_color_grid {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-bottom: 24px !important;
  gap: 8px 7px !important;
}

.backgrounds_filter_button {
  min-height: 44px !important;
  border-radius: 14px !important;
  min-width: 0;
  padding-left: 10px !important;
  padding-right: 9px !important;
  font-size: 11px !important;
}

.backgrounds_count,
.backgrounds_style_button span {
  color: rgba(255,255,255,.45) !important;
  flex: 0 0 auto;
  margin-left: 4px;
}

.backgrounds_filter_button_active .backgrounds_count,
.backgrounds_style_button_active span {
  color: rgba(0,0,0,.62) !important;
}

.backgrounds_swatch {
  width: 14px !important;
  height: 14px !important;
  border-color: rgba(255,255,255,.32) !important;
}

.backgrounds_color_name {
  min-width: 0;
  gap: 6px !important;
}

.backgrounds_color_name span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backgrounds_style_filters {
  margin-bottom: 24px !important;
  gap: 8px !important;
}

.backgrounds_style_button {
  border-radius: 999px !important;
  padding: 8px 12px !important;
}

.backgrounds_reset {
  height: 44px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.72) !important;
}

.backgrounds_reset:hover {
  opacity: .72;
}

.backgrounds_toolbar,
.backgrounds_pagination {
  border-radius: 28px !important;
  padding: 12px !important;
}

.backgrounds_total {
  font-family: var(--font-family);
  font-weight: 600;
  color: rgba(255,255,255,.58) !important;
}

.backgrounds_total span,
.backgrounds_page_status span {
  color: #fff !important;
}

.backgrounds_grid {
  gap: 18px !important;
}

.backgrounds_card {
  border-radius: 24px !important;
  border: 1px solid var(--seraya-plashka) !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow: 0 0 16px 0 rgba(0,0,0,.22);
}

.backgrounds_card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,.26) !important;
}

.backgrounds_card_media {
  aspect-ratio: 16 / 10;
}

.backgrounds_card_image {
  display: block;
  width: 100%;
  height: 100%;
}

.backgrounds_card_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

.backgrounds_card:hover .backgrounds_card_video {
  opacity: 1;
}

.backgrounds_card_gradient {
  background: linear-gradient(180deg, transparent, rgba(4,4,4,.72)) !important;
}

.backgrounds_card_badge {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.55) !important;
  color: rgba(255,255,255,.82) !important;
}

.backgrounds_card_body {
  padding: 16px !important;
}

.backgrounds_card_title {
  font-family: var(--font-family);
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #fff !important;
}

.backgrounds_card_meta {
  color: rgba(255,255,255,.42) !important;
}

.backgrounds_tag {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.62) !important;
}

.backgrounds_card_action {
  min-height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  font-family: var(--font-family);
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.backgrounds_card_action--primary {
  border: 0 !important;
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
  box-shadow: 0 0 17px 0 rgba(255,255,255,.24) !important;
}

.backgrounds_card_action--secondary {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.28) !important;
  color: #fff !important;
}

.backgrounds_card_action:hover {
  opacity: .72;
}

.backgrounds_card_action--disabled {
  pointer-events: none;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.28) !important;
}

.backgrounds_skeleton,
.backgrounds_empty {
  border-radius: 24px !important;
}

.backgrounds_page_button {
  min-width: 108px;
  height: 40px;
  border-radius: 14px !important;
}

.backgrounds_page_button:disabled {
  opacity: .3;
  transform: none;
}

.backgrounds_page_status {
  font-family: var(--third-family);
  color: rgba(255,255,255,.55) !important;
}

.backgrounds_modal {
  z-index: 50;
  background: rgba(0,0,0,.86) !important;
}

.backgrounds_modal_inner {
  max-width: 1380px !important;
}

.backgrounds_modal_panel {
  border-radius: 28px !important;
  border: 1px solid var(--seraya-plashka) !important;
  background: rgba(10,10,10,.96) !important;
  box-shadow: 0 0 50px 0 rgba(0,0,0,.65) !important;
}

.backgrounds_modal_header {
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

.backgrounds_modal_kicker {
  color: rgba(255,255,255,.5) !important;
}

.backgrounds_modal_title {
  font-family: var(--font-family);
  font-weight: 700 !important;
}

.backgrounds_modal_close {
  border-radius: 14px !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04);
}

.backgrounds_modal_body {
  grid-template-columns: minmax(0, 1fr) 330px !important;
}

.backgrounds_modal_preview {
  background: #000 !important;
}

.backgrounds_modal_stage {
  min-height: min(64vh, 620px) !important;
}

.backgrounds_modal_aside,
.backgrounds_modal_body > aside {
  border-left: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.025) !important;
}

.backgrounds_modal_body > aside > p:first-child {
  color: rgba(255,255,255,.45) !important;
}

.backgrounds_modal_body aside [class*="rounded-md"] {
  border-radius: 16px !important;
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(0,0,0,.28) !important;
}

.backgrounds_modal_body aside a {
  border-radius: 12px !important;
}

.backgrounds_modal_body aside a[href] {
  color: #fff;
}

.backgrounds_modal_body aside a.bg-\[\#1a9fff\] {
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
}

@media (max-width: 1200px) {
  .backgrounds_layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  .backgrounds_filters {
    position: relative !important;
    top: 0 !important;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .backgrounds_page_main {
    padding-top: 28px;
  }

  .backgrounds_hero_content {
    min-height: 230px;
    padding: 24px !important;
  }

  .backgrounds_title {
    font-size: 28px !important;
  }

  .backgrounds_subtitle {
    font-size: 14px !important;
  }

  .backgrounds_grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .backgrounds_toolbar,
  .backgrounds_pagination {
    align-items: stretch !important;
  }

  .backgrounds_segmented--sort {
    width: 100%;
  }

  .backgrounds_segmented--sort .backgrounds_segmented_button {
    flex: 1 1 calc(50% - 8px);
  }

  .backgrounds_modal_body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .backgrounds_modal_body > aside {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
  }
}

@media (max-width: 560px) {
  .backgrounds_filters,
  .backgrounds_hero,
  .backgrounds_toolbar,
  .backgrounds_pagination {
    border-radius: 22px !important;
  }

  .backgrounds_color_grid,
  .backgrounds_segmented--type {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .backgrounds_pagination {
    flex-direction: column;
    gap: 10px;
  }

  .backgrounds_page_button {
    width: 100%;
  }
}

/* /backgrounds catalog — mobile fixes + preview motion (design pass) */
@media (max-width: 767px) {
  .backgrounds_container {
    padding-left: 0;
    padding-right: 0;
  }
}

@keyframes bgpreview_backdrop_in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bgpreview_panel_in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.bgpreview_backdrop {
  animation: bgpreview_backdrop_in .2s ease both;
}
.bgpreview_panel {
  animation: bgpreview_panel_in .26s cubic-bezier(.22, .61, .36, 1) both;
}

/* Phones: full-screen immersive preview */
@media (max-width: 640px) {
  .bgpreview_overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .bgpreview_panel {
    max-width: 100% !important;
    min-height: 100dvh;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    animation: bgpreview_backdrop_in .22s ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bgpreview_backdrop,
  .bgpreview_panel {
    animation: none !important;
  }
}

/* Community gallery */
section.page.gallery {
  padding: 0 !important;
  background: transparent !important;
}

/* The listing is an art wall — it gets the width the sidebar leaves over, while the
   work page keeps the narrower reading measure. */
.gallery_container.gallery_container--wall {
  max-width: 1880px !important;
  /* The wall reaches the viewport edge, so it must clear the fixed sidebar itself
     instead of relying on the centred layout to do it. Above 1536px the sidebar is
     pinned open and ends at x=153. */
  padding-left: 186px;
  padding-right: 32px;
}

/* 993-1536px: the sidebar is parked off-canvas and only slides in on hover, so the
   wall can start near the edge. */
@media (max-width: 1536px) {
  .gallery_container.gallery_container--wall {
    padding-left: 56px;
    padding-right: 24px;
  }
}

@media (max-width: 992px) {
  .gallery_container.gallery_container--wall {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.gallery_container {
  max-width: 1435px !important;
  width: 100%;
  padding-left: 112px;
  padding-right: 20px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.gallery_hero,
.gallery_bar,
.gallery_toolbar,
.gallery_pagination,
.gallery_empty,
.gallery_card {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.46) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.gallery_detail_panel {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.46) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.gallery_hero {
  position: relative;
  z-index: 10;
  border-radius: 32px !important;
  padding: 30px 30px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background:
    radial-gradient(70% 120% at 88% 0%, rgba(255, 255, 255, 0.07), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%),
    rgba(255,255,255,.02) !important;
}

.gallery_grid {
  position: relative;
  z-index: 0;
}

/* ---- Work page: the work on top at its own proportions, everything else below ---- */
.gallery_container.gallery_container--work {
  max-width: 1500px !important;
}

.gallery_work_media {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 18px;
  /* Height budget for the artwork, also read by the inline width calculation. */
  --work-view: calc(100vh - 190px);
}

/* On phones `100vh` is the *large* viewport, so the work would slide under the
   browser chrome. `svh` is the small viewport and stays honest. */
@supports (height: 100svh) {
  .gallery_work_media {
    --work-view: calc(100svh - 190px);
  }
}

@supports (height: 100svh) {
  @media (max-width: 992px) {
    .gallery_work_media {
      --work-view: calc(100svh - 210px);
    }
  }
}

.gallery_work_media .gallery_work_image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Capped so a tall work still fits on screen without scrolling to see it. */
  max-height: var(--work-view);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px -40px rgba(0, 0, 0, 0.95);
}

.gallery_work_media--adult-locked {
  overflow: hidden;
  min-height: 280px;
  border-radius: 16px;
}

.gallery_work_media--adult-locked .gallery_work_image,
.gallery_tile--adult-locked .gallery_tile_image {
  filter: blur(28px) saturate(.42) brightness(.55);
  transform: scale(1.06);
}

.gallery_adult_gate {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 24px;
  border: 0;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .13), transparent 42%),
    rgba(3, 5, 7, .62);
}

.gallery_adult_gate strong {
  font-family: var(--font-family);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.15;
}

.gallery_adult_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 125, 125, .7);
  border-radius: 999px;
  background: rgba(125, 20, 20, .7);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
}

.gallery_adult_description {
  max-width: 520px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .7);
}

.gallery_adult_confirm {
  margin-top: 3px;
  padding: 9px 15px;
  border-radius: 11px;
  background: #fff;
  color: #080a0c;
  font-size: 12px;
  font-weight: 750;
}

.gallery_chip--adult {
  border-color: rgba(255, 105, 105, .28) !important;
  background: rgba(130, 28, 28, .22) !important;
  color: rgba(255, 195, 195, .92) !important;
}

.gallery_work_blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-family);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.gallery_work_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.46);
}

.gallery_work_lead {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.gallery_work_title {
  font-family: var(--font-family);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.gallery_work_by {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.52);
}

.gallery_work_actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.gallery_work_button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .22s, background .22s, border-color .22s, color .22s;
}

.gallery_work_button--primary {
  border: 0;
  background: var(--obvodka-vybora);
  color: #000;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.24);
}

.gallery_work_button--primary:hover {
  opacity: .74;
}

.gallery_work_button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

.gallery_work_button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.gallery_work_button_size {
  font-weight: 600;
  opacity: .62;
}

.gallery_work_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 14px;
  padding: 0 4px;
}

.gallery_work_chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* The base chip look is scoped to `.gallery_card`, so restate it for the work page. */
.gallery_work_chips .gallery_chip,
.gallery_work_chips .gallery_detail_tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.gallery_chip--motion {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Undo the old side-panel treatment: here it is a quiet link, not a full-width block. */
.gallery_work_foot .gallery_report_link--detail {
  margin-top: 0;
  display: inline-flex;
  width: auto;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 992px) {
  .gallery_work_media {
    --work-view: calc(100vh - 210px);
  }

  .gallery_work_media .gallery_work_image {
    border-radius: 14px;
  }

  .gallery_work_bar {
    padding: 13px 14px;
    border-radius: 16px;
  }

  .gallery_work_actions {
    width: 100%;
  }

  .gallery_work_button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .gallery_work_title {
    font-size: 18px;
  }
}

/* ---- Compact toolbar: title, filters and the publish CTA on one line ---- */
.gallery_bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 12px 16px 12px 20px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(80% 260% at 92% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
    rgba(255, 255, 255, 0.02) !important;
}

.gallery_bar_lead {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.gallery_bar_title {
  font-family: var(--font-family);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}

.gallery_bar_count {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

.gallery_bar_tools {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 520px;
  justify-content: flex-end;
}

.gallery_bar_tools .gallery_search {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 320px;
}

/* The stock gallery controls are 46px tall — too heavy for a single-line bar. */
.gallery_bar_tools .gallery_dropdown_button {
  height: 40px;
  min-width: 134px;
  border-radius: 12px;
}

.gallery_bar_tools .gallery_field {
  height: 40px;
  border-radius: 12px;
}

.gallery_bar_tools .gallery_publish {
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 12px !important;
}

@media (max-width: 860px) {
  .gallery_bar {
    align-items: stretch;
    padding: 12px !important;
  }

  .gallery_bar_tools {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .gallery_bar_tools .gallery_dropdown {
    flex: 1 1 140px;
  }

  .gallery_bar_tools .gallery_dropdown_button {
    width: 100%;
    min-width: 0;
  }

  /* Search and the CTA share the second line instead of taking one each. */
  .gallery_bar_tools .gallery_search {
    flex: 1 1 200px;
    max-width: none;
  }

  .gallery_bar_tools .gallery_publish {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  .gallery_bar_title {
    font-size: 17px;
  }

  /* The selected value matters more than repeating "Type" / "Category". */
  .gallery_bar_tools .gallery_dropdown_prefix {
    display: none;
  }

  /* Icon-only CTA: the label costs a whole row on a phone. */
  .gallery_bar_tools .gallery_publish {
    width: 44px;
    padding: 0 !important;
  }

  .gallery_bar_tools .gallery_publish_label {
    display: none;
  }
}

/* ---- Justified rows: every work keeps its native aspect ratio, the row shares one height ---- */
.gallery_rows {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.gallery_row {
  display: flex;
  align-items: stretch;
  column-gap: 12px;
  min-width: 0;
}

/* A trailing row too short to stretch is centred, so the leftover reads as a margin
   rather than a hole on the right. */
.gallery_row--stub {
  justify-content: center;
}

.gallery_skeleton {
  min-width: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.gallery_tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  /* Lets the caption size itself against the tile, not the viewport. */
  container-type: inline-size;
  container-name: gallery_tile;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #050607;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.46);
  transition: border-color .28s, box-shadow .28s;
}

.gallery_tile:hover {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.92);
}

.gallery_tile_link {
  position: absolute;
  inset: 0;
  display: block;
}

.gallery_tile .gallery_tile_image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Lightweight server-generated poster. The browser lazily fetches only visible
   tiles; the animated source is still mounted on deliberate hover. */
.gallery_tile .gallery_tile_still {
  opacity: 1;
}

/* The animated preview is fetched on hover only, and unmounted on leave so the GIF
   stops decoding. It fades in over the still frame. */
.gallery_tile .gallery_tile_image--live {
  z-index: 1;
  animation: gallery_tile_fade .22s ease-out both;
}

@keyframes gallery_tile_fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery_tile_blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-family);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

/* Nothing but the art at rest — title, author and actions appear on hover. */
.gallery_tile_veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3, 3, 3, 0.92) 0%, rgba(3, 3, 3, 0.45) 34%, rgba(3, 3, 3, 0) 62%);
  transition: opacity .26s;
}

.gallery_tile_info {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 14px 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .26s, transform .26s;
  pointer-events: none;
}

.gallery_tile_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.gallery_tile_by {
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.62);
}

.gallery_tile_author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Read-only stat in the top corner; the actions live in the bottom one. */
.gallery_tile_downloads {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .26s, transform .26s;
  pointer-events: none;
}

.gallery_tile_actions {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .26s, transform .26s;
}

.gallery_tile_action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: background .2s, color .2s, border-color .2s;
}

.gallery_tile_action:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.gallery_tile_action--primary {
  border-color: rgba(255, 255, 255, 0.9);
  color: #05070a;
  background: #fff;
}

.gallery_tile_action--primary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.88);
  color: #05070a;
}

.gallery_tile:hover .gallery_tile_veil,
.gallery_tile:focus-within .gallery_tile_veil {
  opacity: 1;
}

.gallery_tile:hover .gallery_tile_info,
.gallery_tile:focus-within .gallery_tile_info,
.gallery_tile:hover .gallery_tile_actions,
.gallery_tile:focus-within .gallery_tile_actions,
.gallery_tile:hover .gallery_tile_downloads,
.gallery_tile:focus-within .gallery_tile_downloads {
  opacity: 1;
  transform: translateY(0);
}

/* Keep the caption clear of the action buttons in the same corner. */
.gallery_tile:hover .gallery_tile_info,
.gallery_tile:focus-within .gallery_tile_info {
  padding-right: 86px;
}

/* Touch devices have no hover: keep the caption readable, drop the quick actions. */
@media (hover: none) {
  .gallery_tile_veil,
  .gallery_tile_info {
    opacity: 1;
    transform: none;
  }

  .gallery_tile_veil {
    opacity: .85;
  }

  .gallery_tile:hover .gallery_tile_info,
  .gallery_tile:focus-within .gallery_tile_info {
    padding-right: 14px;
  }

  .gallery_tile_actions {
    display: none;
  }
}

/* Narrow tiles shed caption detail — measured against the tile, not the viewport,
   so a 190px tile behaves the same on a phone and inside a wide desktop row. */
@container gallery_tile (max-width: 300px) {
  .gallery_adult_gate--compact {
    gap: 7px;
    padding: 12px;
  }

  .gallery_adult_gate--compact .gallery_adult_description {
    display: none;
  }

  .gallery_adult_gate--compact strong {
    font-size: 13px;
  }

  .gallery_adult_gate--compact .gallery_adult_confirm {
    padding: 7px 10px;
    font-size: 10px;
  }

  .gallery_tile_info {
    gap: 3px;
    padding: 11px 11px 10px;
  }

  .gallery_tile_title {
    font-size: 12.5px;
  }

  .gallery_tile_by {
    font-size: 10.5px;
  }

  .gallery_tile:hover .gallery_tile_info,
  .gallery_tile:focus-within .gallery_tile_info {
    padding-right: 76px;
  }

  .gallery_tile_action {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .gallery_tile_actions {
    right: 8px;
    bottom: 8px;
    gap: 5px;
  }
}

@container gallery_tile (max-width: 210px) {
  .gallery_tile_info {
    padding: 9px 9px 8px;
  }

  .gallery_tile_title {
    font-size: 11.5px;
  }

  /* Author only — the download count no longer fits next to it. */
  .gallery_tile_downloads {
    display: none;
  }
}

@media (max-width: 560px) {
  .gallery_tile {
    border-radius: 14px;
  }
}

.gallery_hero_main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gallery_hero_intro {
  min-width: 0;
  max-width: 660px;
}

.gallery_hero_aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.gallery_hero_stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gallery_hero_stat strong {
  font-family: var(--font-family);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.gallery_hero_stat span {
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

@media (min-width: 1024px) {
  .gallery_hero_main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }

  .gallery_hero_aside {
    align-items: flex-end;
    text-align: right;
  }

  .gallery_hero_stat {
    align-items: flex-end;
  }
}

.gallery_eyebrow,
.gallery_kicker {
  color: rgba(255,255,255,.48) !important;
  letter-spacing: .16em !important;
}

.gallery_eyebrow {
  font-family: var(--font-family);
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.gallery_hero_intro .gallery_title {
  margin-top: 12px;
}

.gallery_hero_intro .gallery_subtitle {
  margin-top: 13px;
}

.gallery_title,
.gallery_detail_title {
  font-family: var(--font-family);
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: var(--obvodka-vybora);
}

.gallery_title {
  font-size: 36px !important;
}

.gallery_subtitle {
  max-width: 680px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.5) !important;
}

.gallery_publish,
.gallery_card_action,
.gallery_page_button,
.gallery_file_action {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  font-family: var(--font-family);
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transition: opacity .25s, transform .25s, background .25s, border-color .25s, color .25s;
}

.gallery_publish,
.gallery_card_action--primary {
  border: 0 !important;
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
  box-shadow: 0 0 17px 0 rgba(255,255,255,.24) !important;
}

.gallery_publish {
  flex: 0 0 auto;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px !important;
  white-space: nowrap;
}

.gallery_publish:hover,
.gallery_card_action--primary:hover {
  opacity: .72;
}

.gallery_card_action--secondary,
.gallery_card_action--quiet,
.gallery_page_button,
.gallery_file_action {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.28) !important;
  color: rgba(255,255,255,.82) !important;
}

.gallery_detail_panel .gallery_card_action--primary {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 12px 26px -14px rgba(0,0,0,.85) !important;
}

.gallery_detail_panel .gallery_card_action--primary:hover {
  border-color: rgba(255,255,255,.3) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
}

.gallery_publish:hover,
.gallery_card_action:hover,
.gallery_page_button:hover:not(:disabled),
.gallery_file_action:hover {
  opacity: .72;
}

.gallery_filters {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px !important;
  background: rgba(0,0,0,.26) !important;
}

.gallery_dropdown {
  position: relative;
  flex: 0 0 auto;
}

.gallery_dropdown_button {
  height: 46px;
  min-width: 158px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.82);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background .25s, border-color .25s, color .25s;
}

.gallery_dropdown_prefix {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.36);
}

.gallery_dropdown_value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: rgba(255,255,255,.92);
}

.gallery_dropdown_button:hover,
.gallery_dropdown_button_open {
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.34);
  color: #fff;
}

.gallery_dropdown_chevron {
  flex: 0 0 auto;
  color: rgba(255,255,255,.52);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform .2s, color .2s;
}

.gallery_dropdown_button_open .gallery_dropdown_chevron {
  color: #fff;
  transform: translateY(1px) rotate(180deg);
}

.gallery_dropdown_menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(8, 8, 8, .98);
  box-shadow: 0 22px 50px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
}

.gallery_dropdown_option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  transition: background .18s, border-color .18s, color .18s;
}

.gallery_dropdown_option:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.065);
  color: #fff;
}

.gallery_dropdown_option_active {
  border-color: transparent;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 15px rgba(255,255,255,.18);
  color: #000;
}

.gallery_dropdown_option_active:hover {
  background: var(--obvodka-vybora);
  color: #000;
}

.gallery_field {
  min-height: 48px;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(0,0,0,.26) !important;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px !important;
  color: #fff !important;
}

.gallery_field:focus {
  border-color: rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.07) !important;
}

.gallery_search {
  flex: 1 1 220px;
  min-width: 190px;
  display: flex;
}

.gallery_search .gallery_field {
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 15px !important;
  border-radius: 14px !important;
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.02) !important;
}

.gallery_search .gallery_field:focus {
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.05) !important;
}

.gallery_toolbar,
.gallery_pagination {
  border-radius: 28px !important;
}

.gallery_toolbar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.42);
}

.gallery_pagination {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px !important;
}

.gallery_page_button {
  gap: 6px;
  padding: 0 16px !important;
  min-height: 42px;
}

.gallery_pagination_info {
  padding: 0 8px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.55);
}

.gallery_card {
  border-radius: 22px !important;
  overflow: hidden;
  display: block;
  transition: border-color .3s, box-shadow .3s !important;
}

.gallery_card:hover {
  border-color: rgba(255,255,255,.3) !important;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.92) !important;
}

/* Poster overlay */
.gallery_card_scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(3,3,3,.94) 2%, rgba(3,3,3,.58) 24%, rgba(3,3,3,.05) 50%, rgba(3,3,3,0) 66%);
  transition: opacity .38s;
}

.gallery_card:hover .gallery_card_scrim {
  opacity: .82;
}

.gallery_card_topbar {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.gallery_card_overlay {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 16px 15px;
  pointer-events: none;
}

.gallery_card_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

.gallery_card_by {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  color: rgba(255,255,255,.6);
}

.gallery_card_by span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery_card_by_sep {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
}

.gallery_badge_dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.85);
  animation: gallery_pulse 1.9s ease-in-out infinite;
}

@keyframes gallery_pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* Category chip on the poster (top-left) */
.gallery_badge--cat {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 11px;
}

/* Card footer */
.gallery_card_foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
}

.gallery_card_btn {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, opacity .2s, transform .2s;
}

.gallery_card_btn svg {
  flex: 0 0 auto;
}

.gallery_card_btn--primary {
  border: 0;
  background: var(--obvodka-vybora);
  color: #000;
  box-shadow: 0 0 15px rgba(255,255,255,.16);
}

.gallery_card_btn--primary:hover {
  opacity: .82;
}

.gallery_card_btn--ghost {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.84);
}

.gallery_card_btn--ghost:hover {
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.gallery_card_report {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.gallery_card_report:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  transform: translateY(-1px);
}

/* Featured (workshop) spotlight banner */
.gallery_featured {
  display: grid;
  gap: 16px;
}

.gallery_feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.82fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(255,255,255,.05), transparent 58%),
    rgba(255,255,255,.02);
  box-shadow: 0 0 40px rgba(0,0,0,.46);
  transition: border-color .3s, box-shadow .3s;
}

.gallery_feature:hover {
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 22px 55px -22px rgba(0,0,0,.9);
}

.gallery_feature_media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 383 / 215;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.24)),
    #050607;
  border-right: 1px solid rgba(255,255,255,.06);
}

.gallery_feature_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 13px;
  padding: 26px 30px;
}

.gallery_feature_badge {
  position: static;
}

.gallery_feature_titlelink {
  text-decoration: none;
}

.gallery_feature_title {
  font-family: var(--font-family);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.gallery_feature_meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
}

.gallery_feature_actions {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

@media (max-width: 760px) {
  .gallery_feature {
    grid-template-columns: 1fr;
  }

  .gallery_feature_media {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .gallery_feature_info {
    padding: 20px;
  }

  .gallery_feature_title {
    font-size: 22px;
  }

  .gallery_feature_actions {
    max-width: none;
  }
}

.gallery_preview_stage {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.22)),
    #050607;
}

.gallery_preview_stage::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 18px;
  pointer-events: none;
}

.gallery_detail_media.gallery_preview_stage::before,
.gallery_card_preview.gallery_preview_stage::before {
  display: none;
}

.gallery_card_preview {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gallery_card--featured .gallery_card_preview {
  aspect-ratio: 630 / 824;
}

.gallery_card--artwork .gallery_card_preview {
  aspect-ratio: 615 / 824;
}

.gallery_card--workshop .gallery_card_preview {
  aspect-ratio: 610 / 824;
}

.gallery_detail_preview--workshop .gallery_detail_media {
  aspect-ratio: 383 / 215;
}

.gallery_preview_image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gallery_card_preview .gallery_preview_image,
.gallery_detail_media .gallery_preview_image {
  object-position: center center;
}

.gallery_card--workshop .gallery_preview_image {
  object-fit: contain;
}

/* Blurred backdrop fill for the horizontal workshop strip (Shorts-style) */
.gallery_ws_blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  filter: blur(30px) saturate(1.2) brightness(.48);
  pointer-events: none;
  user-select: none;
}

.gallery_artwork_split_preview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 506fr 9fr 100fr;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.gallery_artwork_split_part {
  display: block;
  min-width: 0;
  height: 100%;
  background-image: var(--gallery-preview-image);
  background-repeat: no-repeat;
}

.gallery_artwork_split_part--main {
  background-position: left top;
  background-size: 121.5415% 100%;
}

.gallery_artwork_split_part--side {
  background-position: right top;
  background-size: 615% 100%;
}

.gallery_artwork_split_gap {
  display: block;
  min-width: 0;
  height: 100%;
  background: #000;
}

.admin_page {
  overflow-x: clip;
}

.admin_page_container,
.admin_page_main {
  min-width: 0;
  max-width: 100%;
}

.admin_page table {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .admin_page .container {
    width: 100%;
    padding-inline: 12px;
  }

  .admin_page .page_main {
    padding-top: 76px;
  }
}

.gallery_preview_shadow {
  z-index: 2;
  background: linear-gradient(0deg, rgba(7,9,11,.82), rgba(7,9,11,0));
  pointer-events: none;
}

.gallery_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.gallery_preview_label {
  z-index: 3;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery_preview_label {
  font-family: var(--font-family);
}

.gallery_card span[class*="rounded"],
.gallery_detail_panel span[class*="rounded"] {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.62) !important;
}

.gallery_card .gallery_chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.58);
  font-family: var(--font-family);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

.gallery_chip.gallery_chip--featured {
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.75) !important;
}

.gallery_chip.gallery_chip--artwork {
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.76) !important;
}

.gallery_chip.gallery_chip--workshop {
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.82) !important;
}

.gallery_card_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-family);
}

.gallery_card_meta span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 10px;
  border-radius: 999px;
  vertical-align: 2px;
  background: rgba(255,255,255,.22);
}

.gallery_card_actions {
  align-items: end;
}

.gallery_report_link {
  width: fit-content;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.36);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.16);
  text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}

.gallery_report_link:hover {
  color: rgba(255,255,255,.72);
  text-decoration-color: rgba(255,255,255,.42);
}

.gallery_badge,
.gallery_badge--animated {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.6) !important;
  color: rgba(255,255,255,.84) !important;
}

.gallery_card_topbar .gallery_badge {
  min-width: 0;
  flex: 0 1 auto;
}

.gallery_card_topbar .gallery_badge--animated {
  flex: 0 0 auto;
}

.gallery_skeleton,
.gallery_empty {
  border-radius: 24px !important;
}

.gallery_back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .2s, gap .2s;
}

.gallery_back::before {
  content: "<";
  font-size: 14px;
  transition: transform .2s;
}

.gallery_back:hover {
  color: rgba(255,255,255,.85);
  gap: 10px;
}

.gallery_back:hover::before {
  transform: translateX(-3px);
}

.gallery_detail_preview,
.gallery_detail_panel,
.gallery_modal_panel {
  border-radius: 28px !important;
}

.gallery_detail_layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 356px !important;
}

.gallery_detail_preview {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 0;
  position: relative;
  overflow: visible;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.gallery_detail_preview::after {
  display: none;
}

.gallery_detail_media {
  min-height: 320px;
  overflow: hidden;
  border-radius: 18px;
  position: relative;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 40px rgba(0,0,0,.42);
}

.gallery_detail_preview--featured .gallery_detail_media {
  width: min(630px, calc((100vh - 190px) * 630 / 824), 100%);
  max-width: 630px;
  aspect-ratio: 630 / 824;
  margin-inline: auto;
}

.gallery_detail_preview--artwork .gallery_detail_media {
  width: min(615px, calc((100vh - 190px) * 615 / 824), 100%);
  max-width: 615px;
  aspect-ratio: 615 / 824;
  margin-inline: auto;
}

.gallery_detail_preview--wide .gallery_detail_media {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}

.gallery_detail_preview--workshop .gallery_detail_media {
  width: 100%;
  max-width: 640px;
  min-height: 0;
  aspect-ratio: 383 / 215;
  margin-inline: auto;
}

.gallery_detail_media .gallery_preview_image {
  max-height: 100%;
}

.gallery_detail_panel {
  width: 100%;
  min-width: 0;
  padding: 26px !important;
  align-self: start;
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 34%),
    rgba(255,255,255,.02) !important;
}

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

.gallery_detail_panel .gallery_chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.62);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.gallery_detail_panel .gallery_chip--type {
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.86) !important;
}

.gallery_detail_panel .gallery_detail_title {
  margin-top: 16px;
  font-size: 29px !important;
  line-height: 1.12 !important;
}

.gallery_detail_author {
  margin-top: 10px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
}

.gallery_detail_author strong {
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

.gallery_detail_taglist {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gallery_detail_tag {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.5);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
}

.gallery_detail_actions {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.gallery_detail_actions .gallery_card_action {
  min-height: 50px;
  padding: 0 18px;
}

.gallery_detail_meta {
  margin-top: 20px;
  display: grid;
  gap: 0;
  padding: 2px 15px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}

.gallery_detail_meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.gallery_detail_meta div:last-child {
  border-bottom: 0;
}

.gallery_detail_meta span {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
}

.gallery_detail_meta strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255,255,255,.82);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery_file_action {
  min-height: 58px;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
  box-shadow: 0 0 17px rgba(255,255,255,.22) !important;
  text-align: center;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}

.gallery_file_action::before {
  display: none;
}

.gallery_file_action_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
}

.gallery_file_action span {
  color: #000;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.gallery_file_action strong {
  max-width: min(270px, 100%);
  overflow: hidden;
  color: rgba(0,0,0,.58);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery_file_action em {
  color: rgba(0,0,0,.5);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}

.gallery_file_action::after {
  display: none;
}

.gallery_file_action_icon {
  flex: 0 0 auto;
  margin-right: 12px;
  color: rgba(0,0,0,.62);
  transition: transform .2s, color .2s;
}

.gallery_file_action:hover .gallery_file_action_icon {
  color: rgba(0,0,0,.9);
  transform: translateY(2px);
}

.gallery_report_link--detail {
  margin-top: 20px;
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.35);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: .04em;
  transition: background .2s, border-color .2s, color .2s;
}

.gallery_report_link--detail:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.65);
  text-decoration-color: rgba(255,255,255,.35);
}

.gallery_modal_panel {
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.01) 100%),
    rgba(8,10,14,.90) !important;
  backdrop-filter: blur(32px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.3) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 72px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Report / DMCA modal */
.gallery_modal_overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  padding: 28px 16px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gallery_modal_wrap {
  margin-inline: auto;
  display: flex;
  min-height: 100%;
  max-width: 560px;
  align-items: center;
}

.gallery_modal_panel {
  width: 100%;
  padding: 26px !important;
  color: #fff;
}

.gallery_modal_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.gallery_modal_kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.gallery_modal_title {
  margin-top: 9px;
  font-family: var(--font-family);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  overflow-wrap: anywhere;
}

.gallery_modal_close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.gallery_modal_close:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.26);
  color: #fff;
}

.gallery_modal_form {
  display: grid;
  gap: 14px;
}

.gallery_modal_intro {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: 13px 15px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
}

.gallery_modal_link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gallery_modal_field {
  display: grid;
  gap: 7px;
}

.gallery_modal_field > span {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.58);
}

.gallery_modal_form .gallery_field {
  padding: 0 14px !important;
}

.gallery_modal_form textarea.gallery_field {
  min-height: 84px;
  padding: 11px 14px !important;
  resize: vertical;
  line-height: 1.5;
}

.gallery_modal_check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  padding: 12px 14px;
  font-family: var(--font-family);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.66);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.gallery_modal_check:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
}

.gallery_modal_check input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #fff;
}

.gallery_modal_error {
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 12px;
  background: rgba(248,113,113,.1);
  padding: 11px 14px;
  font-family: var(--font-family);
  font-size: 12.5px;
  color: #fecaca;
}

.gallery_modal_submit {
  margin-top: 4px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: var(--obvodka-vybora);
  color: #000;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 17px rgba(255,255,255,.22);
  cursor: pointer;
  transition: opacity .2s;
}

.gallery_modal_submit:hover {
  opacity: .82;
}

.gallery_modal_submit:disabled {
  opacity: .5;
  cursor: default;
}

.gallery_modal_sent {
  margin-top: 4px;
  border: 1px solid rgba(52,211,153,.3);
  border-radius: 14px;
  background: rgba(52,211,153,.1);
  padding: 16px;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
  color: #bbf7d0;
}

@media (max-width: 1023px) {
  .gallery_detail_layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* The left sidebar is hidden below 993px, so its reserved gutter must go too. */
@media (max-width: 992px) {
  section.page.gallery {
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: clip;
  }

  .gallery_container {
    max-width: 100% !important;
    padding-left: 4px;
    padding-right: 4px;
    /* Clear the fixed burger button (44px tall at top: 16px). */
    padding-top: 76px;
    padding-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .gallery_hero {
    min-height: 0;
    padding: 22px 20px 18px !important;
    gap: 18px;
  }

  .gallery_hero_main {
    gap: 18px;
  }

  .gallery_title {
    font-size: 28px !important;
  }

  .gallery_subtitle {
    font-size: 14px !important;
  }

  .gallery_hero_intro .gallery_title {
    margin-top: 9px;
  }

  .gallery_hero_intro .gallery_subtitle {
    margin-top: 10px;
  }

  .gallery_hero_aside {
    align-self: stretch;
  }

  .gallery_hero_stat {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }

  .gallery_hero_stat strong {
    font-size: 22px;
  }

  .gallery_publish {
    width: 100%;
  }

  /* Filters: two dropdowns side by side, search on its own row. */
  .gallery_filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px !important;
  }

  .gallery_dropdown {
    min-width: 0;
  }

  .gallery_dropdown_button {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 10px 0 12px;
  }

  .gallery_search {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .gallery_search .gallery_field {
    min-height: 44px;
    height: 44px;
  }

  /* iOS Safari zooms the page when a focused input is under 16px. */
  .gallery_field {
    font-size: 16px !important;
  }

  .gallery_detail_panel {
    position: static;
    padding: 20px !important;
  }

  .gallery_detail_panel .gallery_detail_title {
    font-size: 24px !important;
    margin-top: 13px;
  }

  .gallery_detail_preview--featured .gallery_detail_media,
  .gallery_detail_preview--artwork .gallery_detail_media,
  .gallery_detail_preview--workshop .gallery_detail_media,
  .gallery_detail_preview--wide .gallery_detail_media {
    width: 100%;
    max-width: 100%;
  }

  .gallery_detail_meta div {
    flex-wrap: wrap;
    gap: 4px 14px;
  }

  .gallery_detail_meta strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .gallery_file_action {
    padding: 0 14px !important;
  }

  .gallery_file_action strong {
    max-width: 100%;
  }

  .gallery_modal_overlay {
    padding: 16px 12px;
  }

  .gallery_modal_panel {
    padding: 20px !important;
  }

  .gallery_modal_head {
    gap: 12px;
    margin-bottom: 16px;
  }

  .gallery_modal_title {
    font-size: 18px;
  }
}

/* Two-up posters on small tablets / large phones: shrink the card chrome. */
@media (max-width: 768px) and (min-width: 561px) {
  .gallery_card_overlay {
    padding: 12px 12px 11px;
  }

  .gallery_card_title {
    font-size: 13px;
  }

  .gallery_card_by {
    font-size: 10px;
    gap: 6px;
  }

  .gallery_card_foot {
    padding: 8px 9px 9px;
  }

  .gallery_card_btn {
    height: 36px;
    font-size: 11px;
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .gallery_hero,
  .gallery_filters,
  .gallery_toolbar,
  .gallery_pagination,
  .gallery_detail_preview,
  .gallery_detail_panel {
    border-radius: 22px !important;
  }

  .gallery_container {
    padding-top: 72px;
  }

  /* A poster card needs the full width to stay readable. */
  .gallery_grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .gallery_card {
    margin-bottom: 0;
  }

  .gallery_card--featured .gallery_card_preview,
  .gallery_card--artwork .gallery_card_preview,
  .gallery_card--workshop .gallery_card_preview {
    aspect-ratio: 4 / 5;
  }

  .gallery_card_title {
    font-size: 16px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .gallery_toolbar,
  .gallery_pagination {
    align-items: stretch !important;
    flex-direction: column;
    gap: 10px;
  }

  .gallery_pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center !important;
    gap: 6px;
    padding: 8px !important;
  }

  .gallery_pagination_info {
    text-align: center;
    padding: 0 4px;
    white-space: nowrap;
  }

  .gallery_publish,
  .gallery_page_button {
    width: 100%;
  }

  .gallery_pagination .gallery_page_button {
    min-width: 0;
    padding: 0 10px !important;
  }

  .gallery_detail_media {
    min-height: 200px;
  }

  .gallery_card_meta span::after {
    display: none !important;
  }
}

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

  .gallery_title {
    font-size: 25px !important;
  }
}

/* Poster hover states stick after a tap on touch devices. */
@media (hover: none) {
  .gallery_card:hover .gallery_card_scrim {
    opacity: 1;
  }

  .gallery_card:hover {
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.46) !important;
  }
}

/* Profile gallery submission */
section.page.profile_gallery_new {
  padding: 0 !important;
  background: transparent !important;
}

.profile_gallery_new_container {
  width: 100%;
  max-width: 1180px !important;
  padding: 60px 20px;
}

.profile_gallery_new_back {
  display: inline-flex;
  margin-bottom: 4px;
  font-family: var(--font-family);
  font-weight: 700;
}

.profile_gallery_new_hero,
.profile_gallery_new_panel,
.profile_gallery_new_side,
.profile_gallery_new_notice,
.profile_gallery_new_actions {
  border: 1px solid var(--seraya-plashka);
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 40px rgba(0,0,0,.46);
}

.profile_gallery_new_hero {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 32px;
  padding: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 68%),
    rgba(255,255,255,.02);
}

.profile_gallery_new_kicker,
.profile_gallery_new_panel_head span {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.profile_gallery_new_hero h1 {
  margin-top: 12px;
  font-family: var(--font-family);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--obvodka-vybora);
}

.profile_gallery_new_hero p:not(.profile_gallery_new_kicker) {
  max-width: 720px;
  margin-top: 12px;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,.52);
}

.profile_gallery_new_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}

.profile_gallery_new_form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.profile_gallery_new_panel,
.profile_gallery_new_side {
  border-radius: 28px;
  padding: 20px;
}

.profile_gallery_new_panel_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.profile_gallery_new_panel_head p {
  margin: 0;
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.profile_gallery_new_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
}

.profile_gallery_new_field {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin-top: 14px;
}

.profile_gallery_new_grid .profile_gallery_new_field {
  margin-top: 0;
}

.profile_gallery_new_field > span {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.62);
}

.profile_gallery_new_field input,
.profile_gallery_new_field textarea,
.profile_gallery_dropdown_button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(0,0,0,.28);
  color: #fff;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  outline: none;
}

.profile_gallery_new_field input,
.profile_gallery_new_field textarea {
  padding: 0 14px;
}

.profile_gallery_new_field textarea {
  min-height: 132px;
  padding-top: 13px;
  resize: vertical;
  line-height: 1.45;
}

.profile_gallery_new_field input::placeholder,
.profile_gallery_new_field textarea::placeholder {
  color: rgba(255,255,255,.28);
}

.profile_gallery_new_field input:focus,
.profile_gallery_new_field textarea:focus,
.profile_gallery_dropdown_button_open,
.profile_gallery_dropdown_button:hover {
  border-color: rgba(255,255,255,.3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
    rgba(0,0,0,.34);
}

.profile_gallery_dropdown {
  position: relative;
}

.profile_gallery_dropdown_button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  text-align: left;
}

.profile_gallery_dropdown_button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile_gallery_dropdown_button span:last-child {
  color: rgba(255,255,255,.52);
  font-size: 18px;
  transform: translateY(-2px);
  transition: transform .2s, color .2s;
}

.profile_gallery_dropdown_button_open span:last-child {
  color: #fff;
  transform: translateY(1px) rotate(180deg);
}

.profile_gallery_dropdown_menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(8,8,8,.98);
  box-shadow: 0 22px 50px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
}

.profile_gallery_dropdown_option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.profile_gallery_dropdown_option:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.065);
  color: #fff;
}

.profile_gallery_dropdown_option_active,
.profile_gallery_dropdown_option_active:hover {
  border-color: transparent;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 15px rgba(255,255,255,.18);
  color: #000;
}

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

.profile_gallery_upload {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(0,0,0,.24);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}

.profile_gallery_upload:hover,
.profile_gallery_upload.has-file {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.045);
}

.profile_gallery_upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.profile_gallery_upload span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.profile_gallery_upload small {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255,255,255,.42);
}

.profile_gallery_file_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.profile_gallery_file_list span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  padding: 6px 10px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.68);
}

.profile_gallery_new_side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 14px;
}

.profile_gallery_new_preview {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(0,0,0,.32);
}

.profile_gallery_new_preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile_gallery_new_preview div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
}

.profile_gallery_new_check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255,255,255,.72);
}

.profile_gallery_new_check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--obvodka-vybora);
}

.profile_gallery_new_check--rights {
  color: rgba(255,255,255,.82);
}

.profile_gallery_new_hint {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  padding: 14px;
}

.profile_gallery_new_hint p {
  margin: 0 0 6px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.profile_gallery_new_hint span {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255,255,255,.48);
}

.profile_gallery_new_notice {
  border-radius: 20px;
  padding: 14px 16px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
}

.profile_gallery_new_notice--error {
  border-color: rgba(248,113,113,.28);
  background: rgba(248,113,113,.1);
  color: #ffd6d6;
}

.profile_gallery_new_notice--ok {
  border-color: rgba(74,222,128,.24);
  background: rgba(74,222,128,.1);
  color: #d7ffe4;
}

.profile_gallery_new_actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-radius: 28px;
  padding: 14px;
}

.profile_gallery_new_actions button {
  min-height: 44px;
  border-radius: 16px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  transition: opacity .2s;
}

.profile_gallery_new_actions button:first-child {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.82);
}

.profile_gallery_new_actions button:last-child {
  border: 0;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 17px rgba(255,255,255,.24);
  color: #000;
}

.profile_gallery_new_actions button:hover {
  opacity: .72;
}

.profile_gallery_new_actions button:disabled {
  opacity: .5;
}

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

  .profile_gallery_new_side {
    position: static;
  }
}

@media (max-width: 700px) {
  .profile_gallery_new_container {
    padding-top: 28px;
  }

  .profile_gallery_new_hero,
  .profile_gallery_new_panel,
  .profile_gallery_new_side,
  .profile_gallery_new_actions {
    border-radius: 22px;
  }

  .profile_gallery_new_hero {
    min-height: 0;
    padding: 24px;
  }

  .profile_gallery_new_hero h1 {
    font-size: 28px;
  }

  .profile_gallery_new_grid,
  .profile_gallery_new_uploads,
  .profile_gallery_new_actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

video {
  display: block;
  border: none;
  outline: none;
  background: transparent;
}

.page-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
  pointer-events: none;
}

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

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
  display: block;
}

body {
    font-family: "Montserrat", sans-serif;
  font-weight: 400;
  top: 0;
  left: 0;
  padding: 0;
  background: #040404;
  width: 100%;
  color: #fff;
}

main {
  position: relative;
  z-index: 1;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

html,
body {
  width: 100vw;
  overflow-x: hidden;
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 3px;
  background-color: #000000;
  height: 5px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #949494;
  width: 10px;
}

@font-face {
  font-family: var(--second-family);
  src: url("../fonts/VelaSans-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: var(--third-family);
  src: url("../fonts/consolas.ttf") format("truetype");
  font-weight: 400;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #949494;
  border-radius: 10px;
  background-color: #ffffff1a;
}


:root {
	--seraya-plashka: rgba(255, 255, 255, 0.102);
	--chernyyy: rgba(0, 0, 0, 0.41);
	--serayhover: rgba(172, 172, 172, 0.1);
	--seryypressed: rgba(0, 0, 0, 0.1);
	--obvodka-vybora: #fff;
	--punktir: rgba(218, 218, 218, 0.5);
	--obvodka: rgba(255, 255, 255, 0.1);
	--colorblack: rgba(0, 0, 0, 0.6);
	--chernyy: rgba(10, 10, 10, 0.6);
	--color: rgba(0, 0, 0, 0.41);
	--serost2: rgba(88, 85, 85, 0.1);


    --font-family: "Montserrat", sans-serif;
  --second-family: "Vela Sans GX", sans-serif;
  --third-family: "Consolas", sans-serif;
  --font3: "Inter", sans-serif;
}






header{

}
.header_main .container{
width: calc(100% - 200px);
display: block;
margin: 0 auto;
}
.header_main {
  width: calc(100% - 200px);
  height: auto;
backdrop-filter: blur(60.65727233886719px);
background: var(--chernyyy);
position: fixed;
left: 100px;
top: 28px;
z-index: 1;
border-radius: 24px;
}
.header_main_content {
  padding: 20px;
}
.header_main_items {
  display: flex;
  align-items: center;
}
.header_main_item_left {
  display: flex;
  align-items: center;
  gap: 80.93px;
  list-style: none;
}
.header_main_item_left_logo {
  vertical-align: middle;
}
.header_main_item_left_navs,
.header_main_item_right_navs {
   display: flex;
  align-items: center;
  gap: 80.93px;
  list-style: none;
}
.header_main_item_left_nav,
.header_main_item_right_nav {
padding: 12.18px;
border-radius: 17px;
cursor: pointer;
transition: all .5s;
}
.header_main_item_left_nav {
  position: relative;
}
.header_main_item_left_nav a,
.header_main_item_right_nav a,
.header_main_item_left_nav button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header_main_item_left_nav button {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.header_nav_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  line-height: 0;
}
.header_nav_icon svg {
  display: block;
  width: 31px;
  height: 31px;
  overflow: visible;
}
.header_nav_tool_label {
  display: none;
}
.header_nav_unread_badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  background: #34d399;
  color: #06130d;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}
.header_nav_icon--left-2 svg {
  width: 30px;
  height: 31px;
}
.header_nav_icon--left-4 svg {
  transform: scale(1.15);
}
.header_nav_icon--left-5 svg {
  transform: scale(1.22);
}
/* More button */
.header_main_item_left_nav_more {
  z-index: 5;
}

/* dots animate on open */
.header_nav_icon--more circle {
  transition: opacity .2s ease, transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  transform-box: fill-box;
}
.header_nav_icon--more.is-open circle:nth-child(1) {
  opacity: 0;
  transform: scale(0.4);
}
.header_nav_icon--more.is-open circle:nth-child(3) {
  opacity: 0;
  transform: scale(0.4);
}
.header_nav_icon--more.is-open circle:nth-child(2) {
  transform: scale(1.25);
}

/* Dropdown panel */
.header_more_menu {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  width: 214px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(0, 0, 0, 0.88);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: blur(18px) saturate(0.9);
  -webkit-backdrop-filter: blur(18px) saturate(0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-10px) scale(0.95);
  transform-origin: left center;
  transition:
    opacity .18s ease,
    visibility 0s linear .18s,
    transform .26s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}
.header_more_menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0) scale(1);
  transition:
    opacity .15s ease,
    visibility 0s linear 0s,
    transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header row inside dropdown */
.header_more_menu_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity .2s ease,
    transform .24s cubic-bezier(0.16, 1, 0.3, 1);
}
.header_more_menu.is-open .header_more_menu_header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .02s;
}
.header_more_menu_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
.header_more_menu_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.46);
  line-height: 1;
}

/* Divider */
.header_more_menu_divider {
  height: 1px;
  margin: 4px 6px 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.065) 30%, rgba(255, 255, 255, 0.065) 70%, transparent);
  opacity: 0;
  transition: opacity .2s ease .04s;
}
.header_more_menu.is-open .header_more_menu_divider {
  opacity: 1;
}

/* Menu items */
.header_more_menu .header_more_menu_item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border-radius: 12px;
  padding: 8px 10px 8px 10px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.64);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(0.16, 1, 0.3, 1),
    background .16s ease,
    color .16s ease;
}
.header_more_menu.is-open .header_more_menu_item {
  opacity: 1;
  transform: translateX(0);
}
.header_more_menu.is-open .header_more_menu_item:nth-of-type(1) { transition-delay: .05s, .05s, 0s, 0s; }
.header_more_menu.is-open .header_more_menu_item:nth-of-type(2) { transition-delay: .10s, .10s, 0s, 0s; }

/* icon wrapper */
.header_more_menu_item_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.075);
  flex-shrink: 0;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.header_more_menu_item_icon .header_nav_icon,
.header_more_menu_item_icon .header_nav_icon svg {
  width: 22px;
  height: 22px;
}
.header_more_menu_item_icon .header_nav_icon {
  opacity: .78;
  transition: opacity .16s ease, transform .18s ease;
}

/* text */
.header_more_menu_item_text {
  flex: 1;
  min-width: 0;
}
.header_more_menu_item_label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* arrow chevron */
.header_more_menu_item_arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity .16s ease,
    transform .18s cubic-bezier(0.34, 1.56, 0.64, 1),
    color .16s ease;
}

/* Active state */
.header_more_menu_item.is-active {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.018);
  color: rgba(255, 255, 255, 0.88);
}
.header_more_menu_item.is-active .header_more_menu_item_icon {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.14);
}
.header_more_menu_item.is-active .header_more_menu_item_icon .header_nav_icon {
  opacity: 1;
}
.header_more_menu_item.is-active .header_more_menu_item_arrow {
  opacity: 1;
  transform: translateX(0);
  color: rgba(255, 255, 255, 0.4);
}

/* Hover state */
.header_more_menu_item:hover {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.018);
  color: #fff;
}
.header_more_menu_item:hover .header_more_menu_item_icon {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.06);
}
.header_more_menu_item:hover .header_more_menu_item_icon .header_nav_icon {
  opacity: 1;
  transform: scale(1.08);
}
.header_more_menu_item:hover .header_more_menu_item_arrow {
  opacity: 1;
  transform: translateX(0);
  color: rgba(255, 255, 255, 0.55);
}

/* dim active when another item is hovered */
.header_more_menu:has(.header_more_menu_item:hover) .header_more_menu_item.is-active:not(:hover) {
  background: transparent;
  color: rgba(255, 255, 255, 0.52);
}
.header_more_menu:has(.header_more_menu_item:hover) .header_more_menu_item.is-active:not(:hover) .header_more_menu_item_icon {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}
.header_more_menu:has(.header_more_menu_item:hover) .header_more_menu_item.is-active:not(:hover) .header_more_menu_item_icon .header_nav_icon {
  opacity: .72;
}
.header_more_menu:has(.header_more_menu_item:hover) .header_more_menu_item.is-active:not(:hover) .header_more_menu_item_arrow {
  opacity: 0;
}

.header_main .header_more_menu {
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-50%) translateY(-8px) scale(0.96);
  transform-origin: top center;
}

.header_main .header_more_menu.is-open {
  transform: translateX(-50%) translateY(0) scale(1);
}

.header_main .header_more_menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.header_main .header_more_menu_title {
  color: rgba(255, 255, 255, 0.28);
}

.header_main .header_more_menu_badge,
.header_main .header_more_menu_item_icon {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.075);
}

.header_main .header_more_menu_divider {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045) 30%, rgba(255, 255, 255, 0.045) 70%, transparent);
}

.header_main .header_more_menu .header_more_menu_item {
  color: rgba(255, 255, 255, 0.62);
}

.header_main .header_more_menu_item.is-active {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.016);
  color: rgba(255, 255, 255, 0.84);
}

.header_main .header_more_menu_item:hover {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.018);
  color: #fff;
}

.header_main .header_more_menu_item.is-active .header_more_menu_item_icon,
.header_main .header_more_menu_item:hover .header_more_menu_item_icon {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.095);
}
.header_main_item_right_nav_active,
.header_main_item_left_nav_active{
    box-shadow: -5px 0 8px 0 rgba(225, 213, 245, 0.21);
background: linear-gradient(89deg, rgba(255, 255, 255, 0.5) 0%, rgba(47, 47, 47, 0.5) 100%);
}

.header_main_item_right_nav:hover,
.header_main_item_left_nav:hover{
  transform: scale(1.03);
}

.header_main_item_right {
   display: flex;
  align-items: center;
  gap: 80.93px;
  list-style: none;
  margin-left: auto;
}

.header_main_item_right_nav_balance {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(16, 16, 16, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform .5s, border-color .5s, background .5s, box-shadow .5s;
  flex-shrink: 0;
}

.header_main_item_right_nav_balance::before{
  content: ' ';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.12), transparent 44%, rgba(255, 255, 255, 0.03));
  opacity: .36;
  pointer-events: none;
}

.header_main_item_right_nav_balance:hover {
  transform: scale(1.03);
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(89deg, rgba(255, 255, 255, 0.11) 0%, rgba(47, 47, 47, 0.36) 100%),
    rgba(18, 18, 18, 0.9);
  box-shadow:
    -5px 0 8px 0 rgba(225, 213, 245, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.header_main_item_right_nav_balance a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 1px;
  width: 100%;
  height: 100%;
  color: var(--obvodka-vybora);
  line-height: 1;
}

.header_main_item_right_nav_balance svg {
  display: block;
  width: 16px;
  height: 16px;
}

.header_main_item_right_nav_balance span{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  color: var(--obvodka-vybora);
}

.header_main_language {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.header_language_menu {
  position: relative;
  z-index: 35;
}

.header_language_trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 78px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 28px rgba(0,0,0,.22);
  font-family: var(--font-family);
  color: #fff;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}

.header_language_trigger:hover,
.header_language_trigger:focus-visible,
.header_language_menu.is-open .header_language_trigger {
  border-color: rgba(255,255,255,.32);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 34px rgba(0,0,0,.3);
  outline: none;
}

.header_language_globe {
  position: relative;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 50%;
  font-size: 0;
  opacity: .9;
}

.header_language_globe::before,
.header_language_globe::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.52);
}

.header_language_globe::before {
  width: 7px;
  height: 15px;
}

.header_language_globe::after {
  width: 13px;
  height: 1px;
  border-left: 0;
  border-right: 0;
}

.header_language_current {
  min-width: 22px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.header_language_chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255,255,255,.72);
  border-bottom: 1.5px solid rgba(255,255,255,.72);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}

.header_language_menu.is-open .header_language_chevron {
  transform: translateY(2px) rotate(225deg);
}

.header_language_dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 230px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(10,12,14,.96);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}

.header_language_menu.is-open .header_language_dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.header_language_option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: background .16s, color .16s;
}

.header_language_option:hover,
.header_language_option:focus-visible,
.header_language_option.is-active {
  background: rgba(255,255,255,.09);
  color: #fff;
  outline: none;
}

.header_language_option_code {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  font-size: 11px;
  font-weight: 900;
}

.header_language_option.is-active .header_language_option_code {
  background: #fff;
  color: #070707;
}

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

.header_language_option_text strong {
  font-size: 13px;
  font-weight: 800;
}

.header_language_option_text em {
  font-size: 11px;
  font-style: normal;
  color: rgba(255,255,255,.46);
}

.container{
  width: 100%;
  max-width: 1720px;
  display: block;
  margin: 0 auto;
}

.main_intro {
  width: 100%;
  height: auto;
  margin-top: 245px;
}
.main_intro_items {
  display: flex;
  align-items: center;
}
.main_intro_item:first-child {
  max-width: 758px;
}
.main_intro_item:last-child{
  margin-left: auto;
  position: relative;
}
.main_intro_title {
  font-family: var(--font-family);
font-weight: 800;
font-size: 65px;
line-height: 97%;
letter-spacing: -0.02em;
background: linear-gradient(90deg, #fff 0%, #a9a9a9 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main_intro_subtitle {
  margin-top: 70px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
background: linear-gradient(90deg, #fff 0%, #928c8c 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main_intro_item_button {
  margin-top: 70px;
backdrop-filter: blur(78.21891784667969px);
box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.23);
background: var(--seraya-plashka);
outline: none;
border: none;
width: 432px;
padding: 10.29px 12px;
height: auto;
border-radius: 24px;
cursor: pointer;
transition: all .5s;
}
.main_intro_item_button span{
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: #000;
padding: 16.5px 97px;
display: block;
box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.4);
background: var(--obvodka-vybora);
border-radius: 14px;
}
.main_intro_item_button:hover{
  transform: scale(1.03);
}
.main_intro_item_image {
  vertical-align: middle;
}

.main_intro_item_image_lines{
  position: absolute;
  right: calc(50% - 245px);
  bottom: -80px;
  z-index: -1;
}

/* ===== Homepage sections below hero ===== */

.home_section {
  width: 100%;
  padding: 100px 0;
  position: relative;
}

.home_section_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -0.02em;
  text-align: center;
  background: linear-gradient(90deg, #fff 0%, #a9a9a9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}

.home_section_subtitle {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 60px;
}

/* Tools grid */
.home_tools_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.home_tool_card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px 28px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  transition: all 0.4s;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.home_tool_card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.home_tool_card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.home_tool_card_icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home_tool_card_icon svg {
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
  transition: transform 0.3s ease, color 0.3s ease;
}

.home_tool_card:hover .home_tool_card_icon {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

.home_tool_card:hover .home_tool_card_icon svg {
  color: #fff;
  transform: scale(1.06);
}

.home_tool_card_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}

.home_tool_card_desc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

.home_tool_card_arrow {
  margin-top: auto;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s;
}

.home_tool_card:hover .home_tool_card_arrow {
  color: #fff;
}

/* Features strip */
.home_features_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.home_feature_item {
  text-align: center;
  padding: 32px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.home_feature_number {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 36px;
  background: linear-gradient(135deg, #fff 0%, #888 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home_feature_label {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* Steps / how it works */
.home_steps {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.home_steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

.home_step {
  flex: 1;
  text-align: center;
  position: relative;
}

.home_step_number {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.8);
}

.home_step_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.home_step_desc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* CTA section */
.home_cta {
  text-align: center;
  padding: 80px 0 120px;
}

.home_cta_title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 48px;
  background: linear-gradient(90deg, #fff 0%, #a9a9a9 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

.home_cta_desc {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 40px;
}

.home_cta_button {
  display: inline-block;
  backdrop-filter: blur(78px);
  box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.23);
  background: var(--seraya-plashka);
  border: none;
  padding: 10px 12px;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.5s;
  text-decoration: none;
}

.home_cta_button span {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 18px;
  color: #000;
  padding: 16px 64px;
  display: block;
  box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.4);
  background: var(--obvodka-vybora);
  border-radius: 14px;
}

.home_cta_button:hover {
  transform: scale(1.03);
}

/* Responsive for homepage sections */
@media (max-width: 1024px) {
  .home_tools_grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
  .home_features_grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
  .home_steps {
    flex-direction: column;
    gap: 32px;
    padding: 0 20px;
  }
  .home_steps::before {
    display: none;
  }
  .home_section_title {
    font-size: 32px;
  }
  .home_cta_title {
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .home_tools_grid {
    grid-template-columns: 1fr;
  }
  .home_features_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .home_section {
    padding: 60px 0;
  }
  .home_section_title {
    font-size: 26px;
    padding: 0 20px;
  }
  .home_section_subtitle {
    font-size: 15px;
    padding: 0 20px;
  }
  .home_cta_title {
    font-size: 28px;
    padding: 0 20px;
  }
  .home_cta_desc {
    font-size: 15px;
    padding: 0 20px;
  }
}

.header{
backdrop-filter: blur(28px) saturate(1.08);
-webkit-backdrop-filter: blur(28px) saturate(1.08);
background: rgba(5, 5, 5, 0.54);
position: fixed;
left: 40px;
top: 20px;
height: calc(100% - 40px);
z-index: 50;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.028);
box-shadow:
  0 18px 48px rgba(0, 0, 0, 0.32),
  inset 0 1px 0 rgba(255, 255, 255, 0.014);
overflow: visible;
--sidebar-nav-gap: clamp(8px, 1.8vh, 16px);
--sidebar-group-gap: clamp(18px, 3.2vh, 28px);
--sidebar-padding: clamp(14px, 2.35vh, 22px);
--sidebar-icon-box: clamp(44px, 5.6vh, 55px);
}

.header .container{
width: calc(100% - 200px);
display: block;
margin: 0 auto;
}

.header .header_main_items{
flex-direction: column;
min-height: 100%;
height: auto;
}

.header .header_main_item_right {
  margin-left: 0px;
  margin-top: auto;
}

.header .header_main_item_left {
  flex-direction: column;
  gap: var(--sidebar-group-gap);
}

.header .header_main_item_left_navs, .header .header_main_item_right_navs{
flex-direction: column;
  gap: var(--sidebar-nav-gap);
}

.header .header_main_item_left_logo{
  width: 50px;
height: 52px;
flex-shrink: 0;
}

.header .header_main_content{
  height: 100%;
  padding: var(--sidebar-padding);
  min-height: 0;
  overflow: visible;
  scrollbar-width: none;
  box-sizing: border-box;
}

.header .header_main_content::-webkit-scrollbar {
  display: none;
}

.header .header_main_item_left_nav,
.header .header_main_item_right_nav {
  width: var(--sidebar-icon-box);
  height: calc(var(--sidebar-icon-box) + 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.header .header_main_language {
  width: calc(var(--sidebar-icon-box) + 12px);
  box-sizing: border-box;
}

.header .header_language_trigger {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  gap: 4px;
  border-radius: 13px;
}

.header .header_language_globe {
  display: none;
}

.header .header_language_current {
  min-width: 20px;
  font-size: 11px;
}

.header .header_language_dropdown {
  left: calc(100% + 12px);
  right: auto;
  top: auto;
  bottom: 0;
  max-height: min(420px, calc(100vh - 28px));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-8px) scale(.98);
}

.header .header_language_menu.is-open .header_language_dropdown {
  transform: translateX(0) scale(1);
}

@media (max-height: 860px) and (min-width: 993px) {
  section.header {
    --sidebar-nav-gap: clamp(8px, 1.8vh, 16px);
    --sidebar-group-gap: clamp(10px, 2vh, 18px);
    --sidebar-padding: clamp(10px, 1.7vh, 16px);
    --sidebar-icon-box: clamp(38px, 5vh, 44px);
  }

  section.header .header_main_item_left_logo {
    width: clamp(42px, 6vh, 50px);
    height: auto;
  }

  section.header .header_main_item_right_nav_balance {
    width: clamp(42px, 5.4vh, 52px);
    height: clamp(42px, 5.4vh, 52px);
  }

  section.header .header_nav_icon,
  section.header .header_nav_icon svg {
    width: clamp(25px, 3.5vh, 31px);
    height: clamp(25px, 3.5vh, 31px);
  }
}





.authorization_main {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.authorization_rect {
  width: 100%;
  max-width: 672px;
  height: auto;
  border: 1px solid var(--seraya-plashka);
border-radius: 40px;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.02);
display: block;
margin: 0 auto;
margin-top: auto;
margin-bottom: auto;
}
.authorization_rect_content {
  padding: 49px 80px;
  padding-bottom: 39.25px;
}
.authorization_rect_icon {
  border: 1.40px solid var(--seraya-plashka);
border-radius: 22px;
width: 112px;
height: 112px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 0 28px 0 var(--seraya-plashka);
background: rgba(255, 255, 255, 0.05);
}
.authorization_rect_icon svg{
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  margin-top: 0;
}
.authorization_rect_title {
  margin-top: 32px;
  font-family: var(--font-family);
font-weight: 700;
font-size: 40px;
text-align: center;
color: var(--obvodka-vybora);
}
.authorization_rect_subtitle {
  margin-top: 20px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 18px;
line-height: 133%;
text-align: center;
color: rgba(255, 255, 255, 0.5);
}
.authorization_rect_button {
  margin-top: 32px;
  border-radius: 20px;
padding: 20px;
box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2);
background: var(--obvodka-vybora);
width: 100%;
outline: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
text-align: center;
color: #000;
cursor: pointer;
transition: all .5s;
}
.authorization_rect_button:hover{
  transform: scale(1.03);
}
.authorization_rect_button:disabled{
  cursor: wait;
  opacity: .65;
  transform: none;
}
.authorization_rect_button_secondary{
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--seraya-plashka);
  color: var(--obvodka-vybora);
  box-shadow: none;
}
.authorization_email_form{
  margin-top: 28px;
  width: 100%;
  display: grid;
  gap: 10px;
}
.authorization_email_input{
  width: 100%;
  min-width: 0;
  border: 1px solid var(--seraya-plashka);
  border-radius: 16px;
  padding: 18px 20px;
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  color: #fff;
}
.authorization_email_input::placeholder{
  color: rgba(255, 255, 255, 0.35);
}
.authorization_email_form .authorization_rect_button{
  margin-top: 2px;
}
.authorization_email_status{
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.68);
}
.authorization_email_error{
  margin-top: 14px;
  border-color: rgba(255, 85, 85, 0.45);
  color: #ff8f8f;
  background: rgba(255, 60, 60, 0.08);
}
.authorization_rect_info {
  margin-top: 32px;
  width: 100%;
  height: auto;
  border: 1px solid var(--seraya-plashka);
border-radius: 12px;
padding: 20px 16px;
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 122%;
text-align: center;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
}

.authorization_main_modern{
  justify-content: center;
  padding: 72px 20px;
  min-height: 100vh;
}
.authorization_shell{
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.authorization_hero{
  max-width: 760px;
}
.authorization_eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}
.authorization_hero h1{
  margin-top: 18px;
  font-family: var(--font-family);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0;
}
.authorization_hero p{
  margin-top: 16px;
  max-width: 680px;
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
}
.authorization_panel{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: start;
}
.authorization_email_card,
.authorization_provider_card{
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.48);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}
.authorization_email_card{
  display: grid;
  gap: 16px;
}
.authorization_email_card h2,
.authorization_provider_card h2{
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 24px;
  color: #fff;
}
.authorization_email_card p,
.authorization_provider_card p{
  margin-top: 7px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
.authorization_field{
  display: grid;
  gap: 8px;
  font-family: var(--font-family);
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 700;
}
.authorization_field input{
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 17px 18px;
  outline: none;
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 600;
}
.authorization_field input:focus{
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.authorization_primary_button,
.authorization_secondary_button,
.authorization_provider_button{
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  padding: 0 18px;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease;
}
.authorization_primary_button{
  background: #fff;
  color: #050505;
}
.authorization_secondary_button{
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.authorization_provider_card{
  display: grid;
  gap: 12px;
}
.authorization_provider_button{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.authorization_provider_discord{
  background: rgba(88, 101, 242, 0.22);
  border-color: rgba(88, 101, 242, 0.45);
}
.authorization_provider_mark{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  flex: 0 0 34px;
}
.authorization_provider_mark svg{
  width: 21px;
  height: 21px;
  display: block;
}
.authorization_provider_mark_fill svg{
  fill: currentColor;
}
.authorization_provider_mark_steam svg{
  fill: currentColor;
}
.authorization_primary_button:hover,
.authorization_secondary_button:hover,
.authorization_provider_button:hover{
  transform: translateY(-1px);
}
.authorization_primary_button:disabled,
.authorization_secondary_button:disabled,
.authorization_provider_button:disabled{
  cursor: wait;
  opacity: .55;
  transform: none;
}
.authorization_telegram_box{
  position: relative;
  min-height: 56px;
  display: grid;
  align-items: center;
}
.authorization_provider_telegram_fake{
  min-height: 56px;
  background: rgba(36, 160, 222, 0.22);
  border-color: rgba(36, 160, 222, 0.46);
}
.authorization_telegram_widget{
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.01;
  overflow: hidden;
  border-radius: 16px;
}
.authorization_telegram_box iframe{
  width: 100% !important;
  min-width: 100% !important;
  height: 56px !important;
  display: block;
}
.authorization_telegram_status,
.authorization_provider_note,
.authorization_status{
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
.authorization_status{
  margin: 0;
  border-radius: 14px;
  padding: 12px 14px;
}
.authorization_status_ok{
  background: rgba(70, 255, 160, 0.08);
  color: rgba(170, 255, 210, 0.9);
}
.authorization_status_error{
  background: rgba(255, 80, 80, 0.1);
  color: #ff9b9b;
}
.authorization_actions_row{
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 180px);
  gap: 12px;
}

.error_noconnection .authorization_rect_icon,
.error_page .authorization_rect_icon{
  border-radius: 100px;
}

.error_noconnection .authorization_rect_icon svg,
.error_page .authorization_rect_icon svg,
.error_banned .authorization_rect_icon svg{
margin-top: 0;
}


.page .container{
  max-width: 1435px;
}

.page .authorization_rect_icon{
  border: 0.83px solid var(--seraya-plashka);
border-radius: 20px;
padding: 0px;
width: 66px;
height: 66px;
box-shadow: 0 0 25px 0 rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
}

.page .authorization_rect_icon svg{
  margin-top: 0px;
}



.page {
  width: 100%;
  height: auto;
  min-height: 100vh;
}
.page_main {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 50px;
}

.page_title {
  font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
letter-spacing: -0.03em;
text-align: center;
color: var(--obvodka-vybora);
margin-top: 12px;
}
.page_subtitle {
margin-top: 12px;
font-family: "Vela Sans", sans-serif;
font-weight: 500;
font-size: 14px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
}
.donate_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--obvodka-vybora);
  margin-top: 12px;
}
.donate_subtitle {
  margin-top: 12px;
  font-family: "Vela Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
.donate_plans {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.donate_plan {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--seraya-plashka);
border-radius: 32px;
position: relative;
}
.donate_plan_content {
padding: 32px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.donate_plan_title {
  font-family: var(--font-family);
font-weight: 800;
font-size: 36px;
color: var(--obvodka-vybora);
}
.donate_plan_subtitle {
  margin-top: 12px;
  font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.donate_plan_price {
  margin-top: 32px;
  font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.donate_plan_price span{
font-weight: 900;
font-size: 42px;
color: var(--obvodka-vybora);
}
.donate_plan_enabled_items,
.donate_plan_missing_items {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 23px;
}
.donate_plan_enabled_item,
.donate_plan_missing_item {
  display: flex;
  align-items: center;
  gap: 14.11px;
  font-family: var(--font-family);
font-weight: 700;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.donate_plan_enabled_item svg{
  vertical-align: middle;
}
.donate_plan_line {
  vertical-align: middle;
}
.donate_plan_missing_items {
  margin-top: 0px;
  opacity: .4;
    margin-bottom: 27px;

}
.donate_plan_defolte {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
text-align: center;
color: var(--obvodka-vybora);
outline: none;
background: var(--seryypressed);
border: 1px solid var(--seraya-plashka);
border-radius: 16px;
padding: 16px;
width: 100%;
margin-top: 28px;
cursor: pointer;
transition: all .5s;
}
.donate_plan_defolte:hover{
  transform: scale(1.03);
}
.donate_plan_missing_item{
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.8);
}
.donate_plan_teg {
position: absolute;
left: 50%;
top: -22.25px;
transform:translateX(-50%);
font-family: var(--font-family);
font-weight: 900;
font-size: 15px;
line-height: 150%;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #000;
box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
border-radius: 35px;
padding: 11px 29px;
}
.donate_plan_buy {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
text-align: center;
color: var(--obvodka-vybora);
outline: none;
background: var(--seraya-plashka);
border: 1px solid var(--seraya-plashka);
border-radius: 16px;
padding: 19px;
width: 100%;
cursor: pointer;
transition: all .5s;
margin-top: 28px;
}
.donate_plan_buy:hover{
  transform: scale(1.03);
}

/* highlighted plan is now handled via .donate_plan_highlighted class */
.donate_credits {
  width: 100%;
  height: auto;
  margin-top: 32px;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.19);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 28px;
margin-bottom: 68px;
}
.donate_credits_content {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 55.6px;
}
.donate_credits_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: var(--obvodka-vybora);
white-space: nowrap;
}
.donate_credits_items {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 12px;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
border-radius: 16px;
background: var(--color);
}
.donate_credits_item {
background: var(--seraya-plashka);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: 16px;
padding: 12px 16px;
outline: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
text-align: center;
color: var(--obvodka-vybora);
border: none;
cursor: pointer;
transition: all .5s;
}
.donate_credits_item:hover{
  transform: scale(1.03);
}
.donate_credits_item_active{
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
color: #000;
}
.donate_credits_item_input {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
text-align: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 12px;
outline: none;
color: #fff;
}
.donate_credits_item_input::placeholder{
color: rgba(255, 255, 255, 0.5);
}
.donate_credits_item_active:hover{
  transform: scale(1);
}
.donate_credits_button {
outline: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: #000;
box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
border-radius: 20px;
cursor:pointer;
transition: all .5s;
padding: 16px 20px;
white-space: nowrap;
border: none;
}

.donate_credits_button:hover{
  transform: scale(1.03);
}

.donate_page {
  background: transparent;
}

.donate_page_container {
  max-width: 1435px !important;
}

.donate_page_main {
  padding-top: 60px;
  padding-bottom: 60px;
}

.donate_section_kicker {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.donate_section {
  margin-top: 0;
}

.donate_section + .donate_section {
  margin-top: 32px;
}

.donate_section_plans .donate_plans {
  margin-top: 0;
}

.donate_section_plans .donate_plan_subtitle {
  line-height: 1.38;
}

.donate_section_plans .donate_plan_line {
  width: 100%;
  margin-top: 22px;
  margin-bottom: 14px;
  opacity: .72;
}

.donate_section_plans .donate_plan_enabled_items {
  margin-top: 0;
  gap: 18px;
}

.donate_section_head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}

.donate_section_title {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0;
  color: #fff;
}

.donate_section_note {
  max-width: 520px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
  color: rgba(255,255,255,.48);
}

.donate_pricing_intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.donate_currency_panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: min(100%, 420px);
}

.donate_currency_label {
  font-family: var(--font-family);
  font-weight: 850;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.donate_currency_options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.donate_currency_option {
  min-width: 64px;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 7px 10px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.donate_currency_option:hover,
.donate_currency_option:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.075);
  color: #fff;
}

.donate_currency_option_active {
  border-color: rgba(255,255,255,.88);
  background: #fff;
  color: #050505;
}

.donate_currency_option strong,
.donate_currency_option span {
  display: block;
  font-family: var(--font-family);
  line-height: 1;
}

.donate_currency_option strong {
  font-weight: 950;
  font-size: 13px;
}

.donate_currency_option span {
  margin-top: 4px;
  font-weight: 700;
  font-size: 10px;
  opacity: .72;
}

.donate_currency_hint {
  min-height: 14px;
  font-family: var(--font-family);
  font-weight: 650;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255,255,255,.36);
}

.donate_currency_select {
  position: relative;
  width: min(100%, 340px);
  z-index: 30;
}

.donate_currency_trigger,
.co_currency_trigger {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 42px 1fr 16px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 8px 14px 8px 10px;
  background: rgba(8,8,8,.72);
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.22);
  transition: border-color .15s, background .15s, transform .15s;
}

.donate_currency_trigger:hover,
.donate_currency_trigger:focus-visible,
.co_currency_trigger:hover,
.co_currency_trigger:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.34);
  background: rgba(18,18,18,.9);
  outline: none;
}

.donate_currency_symbol,
.co_currency_symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-family: var(--font-family);
  font-weight: 950;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

.donate_currency_trigger_text,
.co_currency_trigger_text,
.donate_currency_item_text,
.co_currency_item_text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-family);
}

.donate_currency_trigger_text strong,
.co_currency_trigger_text strong,
.donate_currency_item_text strong,
.co_currency_item_text strong {
  font-weight: 950;
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}

.donate_currency_trigger_text em,
.co_currency_trigger_text em,
.donate_currency_item_text em,
.co_currency_item_text em {
  overflow: hidden;
  font-style: normal;
  font-weight: 650;
  font-size: 12px;
  line-height: 1.15;
  color: rgba(255,255,255,.48);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donate_currency_chevron,
.co_currency_chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: rgba(255,255,255,.72);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s;
}

.donate_currency_select_open .donate_currency_chevron,
.co_currency_select_open .co_currency_chevron {
  transform: rotate(225deg) translate(-2px, -1px);
}

.donate_currency_menu,
.co_currency_menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: 330px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 8px;
  background: rgba(5,5,5,.96);
  box-shadow: 0 22px 58px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
}

.donate_currency_menu_title,
.co_currency_menu_title {
  display: block;
  padding: 8px 10px 10px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.9);
}

.donate_currency_item,
.co_currency_item {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  text-align: left;
}

.donate_currency_item:hover,
.donate_currency_item:focus-visible,
.co_currency_item:hover,
.co_currency_item:focus-visible,
.donate_currency_item_active,
.co_currency_item_active {
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}

.donate_currency_item_symbol,
.co_currency_item_symbol {
  font-family: var(--font-family);
  font-weight: 950;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255,255,255,.78);
}

.donate_currency_item svg,
.co_currency_item_check {
  color: #fff;
}

.donate_currency_missing {
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 13px 10px 7px;
  background: transparent;
  color: rgba(255,255,255,.68);
  cursor: pointer;
  font: 750 12px/1.2 var(--font-family);
  text-align: left;
}

.donate_currency_missing:hover,
.donate_currency_missing:focus-visible {
  color: #fff;
  outline: none;
}

.donate_country_search {
  padding: 6px 4px 4px;
}

.donate_country_search > input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font: 650 13px/1 var(--font-family);
  outline: none;
}

.donate_country_search > input:focus {
  border-color: rgba(255,255,255,.38);
}

.donate_country_search > input::placeholder,
.donate_country_hint,
.donate_country_results > p {
  color: rgba(255,255,255,.42);
}

.donate_country_hint,
.donate_country_results > p {
  margin: 0;
  padding: 10px 8px 4px;
  font: 600 11px/1.35 var(--font-family);
}

.donate_country_results {
  margin-top: 5px;
}

.donate_country_results > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 9px;
  padding: 9px 8px;
  background: transparent;
  color: rgba(255,255,255,.76);
  cursor: pointer;
  font: 700 12px/1.2 var(--font-family);
  text-align: left;
}

.donate_country_results > button:hover,
.donate_country_results > button:focus-visible {
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
}

.donate_country_results > button em {
  flex: 0 0 auto;
  color: rgba(255,255,255,.48);
  font-style: normal;
}

.donate_token_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.donate_token_card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 306px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  padding: 24px 22px 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.07), transparent 60%),
    rgba(255,255,255,.035);
  color: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}

.donate_token_card:hover,
.donate_token_card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.32);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.1), transparent 60%),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* Watermark: the pack size as a silhouette, clipped by the card. */
.donate_token_ghost {
  position: absolute;
  z-index: -1;
  top: -18px;
  right: -10px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 128px;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.028);
  pointer-events: none;
  user-select: none;
}

.donate_token_card_best .donate_token_ghost {
  color: rgba(255,255,255,.055);
}

.donate_token_card_active {
  border-color: rgba(255,255,255,.3);
  background:
    linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04) 46%, rgba(255,255,255,.06)),
    rgba(255,255,255,.06);
  box-shadow: 0 0 24px rgba(255,255,255,.08);
}

.donate_token_card_top {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

.donate_token_card_top em {
  margin-left: auto;
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
  font-style: normal;
  font-weight: 900;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.donate_token_card strong {
  margin-top: 22px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: #fff;
}

.donate_token_label {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Price is plain white type, not a filled pill: the CTA is the only solid
   white element in the card, so the two no longer compete. */
.donate_token_pricing {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.donate_token_price_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.donate_token_price {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #fff;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.02em;
}

.donate_token_hint {
  min-height: 0;
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.44);
}

.donate_token_math {
  width: 100%;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,.8);
}

.donate_checkout {
  margin-top: 14px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  padding: 18px 20px;
  background: rgba(0,0,0,.32);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.donate_checkout p {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.44);
}

.donate_checkout strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
}

/* Token card updated parts */
.donate_token_card_name {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
}

.donate_token_badge {
  margin-left: auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-style: normal;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.donate_token_badge_default {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
}

/* Monochrome badges: the page keeps one white accent and no brand colours. */
.donate_token_badge_hot {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}

.donate_token_badge_popular {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.16);
}

/* Amount and unit share one baseline instead of stacking on two lines. */
.donate_token_headline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
}

.donate_token_amount {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.donate_token_per {
  display: block;
  min-height: 15px;
  margin-top: 7px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(255,255,255,.38);
}

/* Discount against the most expensive pack, so the saving reads next to money. */
.donate_token_save {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-style: normal;
  font-weight: 900;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Outlined, not solid: the CTA stays the only filled white element. */
.donate_token_card_best .donate_token_save {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* Cheapest price per token: the anchor of the whole pack row. */
.donate_token_card_best {
  border-color: rgba(255,255,255,.34);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.12), transparent 62%),
    rgba(255,255,255,.06);
  box-shadow:
    0 22px 60px rgba(0,0,0,.5),
    0 0 34px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.donate_token_card_best:hover,
.donate_token_card_best:focus-visible {
  border-color: rgba(255,255,255,.5);
}

/* One-time introductory offer on the entry pack. */
.donate_token_badge_intro {
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
}

/* Struck regular price beside the introductory one. */
.donate_token_price_was {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  color: rgba(255,255,255,.34);
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.donate_token_badge_best {
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

/* Hero */
.donate_hero_title {
  font-size: clamp(34px, 4.4vw, 46px);
  letter-spacing: -.02em;
}

.donate_hero_lead {
  max-width: 54ch;
  margin-top: 12px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.56);
}

/* Admin tables on a phone.
   These tables carry up to ten columns and used to be forced to 1320px inside a
   horizontal scroller, so reading one row on a 390px screen meant swiping back
   and forth. Below the small breakpoint each row becomes a card and every cell
   carries its column name, so a row reads top to bottom and the page never
   scrolls sideways. Above it, nothing changes. */
@media (max-width: 639px) {
  .admin_cards table {
    min-width: 0;
    width: 100%;
    display: block;
  }

  .admin_cards thead {
    /* The column names move into each cell, so the header row is redundant.
       Kept in the DOM for screen readers rather than removed. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .admin_cards tbody {
    display: block;
  }

  .admin_cards tbody tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
  }

  .admin_cards tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 4px 0;
    border: 0;
    text-align: right;
  }

  .admin_cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255,255,255,.42);
  }

  /* A cell with no column name is a full-width block, not a label/value pair. */
  .admin_cards tbody td:not([data-label])::before {
    display: none;
  }

  .admin_cards tbody td:not([data-label]) {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Breakdown for packs that hand out part of their tokens as a bonus. It sits
   under the total as a small pill so the gift reads at a glance without
   competing with the headline number. */
.donate_token_gift {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* What a pack actually buys, in exports rather than abstract tokens.
   One quiet line directly under the amount: no boxes, no stacked stats. */
.donate_token_yield {
  display: block;
  width: 100%;
  margin-top: 9px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Same translation for plans: daily tokens expressed as daily exports. */
.donate_plan_yield {
  margin-top: 5px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(255,255,255,.44);
}

.donate_plan_yield b {
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.9);
  margin-right: 3px;
}

/* ---- Currency: a compact control beside the prices ----------------------
   It used to be a full width band above the first product that printed the
   same code three times (label, auto hint, trigger). Now it is one pill.
   Scoped to .donate_currency_control so the checkout page keeps its own
   larger trigger, which shares the base selectors. */
/* The section head must sit above the pack grid, otherwise the open currency
   menu is painted underneath the first card. */
.donate_section_head {
  position: relative;
  z-index: 40;
}

.donate_currency_control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.donate_currency_control .donate_currency_select {
  width: auto;
}

.donate_currency_control .donate_currency_trigger {
  width: auto;
  min-width: 210px;
  min-height: 56px;
  grid-template-columns: 40px auto 14px;
  gap: 12px;
  border-radius: 14px;
  padding: 8px 16px 8px 10px;
}

.donate_currency_control .donate_currency_symbol {
  width: 40px;
  height: 38px;
  border-radius: 10px;
  font-size: 19px;
}

.donate_currency_control .donate_currency_trigger_text {
  gap: 3px;
}

/* Small label on top, the code itself as the value. */
.donate_currency_control .donate_currency_trigger_text em {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.donate_currency_control .donate_currency_trigger_text strong {
  font-size: 18px;
  letter-spacing: -.01em;
}

.donate_currency_auto {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,.34);
  text-align: right;
}

/* Extra entitlement shipped with a pack: a quiet second line, not a panel. */
.donate_token_bonus {
  display: block;
  width: 100%;
  margin-top: 5px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.4);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Checkout updated */
.donate_checkout_info p {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.44);
}

.donate_checkout_info strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
}

.donate_checkout_sub {
  display: block;
  margin-top: 5px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  color: rgba(255,255,255,.38);
}

.donate_checkout_btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 214px;
  min-height: 54px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 15px 24px;
  outline: none;
  background: #fff;
  color: #000;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
  white-space: nowrap;
  justify-content: center;
}

.donate_card_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,.92);
  color: #000;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}

.donate_card_cta:hover,
.donate_card_cta:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 8px 24px rgba(255,255,255,.14);
}

.donate_checkout_btn:hover,
.donate_checkout_btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,255,255,.14);
}

.donate_checkout_btn:disabled,
.donate_plan_buy:disabled,
.donate_founder_btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.donate_account_panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 26px;
  background: rgba(0,0,0,.28);
}

.donate_account_summary {
  min-width: 0;
}

.donate_account_summary .donate_section_note {
  margin-top: 12px;
  text-align: left;
}

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

.donate_account_stats div {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.04);
}

.donate_account_stats span {
  display: block;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.43);
}

.donate_account_stats strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  color: #fff;
}

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

.donate_provider {
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 13px 15px;
  background: rgba(255,255,255,.035);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s, transform .2s;
}

.donate_provider:hover,
.donate_provider:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
}

.donate_provider_active {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.1);
}

.donate_provider_disabled {
  opacity: .46;
  cursor: not-allowed;
}

.donate_provider_disabled:hover,
.donate_provider_disabled:focus-visible {
  transform: none;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}

.donate_provider span,
.donate_provider em,
.donate_provider small {
  display: block;
  font-family: var(--font-family);
}

.donate_provider span {
  font-weight: 900;
  font-size: 15px;
}

.donate_provider em {
  margin-top: 4px;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}

.donate_provider small {
  margin-top: 7px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}

.donate_login_btn {
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;
  padding: 12px 20px;
  background: #fff;
  color: #000;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .18s;
}

.donate_login_btn:hover {
  background: #e8e8e8;
  transform: translateY(-1px);
}

.donate_payment_notice,
.donate_payment_status,
.donate_payment_error {
  border-radius: 14px;
  padding: 12px 16px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}

.donate_payment_notice {
  border: 1px solid rgba(120,180,255,.24);
  background: rgba(60,120,255,.1);
  color: rgba(210,225,255,.86);
}

.donate_payment_status {
  border: 1px solid rgba(80,220,150,.22);
  background: rgba(60,180,120,.1);
  color: rgba(190,245,215,.9);
}

.donate_payment_error {
  border: 1px solid rgba(255,95,95,.24);
  background: rgba(255,75,75,.1);
  color: rgba(255,205,205,.94);
}

.donate_legal_note {
  max-width: 780px;
  margin: 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.4);
}

.donate_legal_note a {
  color: rgba(255,255,255,.86);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.28);
  text-underline-offset: 3px;
}

.donate_legal_note a:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.7);
}

.donate_orders_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.donate_orders_empty {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px 20px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,.38);
}

.donate_order {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 18px;
  background: rgba(255,255,255,.03);
  transition: background .15s, border-color .15s;
}

.donate_order:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.13);
}

.donate_order_succeeded {
  border-left: 3px solid rgba(80,220,150,.45);
}

.donate_order_failed,
.donate_order_canceled {
  border-left: 3px solid rgba(255,95,95,.35);
}

.donate_order strong,
.donate_order span {
  display: block;
  font-family: var(--font-family);
}

.donate_order strong {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.donate_order span {
  font-weight: 600;
  font-size: 12px;
  color: rgba(255,255,255,.48);
  white-space: nowrap;
}

/* Checkout page */

.co_page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 20px 80px;
}

.co_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 520px;
}

.co_back {
  align-self: flex-start;
  color: rgba(255,255,255,.45);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: color .15s;
}

.co_back:hover {
  color: rgba(255,255,255,.9);
}

.co_card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 28px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}

/* Header row */
.co_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.co_head_left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.co_product_switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.co_product_tab {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px 12px;
  background: transparent;
  color: rgba(255,255,255,.45);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}

.co_product_tab:hover {
  border-color: rgba(255,255,255,.24);
  color: rgba(255,255,255,.8);
}

.co_product_tab_active {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
}

.co_product_badge {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.52);
  font-family: var(--font-family);
  font-weight: 850;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.co_title {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.co_desc {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.45);
  margin: 0;
  max-width: 280px;
}

.co_price_block {
  flex-shrink: 0;
  text-align: right;
}

.co_price {
  font-family: var(--font-family);
  font-weight: 950;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
}

/* Divider */
.co_divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 0 -28px;
}

/* Features */
.co_features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co_features li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.65);
}

.co_check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(80,220,150,.15);
  border: 1px solid rgba(80,220,150,.25);
  font-size: 9px;
  font-weight: 900;
  color: rgba(140,240,180,.9);
  line-height: 1;
  flex-shrink: 0;
}

/* Section label */
.co_section_label {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: -8px;
}

.co_currency_select {
  position: relative;
  width: 100%;
  z-index: 40;
}

.co_currency_item {
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
}

.co_currency_item_price {
  font-family: var(--font-family);
  font-weight: 850;
  font-size: 11px;
  color: rgba(255,255,255,.54);
  white-space: nowrap;
}

.co_currency_item_check {
  font-family: var(--font-family);
  font-weight: 950;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.co_currency_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
}

.co_currency_btn {
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 8px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.co_currency_btn:hover,
.co_currency_btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.co_currency_btn_active {
  border-color: rgba(255,255,255,.9);
  background: #fff;
  color: #050505;
}

.co_currency_btn strong,
.co_currency_btn span {
  display: block;
  font-family: var(--font-family);
  line-height: 1;
}

.co_currency_btn strong {
  font-weight: 950;
  font-size: 13px;
}

.co_currency_btn span {
  margin-top: 8px;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co_currency_hint {
  margin-top: -10px;
  font-family: var(--font-family);
  font-weight: 650;
  font-size: 11px;
  color: rgba(255,255,255,.36);
}

/* Providers */
.co_providers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 12px;
}

.co_provider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 126px;
  gap: 7px;
  padding: 17px 12px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  outline: none;
}

.co_provider:hover:not(:disabled) {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.075);
  transform: translateY(-1px);
}

.co_provider_active {
  border-color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.105) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 16px 36px rgba(255,255,255,.08);
}

.co_provider_disabled {
  opacity: .35;
  cursor: not-allowed;
}

.co_provider_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 30px;
  color: rgba(255,255,255,.9);
}

.co_provider_mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 30px;
  border-radius: 9px;
  padding: 0 11px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.co_provider_mark_stripe {
  background: transparent;
  color: #7b61ff;
  font-size: 13px;
  text-shadow: 0 0 18px rgba(123,97,255,.34);
}

.co_provider_mark_paypal {
  min-width: 34px;
  width: 34px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #009cde;
  font-size: 29px;
  font-style: italic;
  font-weight: 950;
  text-shadow: 0 0 18px rgba(0,156,222,.35);
}

.co_provider_mark_yookassa {
  min-width: 34px;
  width: 34px;
  padding: 0;
  border-radius: 8px;
  background: #ff4c00;
  color: #fff;
  font-size: 17px;
  box-shadow: 0 0 18px rgba(255,76,0,.28);
}

.co_provider_name {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
  color: rgba(255,255,255,.9);
}

.co_provider_desc {
  min-height: 28px;
  max-width: 135px;
  font-family: var(--font-family);
  font-weight: 650;
  font-size: 11px;
  line-height: 1.22;
  color: rgba(255,255,255,.52);
}

.co_provider_price {
  font-family: var(--font-family);
  font-weight: 850;
  font-size: 11px;
  color: rgba(255,255,255,.9);
}

.co_provider_note {
  margin-top: 10px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.52);
}

/* Account chip */
.co_account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}

.co_account_identity,
.co_account_result {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co_account_result {
  align-items: flex-end;
  text-align: right;
}

.co_account_label {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
}

.co_account_name {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co_account_balance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

.co_account_arrow {
  color: rgba(255,255,255,.26);
}

.co_account_next {
  color: rgba(115,240,165,.95);
}

.co_account_period {
  border: 1px solid rgba(115,240,165,.18);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(115,240,165,.08);
  color: rgba(180,255,210,.9);
  font-size: 10px;
  line-height: 1;
}

@media (max-width: 520px) {
  .co_account {
    align-items: flex-start;
    flex-direction: column;
  }

  .co_account_result {
    align-items: flex-start;
    text-align: left;
  }

  .co_account_balance {
    justify-content: flex-start;
  }
}

/* Notices */
.co_notice {
  border-radius: 12px;
  padding: 11px 14px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
}

.co_notice_info {
  border: 1px solid rgba(120,180,255,.2);
  background: rgba(60,120,255,.08);
  color: rgba(200,220,255,.85);
}

.co_notice_ok {
  border: 1px solid rgba(80,220,150,.2);
  background: rgba(60,180,120,.08);
  color: rgba(180,240,210,.9);
}

.co_notice_err {
  border: 1px solid rgba(255,95,95,.22);
  background: rgba(255,75,75,.08);
  color: rgba(255,200,200,.9);
}

.payment_result_page {
  min-height: 100vh;
  padding: 96px 24px 72px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    #050505;
}

.payment_result_shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.payment_result_card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 44px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    rgba(12,12,12,.94);
  box-shadow:
    0 30px 90px rgba(0,0,0,.64),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.payment_result_card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 10%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.07), transparent 26%);
  opacity: .7;
}

.payment_result_card_success::after,
.payment_result_card_pending::after,
.payment_result_card_error::after {
  content: "";
  position: absolute;
  left: 44px;
  right: 44px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
}

.payment_result_mark {
  position: relative;
  z-index: 1;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 50%;
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}

.payment_result_card_success .payment_result_mark {
  color: #07150f;
  background: #ebfff3;
  box-shadow: 0 0 42px rgba(134,255,184,.28);
}

.payment_result_card_error .payment_result_mark {
  color: #1a0707;
  background: #ffe8e8;
  box-shadow: 0 0 42px rgba(255,99,99,.24);
}

.payment_result_card_pending .payment_result_mark {
  color: #050505;
  background: #f5f5f5;
  box-shadow: 0 0 42px rgba(255,255,255,.2);
}

.payment_result_eyebrow,
.payment_result_title,
.payment_result_body,
.payment_result_notice,
.payment_result_summary,
.payment_result_actions {
  position: relative;
  z-index: 1;
}

.payment_result_eyebrow {
  margin: 28px 0 10px;
  color: rgba(255,255,255,.56);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment_result_title {
  max-width: 720px;
  margin: 0;
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: 0;
}

.payment_result_body {
  max-width: 680px;
  margin: 18px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.55;
}

.payment_result_notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  padding: 14px 16px;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
  font-size: 14px;
  font-weight: 800;
}

.payment_result_notice_warn {
  border-color: rgba(255,210,130,.22);
  background: rgba(255,210,130,.09);
}

.payment_result_notice a {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 10px 16px;
  color: #050505;
  background: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 950;
}

.payment_result_summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.payment_result_summary div {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.045);
}

.payment_result_summary span,
.payment_result_summary strong,
.payment_result_summary em {
  display: block;
  min-width: 0;
}

.payment_result_summary span {
  margin-bottom: 8px;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.payment_result_summary strong {
  overflow-wrap: anywhere;
  color: rgba(255,255,255,.94);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.12;
}

.payment_result_summary em {
  margin-top: 6px;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.payment_result_status_success {
  color: #b9ffd3 !important;
}

.payment_result_status_error {
  color: #ffd0d0 !important;
}

.payment_result_status_pending,
.payment_result_status_info,
.payment_result_status_muted {
  color: #f7f7f7 !important;
}

.payment_result_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.payment_result_actions a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 950;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.payment_result_actions a:hover,
.payment_result_actions a:focus-visible {
  transform: translateY(-1px);
}

.payment_result_primary {
  color: #050505;
  background: #fff;
}

.payment_result_secondary {
  color: #fff;
  background: rgba(255,255,255,.13);
}

.payment_result_ghost {
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 760px) {
  .payment_result_page {
    padding: 78px 14px 44px;
  }

  .payment_result_card {
    border-radius: 22px;
    padding: 26px 18px;
  }

  .payment_result_card_success::after,
  .payment_result_card_pending::after,
  .payment_result_card_error::after {
    left: 18px;
    right: 18px;
  }

  .payment_result_mark {
    width: 58px;
    height: 58px;
    font-size: 26px;
  }

  .payment_result_title {
    font-size: 34px;
  }

  .payment_result_body {
    font-size: 15px;
  }

  .payment_result_notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .payment_result_summary {
    grid-template-columns: 1fr;
  }

  .payment_result_actions a {
    width: 100%;
  }
}

.co_terms_accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.72);
  font-family: var(--font-family);
  font-weight: 650;
  font-size: 12px;
  line-height: 1.45;
}

.co_terms_accept input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #fff;
  flex: 0 0 auto;
}

.co_terms_accept a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pay button */
.co_pay_btn {
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 16px;
  padding: 0 24px;
  background: #fff;
  color: #000;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 2px 20px rgba(255,255,255,.1);
  transition: transform .18s, box-shadow .18s, background .18s;
}

.co_pay_btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(255,255,255,.16);
  background: #f2f2f2;
}

.co_pay_btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.co_qr_btn {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 0 18px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-family: var(--font-family);
  font-weight: 850;
  font-size: 14px;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}

.co_qr_btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.1);
}

.co_qr_btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.co_qr_overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.co_qr_modal {
  width: min(100%, 380px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 24px;
  background: #111;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

.co_qr_title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 24px;
  color: #fff;
}

.co_qr_hint,
.co_qr_status {
  margin: 10px 0 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
}

.co_qr_frame {
  margin: 18px auto 0;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
}

.co_qr_frame canvas {
  display: block;
  width: 248px;
  height: 248px;
  max-width: 100%;
}

.co_qr_actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.co_qr_secondary,
.co_qr_close {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.co_qr_secondary {
  background: #fff;
  color: #050505;
}

.co_qr_close {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
}

/* Login hint */
.co_login_hint {
  text-align: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin: 0;
}

.co_login_hint a {
  color: rgba(255,255,255,.8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Legal */
.co_legal {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.28);
  text-align: center;
  margin: 0;
}

.co_legal a {
  color: rgba(255,255,255,.5);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 560px) {
  .co_page {
    padding: 28px 14px 60px;
  }

  .co_card {
    padding: 20px 18px;
  }

  .co_divider {
    margin: 0 -18px;
  }

  .co_price {
    font-size: 28px;
  }

  .co_currency_menu {
    left: 0;
    right: auto;
    width: 100%;
    max-height: 300px;
  }

  .co_currency_item {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
  }

  .co_currency_item_price {
    display: none;
  }

  .co_providers {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Plans daily tokens row */
.donate_plan_head {
  flex-shrink: 0;
}

.donate_plan_daily {
  margin-top: 16px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.donate_plan_daily strong {
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  margin-right: 2px;
}

.donate_plan_price em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.44);
}

/* highlighted plan override */
.donate_plan_highlighted {
  border: 1px solid rgba(255,255,255,.2) !important;
  background: var(--color) !important;
}

.donate_plan_highlighted .donate_plan_buy {
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
  border: 1px solid var(--obvodka-vybora) !important;
}

/* Give the highlighted plan real weight instead of only a lighter surface. */
.donate_plan_highlighted {
  box-shadow:
    0 26px 66px rgba(0,0,0,.5),
    0 0 34px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.donate_plan_highlighted .donate_plan_buy:hover,
.donate_plan_highlighted .donate_plan_buy:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255,255,255,.2);
}

.donate_plan_highlighted .donate_plan_daily strong {
  color: #fff;
}

/* Founder banner */
.donate_founder {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 32px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.09), transparent 58%),
    rgba(255,255,255,.045);
  margin-top: 32px;
  padding: 0;
  box-shadow:
    0 32px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* Hairline seam so the lifetime offer reads as the top tier of the page. */
.donate_founder::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  pointer-events: none;
}

.donate_founder_glow {
  pointer-events: none;
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 65%);
  filter: blur(50px);
}

.donate_founder_body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 52px 56px;
}

.donate_founder_kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
  margin-bottom: 14px;
}

.donate_founder_title {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
}

.donate_founder_title_lifetime {
  font-weight: 400;
  font-style: italic;
  opacity: .5;
  margin-left: 4px;
}

.donate_founder_desc {
  margin-top: 14px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
  max-width: 520px;
}

.donate_founder_features {
  margin-top: 28px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.donate_founder_features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,.75);
}

.donate_founder_features svg {
  flex-shrink: 0;
  color: rgba(255,255,255,.6);
}

.donate_founder_right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  flex-shrink: 0;
}

.donate_founder_price_wrap {
  text-align: right;
}

.donate_founder_price_label {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
}

.donate_founder_price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
}

.donate_founder_price span {
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.03em;
}

.donate_founder_price em {
  font-style: normal;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,.48);
}

.donate_founder_daily {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  text-align: right;
}

.donate_founder_daily strong {
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  margin-right: 2px;
}

.donate_founder_btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  min-width: 220px;
  border: none;
  border-radius: 18px;
  padding: 16px 28px;
  outline: none;
  background: #fff;
  color: #000;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0 0 30px rgba(255,255,255,.14);
}

.donate_founder_btn:hover,
.donate_founder_btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(255,255,255,.26);
}

/* Same light sweep as the builder token dialog, so paid CTAs feel like one system. */
.donate_founder_btn,
.donate_card_cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.donate_founder_btn::after,
.donate_card_cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 18%,
    rgba(255,255,255,.85) 42%,
    rgba(255,255,255,.85) 58%,
    transparent 82%
  );
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.donate_founder_btn:hover::after,
.donate_founder_btn:focus-visible::after,
.donate_card_cta:hover::after,
.donate_card_cta:focus-visible::after {
  transform: translateX(120%);
}

@media (prefers-reduced-motion: reduce) {
  .donate_founder_btn::after,
  .donate_card_cta::after {
    transition: none;
  }
}

.donate_founder_note {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  text-align: right;
  max-width: 220px;
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1180px) {
  .donate_token_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .donate_page_main {
    padding-top: 34px;
  }

  .donate_pricing_intro,
  .donate_currency_panel {
    align-items: flex-start;
  }

  .donate_pricing_intro {
    flex-direction: column;
  }

  .donate_currency_options {
    justify-content: flex-start;
  }

  .donate_currency_control {
    align-items: flex-start;
  }

  .donate_currency_auto {
    text-align: left;
  }

  .donate_currency_select {
    width: 100%;
  }

  .donate_currency_control .donate_currency_select {
    width: auto;
  }

  .donate_currency_menu {
    left: 0;
    right: auto;
    width: 100%;
  }

  .donate_account_stats,
  .donate_provider_grid {
    grid-template-columns: 1fr;
  }

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

  .donate_order strong {
    grid-column: 1 / -1;
  }

  .donate_section_head,
  .donate_checkout {
    align-items: stretch;
    flex-direction: column;
  }

  .donate_section_note {
    max-width: none;
    text-align: left;
  }

  .donate_checkout_btn {
    width: 100%;
  }

  .legal_section {
    padding: 20px;
  }

  .legal_section h2 {
    font-size: 20px;
  }

  .donate_plans {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .donate_founder_body {
    grid-template-columns: 1fr;
    padding: 40px 40px;
  }

  .donate_founder_right {
    align-items: flex-start;
  }

  .donate_founder_price_wrap,
  .donate_founder_daily,
  .donate_founder_note {
    text-align: left;
  }

  .donate_founder_price {
    justify-content: flex-start;
  }

  .donate_founder_btn {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .donate_page_main {
    padding-bottom: 54px;
  }

  .donate_section_title {
    font-size: 24px;
  }

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

  .donate_token_card,
  .donate_checkout {
    border-radius: 20px;
  }

  .donate_token_card {
    min-height: 0;
    padding: 20px;
  }

  .donate_token_hint {
    min-height: 0;
  }

  .donate_checkout strong {
    font-size: 19px;
  }

  .donate_account_panel {
    border-radius: 20px;
    padding: 18px;
  }

  .donate_order {
    grid-template-columns: 1fr;
  }

  .donate_founder_body {
    padding: 28px 22px;
  }

  .donate_founder_title {
    font-size: 28px;
  }

  .donate_founder {
    border-radius: 20px;
  }
}



.faq_main {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  margin-top: 40px;
}
.faq_guides {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018) 58%, rgba(255, 255, 255, 0.04)),
    rgba(0, 0, 0, 0.22);
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.32);
}
.faq_section_header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq_section_title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.18;
  color: #fff;
}
.faq_guides_grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.faq_guide_card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.032);
  display: flex;
  flex-direction: column;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.faq_guide_card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.32);
}
.faq_guide_card_tag {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.faq_guide_card_title {
  margin-top: 12px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.28;
  color: var(--obvodka-vybora);
}
.faq_guide_card_text {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.56);
}
.faq_guide_action {
  margin-top: 12px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 8px 11px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: #000;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.faq_guide_action:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.22);
}
.faq_guide_card_steps {
  margin-top: 14px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  counter-reset: faq-steps;
}
.faq_guide_card_steps li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  counter-increment: faq-steps;
  word-break: break-word;
  overflow-wrap: break-word;
}
.faq_guide_card_steps li::before {
  content: counter(faq-steps);
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 9px;
  line-height: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}
.faq_guide_note {
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  padding: 10px 13px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
}
.faq_guide_commands {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.faq_guide_command {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.24);
}
.faq_guide_command_header {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq_guide_command_header > span {
  display: block;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
}
.faq_copy_button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.faq_copy_button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}
.faq_copy_button_copied {
  color: #050505;
  background: rgba(255, 255, 255, 0.92);
}
.faq_guide_command code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  font-family: var(--third-family);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}
.faq_layout {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.faq_items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq_item {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 0;
  background: rgba(255, 255, 255, 0.028);
  overflow: hidden;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.faq_item_active{
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.38);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.2);
}
.faq_item:not(.faq_item_active):hover {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.038);
}
.faq_item_active .faq_item_up{
  color: var(--obvodka-vybora);
}
.faq_item_active .faq_item_up_icon {
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(180deg);
}
.faq_item_up {
  border: 0;
  outline: none;
  width: 100%;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.35;
  text-align: left;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  background: transparent;
  transition: color .22s;
}
.faq_item_up_icon{
  border-radius: 27689200px;
  padding: 0px 8px;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  margin-left: auto;
  transition: transform .25s, background .25s;
}
.faq_item_up_icon svg{
  vertical-align: middle;
}
.faq_item_text {
  padding: 0 20px 20px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}
.faq_item_text p {
  margin: 0;
}
.faq_item_text p + p {
  margin-top: 10px;
}
.faq_answer_list {
  list-style: none;
  margin-top: 12px;
  padding-left: 0;
  display: grid;
  gap: 8px;
}
.faq_answer_list li {
  position: relative;
  padding-left: 18px;
}
.faq_answer_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.18);
}
.faq_answer_code {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  margin: 0 4px;
  padding: 1px 7px;
  font-family: var(--third-family);
  font-size: .92em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
}
.faq_inline_link {
  display: inline;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px;
}
.faq_step_link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 2px;
  transition: color .18s, text-decoration-color .18s;
}
.faq_step_link:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.7);
}
.faq_text_link {
  display: inline-flex;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  color: #000;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.12);
  transition: transform .25s, box-shadow .25s;
}
.faq_text_link:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px 0 rgba(255, 255, 255, 0.22);
}
.faq_side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.faq_panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.25);
}
.faq_panel_header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.faq_panel_kicker {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.faq_panel_title {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.18;
  color: var(--obvodka-vybora);
}
.faq_panel_text {
  margin-top: 12px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.54);
}
.faq_guide_links,
.faq_contact_links {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq_guide_link {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  transition: transform .25s, border-color .25s, background .25s;
}
.faq_guide_link:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.075);
}
.faq_guide_badge {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.055);
}
.faq_guide_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--obvodka-vybora);
}
.faq_guide_text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.52);
}
.faq_contact_link {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  transition: transform .25s, border-color .25s, background .25s;
}
.faq_contact_link:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.075);
}
.faq_contact_title,
.faq_contact_text {
  display: block;
}
.faq_contact_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--obvodka-vybora);
}
.faq_contact_text {
  margin-top: 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
.faq_contact_action {
  border-radius: 999px;
  padding: 8px 10px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  color: #000;
  background: var(--obvodka-vybora);
}









.profile {

}
.profile_main {
width: 100%;
height: auto;
max-width: 1152px;
margin: 0 auto;
}
.profile_main_up {
  width: 100%;
  height: auto;
  border: 1px solid var(--seraya-plashka);
border-radius: 32px;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
background: var(--color);
}
.profile_main_up_content {
  padding: 32px;
  display: flex;
  align-items: center;
}
.profile_main_up_content--account {
  gap: 20px;
}
.profile_main_avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid var(--seraya-plashka);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 14px 34px -16px rgba(0,0,0,.85);
}
.profile_main_avatar--empty {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)),
    var(--colorblack);
}
.profile_main_identity {
  min-width: 0;
}
.profile_main_identity_top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.profile_main_plan_badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.profile_main_plan_badge--paid {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  color: #fff;
  box-shadow: 0 0 18px rgba(255,255,255,.12);
}
.profile_main_identity_meta {
  margin-top: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  line-height: 138%;
  color: rgba(255, 255, 255, 0.48);
  word-break: break-word;
}
.profile_main_auth_chips{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile_main_auth_chip{
  max-width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--font-family);
}
.profile_main_auth_chip.is-active{
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}
.profile_main_auth_chip b{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
}
.profile_main_auth_chip em{
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
}
.profile_main_up_nickname {
  font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
letter-spacing: -0.02em;
background: linear-gradient(270deg, #999 0%, #fff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.profile_main_up_exit {
  margin-left: auto;
  width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.05);
border: 0.73px solid var(--seraya-plashka);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .5s;
}
.profile_main_up_exit:hover{
  transform: scale(1.03);
}
.profile_main_up_exit svg{
  vertical-align: middle;
}
.profile_main_infos {
  width: 100%;
  height: auto;
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 28px;
}
.profile_main_side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.profile_main_info {
  width: 100%;
  height: auto;
  border: 1px solid var(--seraya-plashka);
border-radius: 32px;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
background: var(--color);
}
.profile_main_info--compact .profile_main_info_content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.profile_main_link_head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile_main_link_icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
}
.profile_main_info--compact .profile_main_info_title {
  font-size: 20px;
}
.profile_main_info--compact .profile_main_empty_text {
  margin-top: 14px;
  margin-bottom: 20px;
  flex: 1 1 auto;
}
.profile_main_link_action {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.profile_main_link_action svg {
  transition: transform .2s;
}
.profile_main_link_action:hover {
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.08);
}
.profile_main_link_action:hover svg {
  transform: translateX(3px);
}
.profile_main_info_content {
  padding: 41px;
}
.profile_main_info_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
color: var(--obvodka-vybora);
}
.profile_main_info_plan {
 margin-top: 28px;
 border: 1px solid rgba(255,255,255,.07);
 box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
 background:
   radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.06), transparent 55%),
   linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
 width: 100%;
 height: auto;
 border-radius: 24px;
}
.profile_main_info_plan_content {
  padding: 32px;
  display: flex;
  align-items: center;
}
.profile_main_info_plan_item:last-child {
  margin-left: auto;
}
.profile_main_info_plan_content--single .profile_main_info_plan_item:last-child {
  margin-left: 0;
}
.profile_main_info_plan_title {
  font-family: var(--second-family);
font-weight: 500;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.profile_main_info_plan_title svg{
  vertical-align: middle;
  margin-right: 8px;
}
.profile_main_info_plan_title svg{
  vertical-align: middle;
}
.profile_main_info_plan_item:last-child .profile_main_info_plan_title{
  text-align: right;
}
.profile_main_info_plan_content--single .profile_main_info_plan_item:last-child .profile_main_info_plan_title{
  text-align: left;
}
.profile_main_info_plan_status {
  margin-top: 14px;
  font-family: var(--font-family);
font-weight: 700;
font-size: 42px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--obvodka-vybora);
}
.profile_main_info_plan_date {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
text-align: right;
color: var(--obvodka-vybora);
margin-top: 16px;
}
.profile_main_info_limits {
  width: 100%;
  height: auto;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.profile_main_info_limits_item {
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.03);
padding: 20px;
}
.profile_stat {
  display: flex;
  flex-direction: column;
}
.profile_stat_head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile_stat_icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.82);
}
.profile_stat_breakdown {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.profile_stat_breakdown span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.028);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,255,255,.42);
}
.profile_stat_breakdown b {
  font-family: var(--third-family);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.profile_stat_note {
  margin-top: 14px;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255,255,255,.36);
}
.profile_main_info_limits_stats {
  margin-top: 16px;
  font-family: var(--third-family);
font-weight: 700;
font-size: 40px;
line-height: 1;
color: var(--obvodka-vybora);
}
.profile_main_info_plan_info {
  margin-top: 12px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: rgba(255, 255, 255, 0.4);
}
.profile_main_daily_grant_notice {
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 82, 82, 0.32);
  border-radius: 12px;
  background: rgba(255, 55, 55, 0.1);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.5;
}
.profile_main_daily_grant_notice strong,
.profile_main_daily_grant_notice span {
  display: block;
}
.profile_main_daily_grant_notice strong {
  margin-bottom: 4px;
  color: #ff6b6b;
  font-size: 14px;
}
.profile_main_info_limits_credits {
  margin-top: 16px;
  font-family: var(--third-family);
font-weight: 700;
font-size: 40px;
line-height: 1;
color: var(--obvodka-vybora);
}
.profile_main_info_button {
  margin-top: 32px;
  width: 100%;
  height: 56px;
  border-radius: 13px;
  background: var(--obvodka-vybora);
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
text-align: center;
color: #000;
  cursor: pointer;
  transition: all .5s;
}
.profile_main_info_button:hover{
  transform: scale(1.03);
}
.profile_main_info_button--link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.profile_main_info_up_link {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.profile_main_info_up_link:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.profile_main_info_supports {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}
.profile_main_info_support {
  width: 100%;
  height: auto;
  background: var(--seraya-plashka);
  border-radius: 16px;
  cursor: pointer;
}
.profile_main_info_support:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}
.profile_main_info_support_content {
  padding: 16px;
  display: flex;
  align-items: center;
}
.profile_main_info_support_item:last-child {
  margin-left: auto;
}
.profile_main_info_support_item:first-child{
  margin-right: 20px;
}
.profile_main_info_support_item_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: var(--obvodka-vybora);
}
.profile_main_info_support_item_bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.profile_main_info_support_item_date {
  font-family: var(--font-family);
font-weight: 400;
font-size: 12px;
line-height: 133%;
color: rgba(255, 255, 255, 0.4);
}
.profile_main_info_support_item_status {
  font-family: var(--font-family);
font-weight: 700;
font-size: 7px;
line-height: 133%;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--obvodka-vybora);
padding: 2px 8px;
background: var(--seraya-plashka);
border: 0px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
}
.profile_main_info_support_item_hint {
  margin-top: 8px;
  max-width: 360px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.42);
}
.profile_main_info_support_item_button {
  outline: none;
  border: none;
  font-family: var(--second-family);
font-weight: 600;
font-size: 14px;
color: #000;
padding: 12.5px 24px;
box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.4);
background: var(--obvodka-vybora);
border-radius: 12px;
cursor: pointer;
transition: all .5s;
}
.profile_main_info_support_item_button:disabled,
.profile_main_info_button:disabled {
  cursor: default;
  opacity: 0.45;
  transform: none;
}
.profile_main_info_support_item_button:hover{
  transform: scale(1.03);
}
.profile_main_info_support_item_button:disabled:hover,
.profile_main_info_button:disabled:hover {
  transform: none;
}
.profile_main_info_support_item_button--wide {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.profile_main_history {
  width: 100%;
  height: auto;
  margin-top: 40px;
}
.profile_main_history_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
color: var(--obvodka-vybora);
}
.profile_main_history_blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 12px;
}
.profile_main_history_block {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--seraya-plashka);
border-radius: 24px;
}
.profile_main_history_block_content {
  padding: 17px;

}
.profile_main_history_block_rect {
  border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
background: var(--colorblack);
min-height: 134px;
position: relative;
width: 100%;
}
.profile_main_history_block_image {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.profile_main_history_block_button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  font-family: var(--font-family);
font-weight: 600;
font-size: 12px;
color: #000;
box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.4);
background: var(--obvodka-vybora);
border-radius: 12px;
padding: 14px 16px;
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
}
.profile_main_history_block_button:hover{
  opacity: .5;
}
.profile_main_history_block_bottom {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.profile_main_history_block_bottom_icon {
  vertical-align: middle;
  cursor: pointer;
  transition: all .5s;
  margin-left: auto;
}
.profile_main_history_block_bottom_icon:hover{
  opacity: .5;
}
.profile_main_history_block_bottom_texts {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile_main_history_block_bottom_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: rgba(255, 255, 255, 0.9);
}
.profile_main_history_block_bottom_edit {
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: rgba(255, 255, 255, 0.5);
}
.profile_project_share_line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile_project_share_dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.profile_project_share_time {
  color: rgba(255, 255, 255, 0.62);
}
.profile_project_share_time::before {
  content: "·";
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.28);
}
.profile_project_share_status {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
}
.profile_main_saved {
  margin-top: 24px;
}
.profile_main_saved_up {
  display: flex;
  align-items: center;
}
.profile_main_saved_up_autosave {
  margin-left: auto;
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
}

.profile_main_history_block_pro {
  background: rgba(0, 0, 0, 0.4);
  position: relative;
}
.profile_main_history_block_pro::after{
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
border-radius: 24px;
}
.profile_main_history_block_pro .profile_main_history_block_bottom_title span{
 display: none;
}
.profile_main_history_block_pro .profile_main_history_block_bottom_title{
  width: 96px;
height: 16px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.profile_main_history_block_pro .profile_main_history_block_bottom_edit span{
  display: none;
 }
 .profile_main_history_block_pro .profile_main_history_block_bottom_edit{
  border-radius: 4px;
  width: 64px;
  height: 12px;
  background: rgba(255, 255, 255, 0.05);
 }
.profile_main_history_rect {
  width: 100%;
  height: auto;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--seraya-plashka);
border-radius: 24px;
margin-top: 13px;
margin-bottom: 30px;
}
.profile_main_history_rect_content {
  padding: 24px;
}
.profile_main_history_items {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.profile_main_history_items--tokens {
  gap: 16px;
}
.profile_main_history_rect_item {
  display: flex;
  align-items: center;
}
.profile_main_history_rect_item--token {
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
}
.profile_main_history_rect_item_image {
  border: 1px solid var(--seraya-plashka);
border-radius: 12px;
background: var(--colorblack);
width: 64px;
height: 64px;
object-fit: cover;
}
.profile_main_history_rect_item_image--format {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035));
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.84);
}
.profile_main_history_rect_item_texts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 24px;
}
.profile_main_history_rect_item_title {
  font-family: var(--font-family);
font-weight: 700;
font-size: 18px;
line-height: 156%;
color: var(--obvodka-vybora);
}
.profile_main_history_rect_item_date {
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: rgba(255, 255, 255, 0.4);
}
.profile_main_history_rect_item_download {
  border: 1px solid var(--seraya-plashka);
border-radius: 16px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: 0;
transition: all .5s;
}
.profile_main_history_rect_item_actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.profile_main_history_rect_item_restore {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: all .25s;
}
.profile_main_history_rect_item_restore:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.profile_main_history_rect_item_download:hover{
  transform: scale(1.03);
}
.profile_main_history_rect_item_download svg{
  vertical-align: middle;
  display: block;
  margin: 0 auto;
}
.profile_main_token_delta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 44px;
  border-radius: 12px;
  font-family: var(--third-family);
  font-weight: 700;
  font-size: 18px;
}
.profile_main_token_delta--plus {
  color: #88ffb4;
  background: rgba(71, 255, 142, 0.08);
  border: 1px solid rgba(71, 255, 142, 0.18);
}
.profile_main_token_delta--minus {
  color: #ff9797;
  background: rgba(255, 86, 86, 0.08);
  border: 1px solid rgba(255, 86, 86, 0.18);
}
.profile_main_token_balance {
  margin-left: auto;
  min-width: 56px;
  text-align: right;
  font-family: var(--third-family);
  font-weight: 700;
  font-size: 20px;
  color: var(--obvodka-vybora);
}
.profile_main_empty_text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.55);
}
.profile_main_empty_text--warning {
  color: #ffb6b6;
}

.profile_main_notice {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  line-height: 140%;
}
.profile_main_notice--ok {
  color: #d9ffe7;
  background: rgba(89, 255, 156, 0.08);
  border-color: rgba(89, 255, 156, 0.18);
}
.profile_main_notice--error {
  color: #ffd3d3;
  background: rgba(255, 82, 82, 0.08);
  border-color: rgba(255, 82, 82, 0.18);
}
.profile_main_info_limits--account .profile_main_info_limits_item {
  min-height: 150px;
}
.profile_main_info_support--unread {
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}
.profile_main_support_create,
.profile_main_support_form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile_main_support_create input,
.profile_main_support_create textarea,
.profile_main_support_form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  padding: 14px 16px;
  outline: none;
  resize: none;
  min-height: 48px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  line-height: 140%;
  color: var(--obvodka-vybora);
}
.profile_main_support_create textarea,
.profile_main_support_form textarea {
  min-height: 92px;
}
.profile_main_support_create input::placeholder,
.profile_main_support_create textarea::placeholder,
.profile_main_support_form textarea::placeholder {
  color: rgba(255, 255, 255, 0.34);
}
.profile_main_info_answer--open,
.profile_main_info_up_back--visible {
  display: block;
}
.profile_main_info_up_back--visible {
  display: flex;
  border: 0;
}
.profile_main_support_messages {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}
.profile_main_support_thread_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.26);
  padding: 16px;
}
.profile_main_support_thread_copy {
  min-width: 0;
}
.profile_main_support_thread_label {
  margin: 0 0 6px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  line-height: 120%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.profile_main_support_thread_copy h5 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 17px;
  line-height: 125%;
  color: #fff;
  overflow-wrap: anywhere;
}
.profile_main_support_thread_copy p:not(.profile_main_support_thread_label) {
  margin: 7px 0 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.46);
}
.profile_main_support_thread_status {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 10px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.72);
}
.profile_main_support_message {
  padding: 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow-wrap: anywhere;
}
.profile_main_support_message--admin {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
.profile_main_support_message p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.88);
  white-space: pre-wrap;
}
.profile_main_support_message span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
}
.profile_main_history_rect--compact {
  margin-bottom: 0;
}
.profile_main_history_block_image--thumb,
.profile_main_history_block_image--placeholder {
  display: block;
  width: 100%;
  height: 134px;
  object-fit: contain;
  background: #000;
  border-radius: 16px;
}

.header .header_main_item_left_nav a {
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 2px;
}

.header .header_nav_tool_label {
  display: block;
  max-width: calc(var(--sidebar-icon-box) + 12px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.64);
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header .header_main_item_left_nav_active {
  background: transparent;
  box-shadow: none;
}

.header .header_main_item_left_nav_active::before {
  content: "";
  position: absolute;
  inset: -3px -4px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -8px 14px rgba(0, 0, 0, 0.18);
}

.header .header_main_item_left_nav_more.header_main_item_left_nav_active::before {
  inset: -1px;
  border-radius: 11px;
}

.header .header_main_item_left_nav_active a,
.header .header_main_item_left_nav_active button {
  z-index: 1;
}

.header .header_main_item_left_nav_active .header_nav_tool_label {
  color: #fff;
}

.header .header_main_item_right_nav {
  height: var(--sidebar-icon-box);
}
.profile_main_history_block_image--placeholder {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.45);
}
.profile_main_history_block_bottom_icon--dots {
  width: 22px;
  height: 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.4) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.4) 0 2px, transparent 2.5px);
}
.profile_main_history_block_menu {
  position: relative;
  margin-left: auto;
}
.profile_main_history_block_menu .profile_main_history_block_bottom_icon--dots {
  border: 0;
  padding: 0;
  display: block;
}
.profile_main_history_block_menu_popup {
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 8;
  min-width: 176px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  padding: 6px;
}
.profile_main_history_block_menu_popup button {
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 9px 10px;
  text-align: left;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
.profile_main_history_block_menu_popup button:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.profile_main_history_block_menu_sep {
  display: block;
  height: 1px;
  margin: 5px 6px;
  background: rgba(255, 255, 255, 0.09);
}
.profile_main_history_block_menu_popup .profile_main_history_block_menu_danger {
  color: rgba(255, 255, 255, 0.58);
}
.profile_main_history_items--downloads {
  gap: 28px;
}
.profile_main_history_show_more {
  width: 100%;
  min-height: 46px;
  margin-top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.profile_main_history_show_more:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.profile_main_history_downloads_loading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
}
.profile_main_history_downloads_loading_bar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.profile_main_history_downloads_loading_bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.74);
  animation: profileDownloadsLoading 1.15s ease-in-out infinite;
}
.profile_main_history_downloads_skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile_main_history_downloads_skeleton span {
  display: block;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.045), rgba(255,255,255,0.09), rgba(255,255,255,0.045));
  background-size: 220% 100%;
  animation: profileDownloadsSkeleton 1.4s ease-in-out infinite;
}
@keyframes profileDownloadsLoading {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(270%); }
}
@keyframes profileDownloadsSkeleton {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.profile_main_history_rect_item--expired {
  opacity: 0.45;
}
.profile_main_history_rect_item_date--timer {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.52);
}
.profile_main_timer_icon {
  width: 13px;
  height: 13px;
  display: inline-block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l3 2'/><path d='M9 2h6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l3 2'/><path d='M9 2h6'/></svg>") center/contain no-repeat;
}
.profile_main_history_rect_item_download--disabled {
  cursor: default;
  opacity: 0.4;
}
.profile_main_history_rect_item_download--disabled:hover {
  transform: none;
}


.profile_main_info_answer{
  background: var(--seraya-plashka);
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin-top: 24px;
  display: none;
}

.profile_main_info_answer.profile_main_info_answer--open {
  display: block;
}

.profile_main_info_answer_content{
  padding: 16px;
  padding-bottom: 29px;

}

.profile_main_info_answer .profile_main_info_support_item{
  background: var(--chernyy);
  padding: 12px;
  border-radius: 16px;
}

.profile_main_info_answer_text{
  margin-top: 20px;
  padding: 12px;
  padding-right: 23px;
  background: var(--chernyy);
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 132%;
color: var(--obvodka-vybora);
border-radius: 16px;
height: 100%;
max-height: 276px;
overflow: auto;
}

.profile_main_info_up {
  width: 100%;
  display: flex;
  align-items: center;
}
.profile_main_info_up_back {
  margin-left: auto;
  border-radius: 13px;
width: 41px;
height: 41px;
background: var(--seraya-plashka);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .5s;
display: none;
}
.profile_main_info_up_back:hover{
  transform: scale(1.03);
}
.profile_main_info_up_back svg{
  vertical-align: middle;
}
.profile_main_info_up_back--text {
  width: auto;
  min-width: 0;
  gap: 8px;
  padding: 0 14px 0 10px;
}
.profile_main_info_up_back--text svg {
  width: 22px;
  height: 22px;
}
.profile_main_info_up_back--text span {
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  line-height: 120%;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}


.inputRange {
  appearance: none;
  width: 200px;
  height: 7px;
  border-radius: 9999px;
  /* Driven by --range-progress, which lib/sliders.ts publishes per input and
     already documents as the source of this gradient. The rule used to hard-code
     30%, so every slider outside .optimizer_lossy showed a fill frozen at 30%
     no matter what the value was. The 30% fallback keeps the look unchanged
     wherever no script sets the variable. */
  background: linear-gradient(
    90deg,
    #ffffff 0 var(--range-progress, 30%),
    #dddddd10 var(--range-progress, 30%) 100%
  );
  cursor: pointer;
}

.inputRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  box-shadow: none;
  background: linear-gradient(180deg, #fff 0%, #d9d9d9 100%);
box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.4);
}

.inputRange::-moz-range-thumb {
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: none;
}



.optimizer_main {
  width: 100%;
  height: auto;
}
.optimizer_main_title {
  font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
color: var(--obvodka-vybora);
}
.optimizer_main_sections {
  width: 100%;
  height: auto;
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(520px, 1.28fr);
  gap: 32px;
}
.optimizer_main_compression {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
background: var(--color);
border: 1px solid var(--seraya-plashka);
border-radius: 32px;
}
.optimizer_main_compression_content {
  padding: 32px;
  padding-bottom: 28px;
}
.optimizer_main_compression_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
color: var(--obvodka-vybora);
}
.optimizer_main_compression_text {
  margin-top: 12px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
max-width: 512px;
}
.optimizer_limits {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  position: relative;
  overflow: hidden;
}
.optimizer_limits::before,
.optimizer_frames::before,
.optimizer_lossy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.optimizer_limits_content {
  padding: 20px;
}
.optimizer_limits_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: var(--obvodka-vybora);
}
.optimizer_limits_buttons {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.optimizer_limits_button {
  font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 110%;
text-align: center;
color: var(--obvodka-vybora);
min-height: 36px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 8px 6px;
width: 100%;
min-width: 0;
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
overflow: hidden;
overflow-wrap: anywhere;
hyphens: auto;
}
.optimizer_limits_button_custom {
  font-size: 11px;
}
.optimizer_limits_button:hover{
  transform: scale(1.03);
}

.optimizer_limits_button_active {
  color: #000;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
border-color: transparent;
}
.optimizer_limits_custom {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.optimizer_limits_custom[hidden] {
  display: none;
}
.optimizer_limits_custom span {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
}
.optimizer_limits_custom_input {
  margin-left: auto;
  width: 74px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  outline: none;
  background: rgba(255, 255, 255, 0.055);
  color: var(--obvodka-vybora);
  font-family: var(--third-family);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  transition: all .2s;
}
.optimizer_limits_custom_input::-webkit-outer-spin-button,
.optimizer_limits_custom_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.optimizer_limits_custom_input:focus {
  border-color: var(--obvodka-vybora);
  background: rgba(255, 255, 255, 0.09);
}
.optimizer_frames {
  margin-top: 20px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  position: relative;
  overflow: hidden;
}
.optimizer_frames_content {
  padding: 20px;
}
.optimizer_frames_buttons {
  display: flex;
  align-items: center;
  margin-top: 16px;
gap: 12px;
}
.optimizer_frames_button {
  padding: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
display: flex;
flex-direction: column;
text-align: left;
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
line-height: 150%;
color: var(--obvodka-vybora);
width: 100%;
cursor: pointer;
transition: all .5s;
}
.optimizer_frames_button:hover{
  opacity: .5;
}
.optimizer_frames_button span{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 133%;
  color: rgba(255, 255, 255, 0.5);
}
.optimizer_frames_button_active{
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
color: #000;
border-color: transparent;

}
.optimizer_frames_button_active span{
  color: #000;
}
.optimizer_lossy {
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.optimizer_lossy_content {
  padding: 20px;
}
.optimizer_lossy_up {
  display: flex;
  align-items: center;
}
.optimizer_lossy_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
}
.optimizer_lossy_up_percent,
.optimizer_lossy_value {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 14px;
color: #000;
padding: 7px 12px;
border-radius: 8px;
background: var(--obvodka-vybora);
}
.optimizer_lossy_number {
  width: 34px;
  border: 0;
  outline: none;
  background: transparent;
  color: #000;
  font: inherit;
  text-align: right;
}
.inputRange {
  width: 100%;
}
.optimizer_lossy .inputRange{
  margin-top: 24px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0 var(--range-progress, 30%),
    rgba(255, 255, 255, 0.12) var(--range-progress, 30%) 100%
  );
  outline: none;
}
.optimizer_lossy .inputRange::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.optimizer_lossy .inputRange::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.optimizer_lossy .inputRange::-webkit-slider-thumb {
  margin-top: -8px;
}
.optimizer_lossy .inputRange::-moz-range-thumb {
  transform: translateY(0);
}

/* The Builder reuses .inputRange with the optimizer_lossy_input class but sits
   outside .optimizer_lossy, so none of the track geometry above ever reached
   it: a 24px thumb rode above a 7px track with no vertical compensation, which
   is why the Builder sliders looked off their track. This mirrors that geometry
   without the optimizer's margin-top, which belongs to the optimizer layout. */
.inputRange.optimizer_lossy_input {
  height: 8px;
  outline: none;
}
.inputRange.optimizer_lossy_input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.inputRange.optimizer_lossy_input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: transparent;
}
.inputRange.optimizer_lossy_input::-webkit-slider-thumb {
  margin-top: -8px;
}
.inputRange.optimizer_lossy_input::-moz-range-thumb {
  transform: translateY(0);
}

.optimizer_buttons {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;

}
.optimizer_button {
  width: 100%;
  height: auto;
  outline: none;
  border: none;
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
text-align: center;
color: #000;
padding: 20px;
box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
border-radius: 20px;
cursor: pointer;
transition: all .5s;
}
.optimizer_button:nth-child(2){
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
text-align: center;
color: var(--obvodka-vybora);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--seraya-plashka);
box-shadow: none;
}
.optimizer_button_auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  box-shadow: none;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.1;
}
.optimizer_button_auto span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.optimizer_button_auto small {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.optimizer_button:hover{
  transform: scale(1.03);
}
.optimizer_button:disabled,
.optimizer_button_disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.optimizer_button:disabled:hover,
.optimizer_button_disabled:hover {
  transform: none;
}
.optimizer_preview_placeholder {
  max-width: 180px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}
.optimizer_preview_image {
  display: none;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.optimizer_main_upload {
  min-width: 0;
}
.optimizer_main_upload_main {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  background: var(--seraya-plashka);
  width: 100%;
  height: auto;
  min-height: 450px;
  height: auto;
  border: 2px dashed var(--punktir);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
cursor: pointer;
transition: all .5s;
}
.optimizer_main_upload_main_compact {
  margin-top: 20px;
  min-height: 96px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.optimizer_main_upload_main_compact:hover,
.optimizer_main_upload_main_compact.is-dragover {
  opacity: 1;
  border-color: var(--obvodka-vybora);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
  transform: translateY(-1px);
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_content {
  max-width: 100%;
  padding: 16px;
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_items {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_icon {
  grid-row: span 2;
  width: 42px;
  height: 42px;
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_icon svg {
  width: 20px;
  height: 20px;
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_title,
.optimizer_main_upload_main_compact .optimizer_main_upload_main_text {
  text-align: left;
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_title {
  font-size: 16px;
}
.optimizer_main_upload_main_compact .optimizer_main_upload_main_text {
  font-size: 13px;
}
.optimizer_main_upload_main:hover{
  opacity: .5;
}
.optimizer_main_upload_main_compact:hover,
.optimizer_main_upload_main_compact.is-dragover {
  opacity: 1;
  border-color: var(--obvodka-vybora);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
  transform: translateY(-1px);
}
.optimizer_main_upload_main_content {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 371px;
  display: block;
  margin: 0 auto;
}
.optimizer_main_upload_main_items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.optimizer_main_upload_main_icon {
  border: 1px solid var(--seraya-plashka);
border-radius: 33554400px;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.optimizer_main_upload_main_icon svg{
  vertical-align: middle;
}
.optimizer_main_upload_main_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
text-align: center;
color: var(--obvodka-vybora);
}
.optimizer_main_upload_main_text {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 125%;
text-align: center;
color: rgba(255, 255, 255, 0.4);
}
.optimizer_main_upload_main_stats {
  width: 100%;
  height: auto;
  border: 1px solid var(--seraya-plashka);
border-radius: 32px;
background: var(--color);
margin-top: 32px;
}
.optimizer_main_upload_main_stats_inline {
  margin-top: 18px;
  display: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
}
.optimizer_compare.has-stats + .optimizer_main_upload_main_stats_inline {
  display: block;
}
.optimizer_main_upload_main_stats_inline .optimizer_main_upload_main_stats_content {
  padding: 14px;
}
.optimizer_main_upload_main_stats_inline .optimizer_main_upload_main_stats_title {
  display: none;
}
.optimizer_main_upload_main_stats_inline .optimizer_main_upload_main_stats_items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}
.optimizer_main_upload_main_stats_inline .optimizer_main_upload_main_stats_item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.075);
}
.optimizer_main_upload_main_stats_inline .optimizer_main_upload_main_stats_item_title {
  margin-bottom: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}
.optimizer_main_upload_main_stats_inline .optimizer_main_upload_main_stats_item_value {
  margin-left: auto;
  font-size: 18px;
  line-height: 1.1;
}
.optimizer_compare {
  --compare-pos: 50%;
  --gif-aspect: 630 / 824;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--seraya-plashka);
  border-radius: 32px;
  background: var(--color);
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
  padding: 28px;
}
.optimizer_compare_header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.optimizer_compare_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 24px;
  color: var(--obvodka-vybora);
}
.optimizer_compare_text {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.48);
}
.optimizer_compare_badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.optimizer_compare.has-after .optimizer_compare_badges {
  opacity: 1;
}
.optimizer_compare_badges span {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(6px);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--obvodka-vybora);
}
.optimizer_compare_stage {
  position: relative;
  width: min(100%, calc((100vh - 250px) * (var(--gif-aspect))));
  min-width: min(100%, 360px);
  max-width: 100%;
  aspect-ratio: var(--gif-aspect);
  max-height: calc(100vh - 250px);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.optimizer_result_status {
  margin: 14px 2px 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.42;
}
.optimizer_result_status[hidden] {
  display: none;
}
.optimizer_result_status[data-tone="muted"] {
  color: rgba(255, 255, 255, 0.5);
}
.optimizer_result_status[data-tone="error"] {
  color: rgba(255, 214, 214, 0.9);
}
.optimizer_auto_progress {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.11), transparent 44%),
    rgba(255, 255, 255, 0.045);
}
.optimizer_auto_progress[hidden] {
  display: none;
}
.optimizer_auto_progress_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.72);
}
.optimizer_auto_progress_count {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.42);
}
.optimizer_auto_progress_bar {
  margin-top: 10px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.optimizer_auto_progress_bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.52));
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.22);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.optimizer_compare_stage .optimizer_preview_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease;
}
.optimizer_compare_after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--compare-pos));
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.optimizer_compare.has-after .optimizer_compare_after {
  display: flex;
}
.optimizer_compare:not(.has-after) .optimizer_compare_divider,
.optimizer_compare:not(.has-after) .optimizer_compare_range {
  display: none;
}
.optimizer_compare.is-optimizing .optimizer_preview_image {
  filter: brightness(0.72) saturate(0.85);
}
.optimizer_compare_loader {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(2px);
}
.optimizer_compare.is-optimizing .optimizer_compare_loader {
  display: flex;
}
.optimizer_compare_transition {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}
.optimizer_compare.is-preview-loading .optimizer_compare_transition {
  display: flex;
  animation: optimizerTransitionOut 0.42s ease forwards;
}
.optimizer_compare_loader span,
.optimizer_compare_transition span {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--obvodka-vybora);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
  animation: optimizerSpin 0.85s linear infinite;
}
.optimizer_compare_transition span {
  width: 42px;
  height: 42px;
}
.optimizer_compare_loader p,
.optimizer_compare_transition p {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--obvodka-vybora);
}
@keyframes optimizerSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes optimizerTransitionOut {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.optimizer_compare_divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare-pos);
  width: 2px;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
  transform: translateX(-1px);
  pointer-events: none;
}
.optimizer_compare_divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
  transform: translate(-50%, -50%);
}
.optimizer_compare_range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  appearance: none;
  background: transparent;
}
.optimizer_compare_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 100vh;
  cursor: ew-resize;
  background: transparent;
  box-shadow: none;
}
.optimizer_compare_range::-moz-range-thumb {
  width: 44px;
  height: 100vh;
  cursor: ew-resize;
  border: none;
  background: transparent;
  box-shadow: none;
}
.optimizer_main_upload_main_stats_content {
  padding: 32px;
}
.optimizer_main_upload_main_stats_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 140%;
color: var(--obvodka-vybora);
}
.optimizer_main_upload_main_stats_items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.optimizer_main_upload_main_stats_item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  background: var(--seraya-plashka);
  border-radius: 16px;
  padding: 16px;
}
.optimizer_main_upload_main_stats_item_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.optimizer_main_upload_main_stats_item_value {
  margin-left: auto;
  font-family: var(--third-family);
font-weight: 700;
font-size: 20px;
line-height: 150%;
color: var(--obvodka-vybora);
}



:root {
  --cr-size: 20px;
  --cr-radius: 4px;
  --cr-border-w: 2px;
  --cr-font-size: 16px;
  --cr-gap: 10px;
  --cr-row-gap: 12px;
  --cr-font-color: #111827;
  --cr-font-weight: 400;
  --cr-unchecked-bg: #ffffff;
  --cr-unchecked-border: #d1d5db;
  --cr-checked-bg: #3b82f6;
  --cr-checked-border: #3b82f6;
  --cr-disabled-opacity: 0.4;
}

.cr-wrapper {
  display: flex;
  align-items: center;
  gap: var(--cr-gap);
  cursor: pointer;
  user-select: none;
  font-size: var(--cr-font-size);
  font-weight: var(--cr-font-weight);
  color: var(--cr-font-color);

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  color: var(--obvodka-vybora);
}

.cr-wrapper input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cr-input {
  position: relative;
  flex-shrink: 0;
  width: var(--cr-size);
  height: var(--cr-size);
  border-radius: var(--cr-radius);
  border: var(--cr-border-w) solid var(--cr-unchecked-border);
  box-sizing: border-box;
  transition: all 0.15s;
  border-radius: 6px;
border: 1.50px solid rgba(255, 255, 255, 0.4);
}

.cr-wrapper:hover .cr-input {
  border-color: #fff;

}





.cr-wrapper input:checked ~ .cr-input::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(14% 52%, 0% 66%, 38% 100%, 100% 14%, 84% 0%, 38% 68%);
}

.cr-wrapper input:disabled ~ .cr-input,
.cr-wrapper input:disabled ~ span {
  opacity: var(--cr-disabled-opacity);
}

.cr-wrapper input:disabled { cursor: not-allowed; }
.cr-wrapper:has(input:disabled) { cursor: not-allowed; }












.gif_edit_main {
  width: 100%;
  height: auto;
}
.gif_edit_title {
  font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
color: var(--obvodka-vybora);
}
.gif_edit_main_up {
  width: 100%;
  height: auto;
  margin-top: 32px;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.19);
background: var(--seraya-plashka);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 28px;
}
.gif_edit_main_up_content {
  padding: 12px;
  padding-left: 16px;
}
.gif_edit_main_up_items {
  display: flex;
  align-items: center;
}
.gif_edit_main_up_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
}
.gif_edit_main_up_buttons {
  background: var(--color);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  border-radius: 20px;
}
.gif_edit_main_up_button {
  outline: none;
  border: none;
  background: transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all .5s;
  padding: 11px 24px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 12px;
color: var(--obvodka-vybora);
}
.gif_edit_main_up_button:hover{
  opacity: .5;
}

.gif_edit_main_up_button_active{
  color: #000;
  box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.4);
background: var(--obvodka-vybora);

}
.gif_edit_main_up_button_active:hover{
  opacity: 1;
}
.gif_edit_main_up_download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  outline: none;
  border: none;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, filter .25s;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: #000;
  padding: 14px 22px 14px 18px;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
  background: var(--obvodka-vybora);
  border-radius: 14px;
}
.gif_edit_main_up_download::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v13'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v13'/><path d='M6 11l6 6 6-6'/><path d='M4 21h16'/></svg>") center/contain no-repeat;
}
.gif_edit_main_up_download:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 22px 0 rgba(255, 255, 255, 0.36);
}
.gif_edit_main_up_download:active {
  transform: translateY(0);
}
.gif_edit_main_up_download.is-busy {
  color: rgba(0, 0, 0, 0.72);
  filter: saturate(.6);
}
.gif_edit_main_up_download.is-busy::before {
  animation: gif-edit-spin 1.2s linear infinite;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M21 12a9 9 0 1 1-6.2-8.55'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M21 12a9 9 0 1 1-6.2-8.55'/></svg>") center/contain no-repeat;
}
@keyframes gif-edit-spin {
  to { transform: rotate(360deg); }
}
.gif_edit_main_load {
  margin-top: 18px;
  width: 100%;
  height: auto;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.26);
background: rgba(255, 255, 255, .045);
border: 1px dashed rgba(255, 255, 255, .22);
border-radius: 18px;
cursor: pointer;
transition: all .5s;
}
.gif_edit_main_load:hover{
  opacity: .5;
}
.gif_edit_main_load.is-hidden,
.gif_edit.is-multi-mode .gif_edit_main_load {
  display: none;
}
.gif_edit_main_load_content {
  width: 100%;
  height: 100%;
  padding: 22px;

}
.gif_edit_main_load_main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gif_edit_main_load_main_icon {
  border: 1px solid var(--seraya-plashka);
border-radius: 33554400px;
width: 42px;
height: 42px;
box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0);
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
}
.gif_edit_main_load_main_icon svg{
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin: 0 auto;

}
.gif_edit_main_load_main_title {
  margin-top: 10px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 15px;
text-align: center;
color: var(--obvodka-vybora);
}
.gif_edit_main_load_main_text {
  margin-top: 6px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 13px;
text-align: center;
color: rgba(255, 255, 255, 0.4);
}
.gif_edit_main_media {
  width: 100%;
  height: auto;
  margin-top: 28px;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--seraya-plashka);
border-radius: 32px;
}
.gif_edit_main_media_content {
  padding: 32px;
}
.gif_edit_main_media_title {
  font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 133%;
color: var(--obvodka-vybora);
}
.gif_edit_main_media_text {
  margin-top: 8px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 125%;
color: rgba(255, 255, 255, 0.4);
}
.gif_edit_main_media_main {
  width: 100%;
  height: auto;
  margin-top: 32px;
  box-shadow: none;
background: rgba(0, 0, 0, 0.22);
border-radius: 18px;
}
.gif_edit_main_media_main_content {
  padding: 0;
}
.gif_edit_main_media_types {
}
.gif_edit_main_media_types_one {
}
.gif_edit_main_media_types_one_items {
  width: 100%;
  height: auto;
  display: flex;
}
.gif_edit_main_media_types_one_item {
  width: 100%;
  height: 100%;
  min-height: 519px;
  border: 1px solid var(--seraya-plashka);
  padding: 17px;
  display: flex;
  flex-direction: column;
cursor: pointer;
transition: all .5s;
}
.gif_edit_main_media_types_one_item:hover{
  opacity: .5;
}
.gif_edit_main_media_types_one_item_number {
  font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
text-align: center;
color: var(--seraya-plashka);
margin-top: auto;
margin-bottom: auto;
}
.gif_edit_main_media_types_one_item_size {
  font-family: var(--third-family);
font-weight: 400;
font-size: 10px;
line-height: 150%;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.2);
text-align: center;

}
.gif_edit_main_media_main_timeline {
  width: 100%;
  height: auto;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--seraya-plashka);
border-radius: 32px;
margin-top: 32px;
}
.gif_edit_main_media_main_timeline_content {
  padding: 32px;
}
.gif_edit_main_media_main_timeline_up {
  display: flex;
  align-items: center;
  width: 100%;
}
.gif_edit_main_media_main_timeline_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
}
.gif_edit_main_media_main_timeline_time {
  margin-left: auto;
  font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
line-height: 143%;
color: rgba(255, 255, 255, 0.6);
padding: 4px 12px;
background: var(--seraya-plashka);
border-radius: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gif_edit_trim {
  margin-top: 22px;
  padding-bottom: 0;
  user-select: none;
  touch-action: none;
}

.gif_edit_trim_track {
  position: relative;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  overflow: visible;
  background: #0a0a0a;
  border: 1px solid var(--seraya-plashka);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.gif_edit_trim_track_grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, .09) 0,
      rgba(255, 255, 255, .09) 1px,
      transparent 1px,
      transparent 10%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
    #151515;
}

.gif_edit_trim_track_selection {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 30%;
  width: 40%;
  pointer-events: auto;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(245, 245, 245, .22) 0%,
    rgba(105, 105, 105, .74) 48%,
    rgba(45, 45, 45, .92) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 0 16px rgba(255, 255, 255, .055);
}

.gif_edit_trim_track_selection::before {
  content: attr(data-duration);
  max-width: 100%;
  padding: 0 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}

.gif_edit_trim_track_selection:not(.is-compact)::before {
  content: attr(data-range) "  \00b7  " attr(data-duration);
}

.gif_edit_trim_track_selection.is-tiny::before {
  content: attr(data-duration);
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  max-width: none;
  min-width: 46px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(0, 0, 0, .7);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 11px;
  color: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
}

.gif_edit_trim_track_selection:active {
  cursor: grabbing;
}

.gif_edit_trim_track_shade {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.82);
}

.gif_edit_trim_track_shade--left {
  left: 0;
  width: 30%;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.gif_edit_trim_track_shade--right {
  right: 0;
  width: 30%;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.gif_edit_trim_handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  margin-left: -14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 3;
  touch-action: none;
}

.gif_edit_trim_handle:focus-visible {
  outline: 2px solid var(--obvodka-vybora);
  outline-offset: 2px;
}

.gif_edit_trim_handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 8px rgba(0, 0, 0, .5);
  pointer-events: none;
}

.gif_edit_trim_handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 16px;
  margin-top: -8px;
  background: var(--obvodka-vybora);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.gif_edit_trim_handle--start::after {
  left: 50%;
    margin-left: -1px;
}

.gif_edit_trim_handle--end::after {
  left: 50%;
  margin-left: -6px;
}

.gif_edit_main_media_main_settings {
  width: 100%;
  height: auto;
  margin-top: 32px;

}
.gif_edit_main_media_main_settings_items {
  display: flex;
  align-items: center;
}
.gif_edit_main_media_main_settings_size {
}
.gif_edit_main_media_main_settings_size_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
}
.gif_edit_main_media_main_settings_size_buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.gif_edit_main_media_main_settings_size_button,
.gif_edit_main_media_main_settings_fps_button {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  padding: 10.5px 15.73px;
  border: 1px solid var(--seraya-plashka);
border-radius: 12px;
cursor: pointer;
transition: all .5s;
outline: none;
background: transparent;
}
.gif_edit_main_media_main_settings_size_button:hover,
.gif_edit_main_media_main_settings_fps_button:hover{
  opacity: .5;
}
.gif_edit_main_media_main_settings_size_button_active,
.gif_edit_main_media_main_settings_fps_button_active {
  color: #000;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
}
.gif_edit_main_media_main_settings_size_button--auto {
  min-width: 96px;
}
.cr-wrapper {
}
.cr-input {
}
.gif_edit_main_media_main_settings_fps {
  margin-left: auto;
}
.gif_edit_main_media_main_settings_style {
  align-self: flex-end;
  margin-left: 20px;
}
.gif_edit_main_media_main_settings_style_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 133%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.gif_edit_main_media_main_settings_style_buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.gif_edit_main_media_main_settings_style_button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid var(--seraya-plashka);
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  user-select: none;
  transition: all .25s;
}
.gif_edit_main_media_main_settings_style_button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gif_edit_main_media_main_settings_frame_icon {
  width: 18px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 3px;
  box-shadow: inset 6px 0 0 rgba(255, 255, 255, 0.08), inset -6px 0 0 rgba(255, 255, 255, 0.08);
  transition: all .25s;
}
.gif_edit_main_media_main_settings_style_button:hover {
  border-color: rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.9);
}
.gif_edit_main_media_main_settings_style_button:has(input:checked) {
  color: #000;
  border-color: transparent;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
  background: var(--obvodka-vybora);
}
.gif_edit_main_media_main_settings_style_button:has(input:checked) .gif_edit_main_media_main_settings_frame_icon {
  border-color: #000;
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.12), inset -6px 0 0 rgba(0, 0, 0, 0.12);
}
.gif_edit_main_media_main_settings_fps_title {
  font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}
.gif_edit_main_media_main_settings_fps_buttons {
  display: flex;
  align-items: center;
  margin-top: 4px;
  gap: 8px;
}

/* Export panel holds the download CTA below size/fps */
.gif_edit_main_media_main_settings_export {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  justify-content: flex-end;
}
.gif_edit_main_media_main_settings_export .gif_edit_main_up_download {
  margin-left: 0;
  padding: 16px 28px 16px 22px;
  font-size: 15px;
}

.gif_edit_main_colors {
  width: 100%;
  margin-top: 24px;
  box-shadow: 0 0 28px 0 rgba(0, 0, 0, 0.34);
background: rgba(0, 0, 0, 0.28);
border: 1px solid var(--seraya-plashka);
border-radius: 22px;
}
.gif_edit_main_colors_content {
  padding: 24px;
}
.gif_edit_main_colors_up {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gif_edit_main_colors_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 133%;
  color: var(--obvodka-vybora);
}
.gif_edit_main_colors_action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  transition: all .25s;
}
.gif_edit_main_colors_action:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.gif_edit_main_colors_action svg {
  flex-shrink: 0;
}

.gif_edit_main_colors_presets {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 14px;
  flex-wrap: wrap;
}
.gif_edit_main_colors_presets_label {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .02em;
}
.gif_edit_main_colors_presets_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gif_edit_main_colors_preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(0, 0, 0, .36);
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  transition: all .25s;
}
.gif_edit_main_colors_preset:hover {
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.gif_edit_main_colors_preset.is-active {
  border-color: rgba(26, 159, 255, .55);
  background: rgba(26, 159, 255, .18);
  color: #fff;
  box-shadow: 0 0 16px rgba(26, 159, 255, .22);
}
/* Preset swatches with minimal line icons via mask-image, inherit currentColor */
.gif_edit_main_colors_preset_swatch {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .85;
  transition: opacity .2s;
}
.gif_edit_main_colors_preset:hover .gif_edit_main_colors_preset_swatch,
.gif_edit_main_colors_preset.is-active .gif_edit_main_colors_preset_swatch {
  opacity: 1;
}
.gif_edit_main_colors_preset_swatch--original {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='1.6' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='1.6' fill='black'/></svg>");
}
.gif_edit_main_colors_preset_swatch--grayscale {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><rect x='3' y='3' width='8' height='8' rx='1.6' fill='black'/><rect x='13' y='13' width='8' height='8' rx='1.6' fill='black'/><rect x='13' y='3' width='8' height='8' rx='1.6' stroke='black' stroke-width='1.6'/><rect x='3' y='13' width='8' height='8' rx='1.6' stroke='black' stroke-width='1.6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><rect x='3' y='3' width='8' height='8' rx='1.6' fill='black'/><rect x='13' y='13' width='8' height='8' rx='1.6' fill='black'/><rect x='13' y='3' width='8' height='8' rx='1.6' stroke='black' stroke-width='1.6'/><rect x='3' y='13' width='8' height='8' rx='1.6' stroke='black' stroke-width='1.6'/></svg>");
}
.gif_edit_main_colors_preset_swatch--bright {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
}
.gif_edit_main_colors_preset_swatch--contrast {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/><path d='M12 3a9 9 0 0 1 0 18z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='9' stroke='black' stroke-width='1.8'/><path d='M12 3a9 9 0 0 1 0 18z' fill='black'/></svg>");
}
.gif_edit_main_colors_preset_swatch--soft {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
}
.gif_edit_main_colors_preset_swatch--vivid {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='9' r='4' fill='black'/><circle cx='16' cy='9' r='4' fill='black' opacity='.65'/><circle cx='12' cy='16' r='4' fill='black' opacity='.85'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='9' r='4' fill='black'/><circle cx='16' cy='9' r='4' fill='black' opacity='.65'/><circle cx='12' cy='16' r='4' fill='black' opacity='.85'/></svg>");
}

/* === Section header icons (::before, survive textContent rewrites by the hook) === */
.gif_edit_main_media_title,
.gif_edit_main_colors_title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gif_edit_main_media_title::before,
.gif_edit_main_colors_title::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  opacity: .85;
}
.gif_edit_main_media_title::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4M7 12h10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><path d='M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4M7 12h10'/></svg>");
}
.gif_edit_main_colors_title::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 1 0-18c4.97 0 9 3.582 9 8 0 2.21-1.79 4-4 4h-2.5a1.5 1.5 0 0 0-1.06 2.56A1.5 1.5 0 0 1 12 21z'/><circle cx='7.5' cy='10.5' r='1.2' fill='black'/><circle cx='12' cy='7.5' r='1.2' fill='black'/><circle cx='16.5' cy='10.5' r='1.2' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 1 1 0-18c4.97 0 9 3.582 9 8 0 2.21-1.79 4-4 4h-2.5a1.5 1.5 0 0 0-1.06 2.56A1.5 1.5 0 0 1 12 21z'/><circle cx='7.5' cy='10.5' r='1.2' fill='black'/><circle cx='12' cy='7.5' r='1.2' fill='black'/><circle cx='16.5' cy='10.5' r='1.2' fill='black'/></svg>");
}
.gif_edit_main_colors_main {
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 20px;
}
.gif_edit_main_colors_main_content {
padding: 16px;
}
.gif_edit_main_colors_main_blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gif_edit_main_colors_main_block {
  width: 100%;
  height: auto;
}
.gif_edit_main_colors_main_block_up {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gif_edit_main_colors_main_block_up_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 15px;
color: var(--obvodka-vybora);
white-space: nowrap;
min-width: 0;
}
.gif_edit_main_colors_main_block_up_percent {
  margin-left: auto;
  font-family: var(--font-family);
font-weight: 600;
font-size: 13px;
color: #000;
padding: 7px 12px;
background: var(--obvodka-vybora);
border-radius: 8px;
white-space: nowrap;
}

.gif_edit_main_colors_input {
  margin-top: 16px;
}
.gif_edit_main_patcher {
  width: 100%;
  margin-top: 28px;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--seraya-plashka);
border-radius: 32px;
margin-bottom: 32px;

}
.gif_edit_main_patcher_content {
  padding: 28px;
}
.gif_edit_main_patcher_blocks {
  display: flex;
  align-items: center;
  gap: 28px;
}
.gif_edit_main_patcher_block {
  width: 100%;
}
.gif_edit_main_patcher_block_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 133%;
color: var(--obvodka-vybora);

}
.gif_edit_main_patcher_block_text {
  margin-top: 13px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
line-height: 143%;
color: rgba(255, 255, 255, 0.5);
}
.gif_edit_main_patcher_block_rect {
  width: 100%;
  height: auto;
  background: var(--seraya-plashka);
  border: 2px dashed var(--punktir);
border-radius: 16px;
cursor: pointer;
transition: all .5s;
padding: 24px;
}
.gif_edit_main_patcher_block_rect:hover{
  opacity: .5;
}
.gif_edit_main_patcher_block_rect_icon {
  margin: 0 auto;
  border-radius: 100px;
width: 32px;
height: 32px;
background: var(--seraya-plashka);
display: flex;
align-items: center;
justify-content: center;
}
.gif_edit_main_patcher_block_rect_text {
  margin-top: 8px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
}
.gif_edit_main_patcher_button {
  width: auto;
  min-width: 260px;
  height: auto;
  margin-top: 20px;
  margin-left: auto;
  display: block;
  font-family: var(--font-family);
font-weight: 600;
font-size: 14px;
text-align: center;
color: #000;
padding: 14px 18px;
background: var(--obvodka-vybora);
border-radius: 14px;
cursor: pointer;
transition: all .5s;
outline: none;
border: none;
}
.gif_edit_main_patcher_button:hover{
  transform: scale(1.01);
}

.gif_edit_main_media_types_two,
.gif_edit_main_media_types_three{
  display: none;
}

.gif_edit_main_media_types_two .gif_edit_main_media_types_one_items,
.gif_edit_main_media_types_three .gif_edit_main_media_types_one_items{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gif_edit_main_media_types_two .gif_edit_main_media_types_one_item,
.gif_edit_main_media_types_three .gif_edit_main_media_types_one_item {
  width: 100%;
  height: 100%;
  min-height: 519px;
  border: 1px solid var(--seraya-plashka);
  padding: 17px;
  display: flex;
  flex-direction: column;
}

.gif_edit_main_media_types_two .gif_edit_main_media_types_one_item_size,
.gif_edit_main_media_types_three .gif_edit_main_media_types_one_item_size{
  display: none;

}

.gif_edit_main_media_types_two .gif_edit_main_media_types_one_item,
.gif_edit_main_media_types_three .gif_edit_main_media_types_one_item{
  min-height: auto;
  padding: 79px 30px;
}

.gif_edit_crop_tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: none;
  gap: 8px;
}

.gif_edit.has-crop-preview .gif_edit_crop_tools {
  display: flex;
}

.gif_edit_crop_reset {
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  padding: 9px 15px;
  transition: all .25s;
  backdrop-filter: blur(10px);
}

.gif_edit_crop_reset:hover {
  border-color: var(--obvodka-vybora);
  color: #fff;
}

.gif_edit_crop_stage.is-auto .gif_edit_crop_reset {
  border-color: rgba(26, 159, 255, .72);
  background: rgba(26, 159, 255, .22);
  color: #fff;
}

.gif_edit_crop_stage {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 430;
  overflow: hidden;
  border: 1px solid var(--seraya-plashka);
  border-radius: 14px;
  background: #000;
  outline: none;
  touch-action: none;
  user-select: none;
}

.gif_edit_crop_stage .gif_edit_main_media_types_one_item {
  position: relative;
  z-index: 3;
}

.gif_edit_crop_stage:focus-visible {
  border-color: var(--obvodka-vybora);
}

.gif_edit_crop_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.gif_edit.is-multi-mode .gif_edit_crop_stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.gif_edit.is-double-mode .gif_edit_crop_stage::before {
  background:
    linear-gradient(to bottom, transparent calc(50% - 2px), rgba(0, 0, 0, .88) calc(50% - 2px), rgba(0, 0, 0, .88) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255, 255, 255, .18) 50%, transparent calc(50% + 1px));
}

.gif_edit.is-triple-mode .gif_edit_crop_stage::before {
  background:
    linear-gradient(to bottom, transparent calc(33.333% - 2px), rgba(0, 0, 0, .88) calc(33.333% - 2px), rgba(0, 0, 0, .88) calc(33.333% + 2px), transparent calc(33.333% + 2px), transparent calc(66.666% - 2px), rgba(0, 0, 0, .88) calc(66.666% - 2px), rgba(0, 0, 0, .88) calc(66.666% + 2px), transparent calc(66.666% + 2px)),
    linear-gradient(to bottom, transparent calc(33.333% - 1px), rgba(255, 255, 255, .18) 33.333%, transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(255, 255, 255, .18) 66.666%, transparent calc(66.666% + 1px));
}

.gif_edit.is-auto-height-mode .gif_edit_crop_stage::before {
  background: none;
}

.gif_edit_crop_canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.js-gif-edit-crop-img,
.js-gif-edit-crop-video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gif_edit_crop_splits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.gif_edit_crop_splits span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gif_edit_crop_splits span:nth-child(1) { left: 20%; }
.gif_edit_crop_splits span:nth-child(2) { left: 40%; }
.gif_edit_crop_splits span:nth-child(3) { left: 60%; }
.gif_edit_crop_splits span:nth-child(4) { left: 80%; }

.gif_edit_crop_box {
  position: absolute;
  display: none;
  border: 1px solid rgba(87, 190, 255, .95);
  background: rgba(26, 159, 255, .001);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .55),
    0 0 18px rgba(26, 159, 255, .18);
  cursor: move;
  z-index: 6;
  pointer-events: auto;
}

.gif_edit_crop_stage.is-auto .gif_edit_crop_box {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .72);
}

.gif_edit_crop_handle {
  position: absolute;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(118, 207, 255, .95);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(87, 190, 255, .24), rgba(26, 159, 255, .08)),
    rgba(3, 8, 13, .92);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .78),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 0 10px rgba(26, 159, 255, .24);
  pointer-events: auto;
  z-index: 7;
  backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.gif_edit_crop_handle:hover {
  border-color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(26, 159, 255, .16)),
    rgba(4, 12, 18, .96);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .72),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 0 18px rgba(26, 159, 255, .42);
}

.gif_edit_crop_handle_tl { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.gif_edit_crop_handle_tr { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.gif_edit_crop_handle_bl { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.gif_edit_crop_handle_br { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.gif_edit_crop_handle_t { left: 50%; top: 0; transform: translate(-50%, -50%); cursor: ns-resize; }
.gif_edit_crop_handle_b { left: 50%; bottom: 0; transform: translate(-50%, 50%); cursor: ns-resize; }
.gif_edit_crop_handle_l { left: 0; top: 50%; transform: translate(-50%, -50%); cursor: ew-resize; }
.gif_edit_crop_handle_r { right: 0; top: 50%; transform: translate(50%, -50%); cursor: ew-resize; }

.gif_edit_crop_empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  z-index: 3;
}

.gif_edit.has-crop-preview .gif_edit_main_media_types_one_item {
  display: none;
}

.gif_edit_crop_reset:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.gif_edit_transform {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--seraya-plashka);
  border-radius: 16px;
  background: rgba(0, 0, 0, .34);
  opacity: .45;
  transition: opacity .25s;
}

.gif_edit.has-crop-preview .gif_edit_transform,
.gif_edit_transform.is-ready {
  opacity: 1;
}

.gif_edit_transform_transport {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.gif_edit_transform_icon {
  width: 36px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 700;
  transition: all .25s;
}

.gif_edit_transform_icon:hover {
  border-color: var(--obvodka-vybora);
  color: var(--obvodka-vybora);
}

.gif_edit_transform_time {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.gif_edit_transform_scrub {
  flex: 1 1 260px;
  min-width: 180px;
  accent-color: var(--obvodka-vybora);
}

.gif_edit_transform_timeline {
  margin-top: 10px;
  box-shadow: none;
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .1);
  border-radius: 14px;
}

.gif_edit_transform_timeline .gif_edit_main_media_main_timeline_content {
  padding: 12px;
}

.gif_edit_transform_timeline .gif_edit_main_media_main_timeline_title {
  font-size: 13px;
  font-weight: 700;
}

.gif_edit_transform_timeline .gif_edit_main_media_main_timeline_time {
  max-width: 54%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
}

.gif_edit_transform_timeline .gif_edit_trim {
  margin-top: 14px;
}

.gif_edit_multi_timelines {
  display: none;
  margin-top: 16px;
  gap: 14px;
}

.gif_edit_multi_timeline {
  display: none;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

.gif_edit.is-multi-mode .js-gif-edit-standard-trim,
.gif_edit.is-multi-mode .gif_edit_transform_timeline > .gif_edit_main_media_main_timeline_content > .gif_edit_main_media_main_timeline_up {
  display: none;
}

.gif_edit.is-multi-mode .gif_edit_multi_timelines {
  display: grid;
}

.gif_edit.is-double-mode .gif_edit_multi_timeline[data-row-index="0"],
.gif_edit.is-double-mode .gif_edit_multi_timeline[data-row-index="1"],
.gif_edit.is-triple-mode .gif_edit_multi_timeline {
  display: block;
}

.gif_edit_multi_timeline .gif_edit_trim {
  margin-top: 10px;
}

.gif_edit_transform_timeline .gif_edit_trim_track {
  height: 52px;
  border-radius: 12px;
}

.gif_edit_transform_timeline .gif_edit_trim_handle::after {
  height: 14px;
  margin-top: -7px;
}

.gif_edit_transform button:disabled,
.gif_edit_transform input:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.gif_edit_progress {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
    rgba(0, 0, 0, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px);
}

.gif_edit_progress.is-active {
  display: flex;
}

.gif_edit_progress_spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(255, 255, 255, .2);
  border-top-color: var(--obvodka-vybora);
  border-radius: 50%;
  animation: gifEditSpin .8s linear infinite;
  box-shadow: 0 0 12px rgba(255, 255, 255, .1);
}

.gif_edit_progress_mascot {
  position: relative;
  display: block;
  width: 34px;
  height: 24px;
  flex: 0 0 34px;
  margin-left: 0;
  opacity: 0;
  transform: translateY(3px) scale(.9);
  pointer-events: none;
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.gif_edit_progress_mascot_body {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 19px;
  height: 12px;
  border-radius: 7px 8px 5px 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(210, 224, 255, .88));
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 0 18px rgba(255, 255, 255, .18);
  animation: gifEditMascotBob 1.1s ease-in-out infinite;
}

.gif_edit_progress_mascot_body::before {
  content: "";
  position: absolute;
  right: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 6px 6px 4px 4px;
  background: inherit;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.gif_edit_progress_mascot_body::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
}

.gif_edit_progress_mascot_tail {
  position: absolute;
  left: 2px;
  top: 12px;
  width: 10px;
  height: 7px;
  border-radius: 9px 2px 2px 9px;
  background: rgba(222, 232, 255, .9);
  transform-origin: right center;
  animation: gifEditMascotTail .8s ease-in-out infinite;
}

.gif_edit_progress_copy {
  display: flex;
  min-width: 120px;
  max-width: 42%;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 2px;
}

.gif_edit_progress_text {
  min-width: 120px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
}

.gif_edit_progress_hint {
  display: block;
  max-height: 0;
  opacity: 0;
  transform: translateY(-3px);
  overflow: hidden;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
  transition:
    max-height .35s ease,
    opacity .35s ease,
    transform .35s ease;
}

.gif_edit_progress_bar {
  position: relative;
  height: 6px;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
}

.gif_edit_progress_bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .98));
  box-shadow: 0 0 14px rgba(255, 255, 255, .2);
  transition: width .35s ease;
}

.gif_edit.is-processing .gif_edit_progress_bar span {
  min-width: 18%;
}

/* Lock editing surfaces while exporting */
.gif_edit.is-processing .gif_edit_crop_stage,
.gif_edit.is-processing .gif_edit_transform,
.gif_edit.is-processing .gif_edit_trim,
.gif_edit.is-processing .gif_edit_trim_track,
.gif_edit.is-processing .gif_edit_trim_track_selection,
.gif_edit.is-processing .gif_edit_trim_handle,
.gif_edit.is-processing .gif_edit_main_layers,
.gif_edit.is-processing .gif_edit_main_colors,
.gif_edit.is-processing .gif_edit_main_media_main_settings_items,
.gif_edit.is-processing .gif_edit_main_load,
.gif_edit.is-processing .gif_edit_main_up_buttons {
  pointer-events: none;
  user-select: none;
}
.gif_edit.is-processing .gif_edit_transform,
.gif_edit.is-processing .gif_edit_trim,
.gif_edit.is-processing .gif_edit_main_layers,
.gif_edit.is-processing .gif_edit_main_colors,
.gif_edit.is-processing .gif_edit_main_media_main_settings_items,
.gif_edit.is-processing .gif_edit_main_up_buttons {
  opacity: .55;
  filter: saturate(.7);
  transition: opacity .25s, filter .25s;
}

/* Dim the preview itself and float the progress overlay over it */
.gif_edit_main_media_types {
  position: relative;
}
.gif_edit.is-processing .gif_edit_crop_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  border-radius: inherit;
  pointer-events: none;
}
.gif_edit.is-processing .gif_edit_crop_box {
  opacity: 0;
  pointer-events: none;
}
.gif_edit.is-processing .gif_edit_crop_handle,
.gif_edit.is-processing .gif_edit_crop_tools {
  opacity: 0;
  pointer-events: none;
}
.gif_edit.is-processing .gif_edit_crop_stage .gif_edit_progress.is-active {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  margin-top: 0;
  width: min(84%, 460px);
  padding: 16px 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)),
    rgba(0, 0, 0, .72);
  border-color: rgba(255, 255, 255, .18);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .5),
    0 0 24px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.gif_edit.is-processing .gif_edit_progress_text {
  max-width: none;
  font-size: 13px;
  color: #fff;
}
.gif_edit.is-processing .gif_edit_progress_copy {
  max-width: none;
  flex: 1 1 170px;
}
.gif_edit.is-processing .gif_edit_progress_bar {
  height: 8px;
}

.gif_edit.is-processing-slow .gif_edit_progress.is-slow {
  gap: 12px;
  border-color: rgba(255, 255, 255, .24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .055)),
    rgba(0, 0, 0, .78);
}

.gif_edit.is-processing-slow .gif_edit_progress_spinner {
  display: none;
}

.gif_edit.is-processing-slow .gif_edit_progress_hint {
  max-height: 36px;
  opacity: 1;
  transform: translateY(0);
}

.gif_edit.is-processing-slow .gif_edit_progress_mascot {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes gifEditSpin {
  to { transform: rotate(360deg); }
}

@keyframes gifEditMascotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes gifEditMascotTail {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(12deg); }
}

@media (max-width: 720px) {
  .gif_edit_transform_transport {
    gap: 8px;
  }

  .gif_edit_transform_scrub {
    flex-basis: 100%;
  }

  .gif_edit.is-processing .gif_edit_crop_stage .gif_edit_progress.is-active {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    width: min(88%, 340px);
    padding: 14px;
  }

  .gif_edit.is-processing .gif_edit_progress_text {
    min-width: 0;
    text-align: center;
  }

  .gif_edit.is-processing .gif_edit_progress_copy {
    align-items: center;
    flex-basis: auto;
  }

  .gif_edit.is-processing .gif_edit_progress_hint {
    text-align: center;
  }

}

.gif_edit .container{
  max-width: 1022px;
}






.gif_edit_main_layers {
  width: 100%;
  height: auto;
  margin-top: 18px;
  border: 1px solid var(--seraya-plashka);
border-radius: 24px;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5);
background: rgba(255, 255, 255, 0.02);
}
.gif_edit_main_layers_content {
  padding: 16px;
}
.gif_edit_main_layers_blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gif_edit_main_layers_block {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.gif_edit_main_layers_block.is-active .gif_edit_main_layers_block_title {
  color: rgba(255, 255, 255, .9);
}
.gif_edit_main_layers_block_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
min-width: 52px;
}
.gif_edit_main_layers_block_item {
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, .045);
  border: 1px dashed rgba(255, 255, 255, 0.24);
border-radius: 12px;
cursor: pointer;
transition: border-color .25s, background .25s, box-shadow .25s, opacity .25s;

}
.gif_edit_main_layers_block_item:hover{
  opacity: .85;
  border-color: rgba(255, 255, 255, .42);
}
.gif_edit_main_layers_block_item_content {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gif_edit_main_layers_block_item_icon {
  margin: 0;
  border: 0.75px solid var(--seraya-plashka);
border-radius: 25165800px;
width: 30px;
height: 30px;
flex: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 11px 0 rgba(255, 255, 255, 0);
background: rgba(255, 255, 255, 0.05);
}
.gif_edit_main_layers_block_item_icon svg {
  width: 18px;
  height: 18px;
}
.gif_edit_main_layers_block_item_icon svg path {
  stroke: rgba(255, 255, 255, .58);
}
.gif_edit_main_layers_block_item_title {
 margin-top: 0;
 font-family: var(--font-family);
font-weight: 600;
font-size: 13px;
line-height: 1.25;
text-align: left;
color: rgba(255, 255, 255, .72);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Layer card filled state toggled by hook via .has-file */
.gif_edit_main_layers_block_item.has-file {
  border-style: solid;
  border-color: rgba(255, 255, 255, .2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
    rgba(0, 0, 0, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.gif_edit_main_layers_block_item.has-file:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, .34);
}
.gif_edit_main_layers_block_item.has-file .gif_edit_main_layers_block_item_icon {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gif_edit_main_layers_block_item.has-file .gif_edit_main_layers_block_item_title {
  color: rgba(255, 255, 255, .86);
}

.gif_edit_main_layers_order {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.gif_edit_main_layers_order_button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  transition: border-color .2s, background .2s, color .2s, opacity .2s;
}

.gif_edit_main_layers_order_button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .09);
  color: #fff;
}

.gif_edit_main_layers_order_button:disabled {
  cursor: not-allowed;
  opacity: .35;
}

/* Layer card active state (toggled by hook via .is-active). */
.gif_edit_main_layers_block.is-active .gif_edit_main_layers_block_item {
  border-color: rgba(255, 255, 255, .52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045)),
    rgba(0, 0, 0, .24);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .045),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Unified focus-visible across custom controls on /gif-edit */
.gif_edit_main_up_button:focus-visible,
.gif_edit_main_up_download:focus-visible,
.gif_edit_main_media_main_settings_size_button:focus-visible,
.gif_edit_main_media_main_settings_fps_button:focus-visible,
.gif_edit_main_colors_action:focus-visible,
.gif_edit_main_colors_preset:focus-visible,
.gif_edit_crop_reset:focus-visible,
.gif_edit_main_layers_order_button:focus-visible,
.gif_edit_main_patcher_button:focus-visible {
  outline: 2px solid var(--obvodka-vybora);
  outline-offset: 2px;
}


.builder .container{
  padding-left: 150px;
  padding-right: 60px;
  max-width: 100%;
}

section.page.builder {
  --builder-shell-align-left: 0px;
  --builder-shell-align-top: 0px;
  --builder-shell-align-width: 100%;
  --builder-shell-align-height: 100%;
  --builder-shell-aligned-opacity: .64;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}

section.page.builder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 52% 26%, rgba(255, 255, 255, 0.045), transparent 68%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.44), rgba(8, 8, 8, 0.1) 43%, rgba(5, 5, 5, 0.46)),
    linear-gradient(180deg, rgba(8, 8, 8, 0.16), rgba(4, 4, 4, 0.44));
}

.builder_initial_loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 24% 38%, rgba(255, 255, 255, 0.1), transparent 32%),
    radial-gradient(circle at 76% 62%, rgba(120, 120, 120, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(12, 12, 14, 0.99), rgba(2, 3, 5, 0.99) 50%, rgba(10, 11, 13, 0.98));
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -25% 100%);
}

.builder_initial_loader::before,
.builder_initial_loader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.builder_initial_loader::before {
  display: none;
}

.builder_initial_loader::after {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .16;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.builder_initial_loader.is-leaving {
  animation: builderInitialLoaderExit .46s ease-in forwards;
}

.builder_initial_loader.is-leaving::before {
  animation: none;
  opacity: .75;
}

.builder_initial_loader.is-leaving .builder_initial_loader_brand,
.builder_initial_loader.is-leaving .builder_initial_loader_particles {
  animation: builderInitialLoaderContentExit .18s ease-out forwards;
}

.builder_initial_loader_particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.builder_initial_loader_particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.76);
  opacity: .42;
  animation: builderInitialParticlePulse 1.8s ease-in-out infinite;
}

.builder_initial_loader_particles span:nth-child(1) { left: 8%; top: 18%; animation-delay: -.2s; }
.builder_initial_loader_particles span:nth-child(2) { left: 15%; top: 72%; animation-delay: -.8s; }
.builder_initial_loader_particles span:nth-child(3) { left: 24%; top: 38%; animation-delay: -1.1s; }
.builder_initial_loader_particles span:nth-child(4) { left: 32%; top: 82%; animation-delay: -.4s; }
.builder_initial_loader_particles span:nth-child(5) { left: 41%; top: 24%; animation-delay: -1.4s; }
.builder_initial_loader_particles span:nth-child(6) { left: 48%; top: 62%; animation-delay: -.7s; }
.builder_initial_loader_particles span:nth-child(7) { left: 55%; top: 15%; animation-delay: -1.2s; }
.builder_initial_loader_particles span:nth-child(8) { left: 61%; top: 78%; animation-delay: -.1s; }
.builder_initial_loader_particles span:nth-child(9) { left: 68%; top: 45%; animation-delay: -.9s; }
.builder_initial_loader_particles span:nth-child(10) { left: 74%; top: 27%; animation-delay: -1.5s; }
.builder_initial_loader_particles span:nth-child(11) { left: 81%; top: 69%; animation-delay: -.5s; }
.builder_initial_loader_particles span:nth-child(12) { left: 88%; top: 33%; animation-delay: -1s; }
.builder_initial_loader_particles span:nth-child(13) { left: 93%; top: 84%; animation-delay: -.3s; }
.builder_initial_loader_particles span:nth-child(14) { left: 6%; top: 48%; animation-delay: -1.6s; }
.builder_initial_loader_particles span:nth-child(15) { left: 36%; top: 52%; animation-delay: -.6s; }
.builder_initial_loader_particles span:nth-child(16) { left: 79%; top: 12%; animation-delay: -1.3s; }

.builder_initial_loader_brand {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  transform: translateY(-8px);
}

.builder_initial_loader_stack {
  position: relative;
  width: 150px;
  height: 176px;
  margin-bottom: 8px;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.56));
}

.builder_initial_loader_stack_shadow {
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 102px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.24), transparent 74%);
  transform: translateX(-50%);
  opacity: .58;
  animation: builderInitialStackShadow 1.7s ease-in-out infinite;
}

.builder_initial_loader_cube {
  position: absolute;
  left: 50%;
  width: 68px;
  height: 76px;
  transform: translateX(-50%);
}

.builder_initial_loader_cube--top {
  top: 2px;
  animation: builderInitialTopCube 1.9s ease-in-out infinite;
}

.builder_initial_loader_cube--drop {
  top: 88px;
  width: 34px;
  height: 38px;
  animation: builderInitialDropCube 1.9s ease-in-out infinite;
}

.builder_initial_loader_cube--spark {
  top: 132px;
  width: 22px;
  height: 25px;
  animation: builderInitialSparkCube 1.9s ease-in-out infinite;
}

.builder_initial_loader_cube_face {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transform: none;
  transform-origin: center;
}

.builder_initial_loader_cube_face--top {
  top: 0;
  left: 10%;
  width: 80%;
  height: 48%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(188, 192, 199, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.builder_initial_loader_cube_face--left {
  top: 24%;
  left: 10%;
  width: 40%;
  height: 58%;
  clip-path: polygon(0% 0%, 100% 45%, 100% 100%, 0% 55%);
  background: linear-gradient(140deg, rgba(154, 160, 170, 0.84), rgba(54, 58, 66, 0.88));
}

.builder_initial_loader_cube_face--right {
  top: 24%;
  right: 10%;
  width: 40%;
  height: 58%;
  clip-path: polygon(0% 45%, 100% 0%, 100% 55%, 0% 100%);
  background: linear-gradient(40deg, rgba(236, 236, 236, 0.9), rgba(88, 93, 104, 0.82));
}

.builder_initial_loader_cube--drop .builder_initial_loader_cube_face,
.builder_initial_loader_cube--spark .builder_initial_loader_cube_face {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 18px rgba(255, 255, 255, 0.16);
}

.builder_initial_loader_cube--drop .builder_initial_loader_cube_face--top,
.builder_initial_loader_cube--spark .builder_initial_loader_cube_face--top {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(215, 215, 215, 0.78));
}

.builder_initial_loader_cube--drop .builder_initial_loader_cube_face--left,
.builder_initial_loader_cube--spark .builder_initial_loader_cube_face--left {
  background: linear-gradient(140deg, rgba(182, 188, 198, 0.86), rgba(64, 68, 76, 0.88));
}

.builder_initial_loader_cube--drop .builder_initial_loader_cube_face--right,
.builder_initial_loader_cube--spark .builder_initial_loader_cube_face--right {
  background: linear-gradient(40deg, rgba(255, 255, 255, 0.92), rgba(110, 116, 128, 0.84));
}

.builder_initial_loader_cube--top .builder_initial_loader_cube_face--top {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 0 24px rgba(255, 255, 255, 0.08);
}

.builder_initial_loader_cube--top .builder_initial_loader_cube_face--left,
.builder_initial_loader_cube--top .builder_initial_loader_cube_face--right {
  animation: builderInitialFaceGlow 1.9s ease-in-out infinite;
}

.builder_initial_loader_cube--top .builder_initial_loader_cube_face--right {
  animation-delay: .08s;
}

.builder_initial_loader_mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.035)),
    rgba(3, 4, 6, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 34px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
}

.builder_initial_loader_copy {
  display: grid;
  gap: 5px;
}

.builder_initial_loader_copy span {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
}

.builder_initial_loader_copy strong {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
}

.builder_initial_loader_bar {
  width: min(280px, 48vw);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.builder_initial_loader_bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #29d8ff, #fff, #29d8ff, transparent);
  animation: builderInitialLoaderBar 1.05s ease-in-out infinite;
}

@keyframes builderInitialLoaderExit {
  0% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -25% 100%);
  }
  100% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -25% 100%);
  }
}

@keyframes builderInitialLoaderContentExit {
  0% {
    opacity: 1;
    transform: translateY(-8px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(.96);
    filter: blur(6px);
  }
}

@keyframes builderInitialLoaderBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}

@keyframes builderInitialTopCube {
  0%, 100% {
    opacity: .98;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(5px) scale(1.035);
  }
}

@keyframes builderInitialDropCube {
  0%, 12% {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(.72);
  }
  26%, 74% {
    opacity: .95;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  86%, 100% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(.7);
  }
}

@keyframes builderInitialSparkCube {
  0%, 18% {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(.7);
  }
  34%, 58% {
    opacity: .85;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  70%, 100% {
    opacity: 0;
    transform: translateX(-50%) translateY(15px) scale(.62);
  }
}

@keyframes builderInitialFaceGlow {
  0%, 100% {
    filter: brightness(.92);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes builderInitialStackShadow {
  0%, 100% {
    opacity: .42;
    transform: translateX(-50%) scale(.86);
  }
  50% {
    opacity: .72;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes builderInitialParticlePulse {
  0%, 100% {
    opacity: .2;
    transform: scale(.65);
  }
  50% {
    opacity: .88;
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder_initial_loader::before,
  .builder_initial_loader_cube,
  .builder_initial_loader_cube_face,
  .builder_initial_loader_stack_shadow,
  .builder_initial_loader_particles span,
  .builder_initial_loader_bar span {
    animation: none;
  }

  .builder_initial_loader.is-leaving {
    animation-duration: .01ms;
  }
}

.mockup_initial_loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 26% 36%, rgba(255, 255, 255, 0.1), transparent 32%),
    radial-gradient(circle at 78% 64%, rgba(120, 120, 120, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(12, 12, 14, 0.99), rgba(2, 3, 5, 0.99) 50%, rgba(10, 11, 13, 0.98));
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -25% 100%);
}

.mockup_initial_loader::before,
.mockup_initial_loader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mockup_initial_loader::before {
  display: none;
}

.mockup_initial_loader::after {
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .16;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.mockup_initial_loader.is-leaving {
  animation: mockupInitialLoaderExit .46s ease-in forwards;
}

section.mockup.mockup-defaults-pending {
  visibility: hidden;
}

.mockup_initial_loader.is-leaving .mockup_initial_loader_brand,
.mockup_initial_loader.is-leaving .mockup_initial_loader_particles {
  animation: mockupInitialLoaderContentExit .18s ease-out forwards;
}

.mockup_initial_loader_particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.mockup_initial_loader_particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.76);
  opacity: .42;
  animation: builderInitialParticlePulse 1.8s ease-in-out infinite;
}

.mockup_initial_loader_particles span:nth-child(1) { left: 8%; top: 18%; animation-delay: -.2s; }
.mockup_initial_loader_particles span:nth-child(2) { left: 15%; top: 72%; animation-delay: -.8s; }
.mockup_initial_loader_particles span:nth-child(3) { left: 24%; top: 38%; animation-delay: -1.1s; }
.mockup_initial_loader_particles span:nth-child(4) { left: 32%; top: 82%; animation-delay: -.4s; }
.mockup_initial_loader_particles span:nth-child(5) { left: 41%; top: 24%; animation-delay: -1.4s; }
.mockup_initial_loader_particles span:nth-child(6) { left: 48%; top: 62%; animation-delay: -.7s; }
.mockup_initial_loader_particles span:nth-child(7) { left: 55%; top: 15%; animation-delay: -1.2s; }
.mockup_initial_loader_particles span:nth-child(8) { left: 61%; top: 78%; animation-delay: -.1s; }
.mockup_initial_loader_particles span:nth-child(9) { left: 68%; top: 45%; animation-delay: -.9s; }
.mockup_initial_loader_particles span:nth-child(10) { left: 74%; top: 27%; animation-delay: -1.5s; }
.mockup_initial_loader_particles span:nth-child(11) { left: 81%; top: 69%; animation-delay: -.5s; }
.mockup_initial_loader_particles span:nth-child(12) { left: 88%; top: 33%; animation-delay: -1s; }
.mockup_initial_loader_particles span:nth-child(13) { left: 93%; top: 84%; animation-delay: -.3s; }
.mockup_initial_loader_particles span:nth-child(14) { left: 6%; top: 48%; animation-delay: -1.6s; }

.mockup_initial_loader_brand {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
  transform: translateY(-8px);
}

.mockup_initial_loader_stack {
  position: relative;
  width: 150px;
  height: 176px;
  margin-bottom: 8px;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.56));
}

.mockup_initial_loader_stack_shadow {
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 102px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.24), transparent 74%);
  transform: translateX(-50%);
  opacity: .58;
  animation: builderInitialStackShadow 1.7s ease-in-out infinite;
}

.mockup_initial_loader_cube {
  position: absolute;
  left: 50%;
  width: 68px;
  height: 76px;
  transform: translateX(-50%);
}

.mockup_initial_loader_cube--top {
  top: 2px;
  animation: builderInitialTopCube 1.9s ease-in-out infinite;
}

.mockup_initial_loader_cube--drop {
  top: 88px;
  width: 34px;
  height: 38px;
  animation: builderInitialDropCube 1.9s ease-in-out infinite;
}

.mockup_initial_loader_cube--spark {
  top: 132px;
  width: 22px;
  height: 25px;
  animation: builderInitialSparkCube 1.9s ease-in-out infinite;
}

.mockup_initial_loader_cube_face {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transform: none;
  transform-origin: center;
}

.mockup_initial_loader_cube_face--top {
  top: 0;
  left: 10%;
  width: 80%;
  height: 48%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(188, 192, 199, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.mockup_initial_loader_cube_face--left {
  top: 24%;
  left: 10%;
  width: 40%;
  height: 58%;
  clip-path: polygon(0% 0%, 100% 45%, 100% 100%, 0% 55%);
  background: linear-gradient(140deg, rgba(154, 160, 170, 0.84), rgba(54, 58, 66, 0.88));
}

.mockup_initial_loader_cube_face--right {
  top: 24%;
  right: 10%;
  width: 40%;
  height: 58%;
  clip-path: polygon(0% 45%, 100% 0%, 100% 55%, 0% 100%);
  background: linear-gradient(40deg, rgba(236, 236, 236, 0.9), rgba(88, 93, 104, 0.82));
}

.mockup_initial_loader_cube--drop .mockup_initial_loader_cube_face,
.mockup_initial_loader_cube--spark .mockup_initial_loader_cube_face {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 18px rgba(255, 255, 255, 0.16);
}

.mockup_initial_loader_cube--drop .mockup_initial_loader_cube_face--top,
.mockup_initial_loader_cube--spark .mockup_initial_loader_cube_face--top {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(215, 215, 215, 0.78));
}

.mockup_initial_loader_cube--drop .mockup_initial_loader_cube_face--left,
.mockup_initial_loader_cube--spark .mockup_initial_loader_cube_face--left {
  background: linear-gradient(140deg, rgba(182, 188, 198, 0.86), rgba(64, 68, 76, 0.88));
}

.mockup_initial_loader_cube--drop .mockup_initial_loader_cube_face--right,
.mockup_initial_loader_cube--spark .mockup_initial_loader_cube_face--right {
  background: linear-gradient(40deg, rgba(255, 255, 255, 0.92), rgba(110, 116, 128, 0.84));
}

.mockup_initial_loader_cube--top .mockup_initial_loader_cube_face--top {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 0 24px rgba(255, 255, 255, 0.08);
}

.mockup_initial_loader_cube--top .mockup_initial_loader_cube_face--left,
.mockup_initial_loader_cube--top .mockup_initial_loader_cube_face--right {
  animation: builderInitialFaceGlow 1.9s ease-in-out infinite;
}

.mockup_initial_loader_cube--top .mockup_initial_loader_cube_face--right {
  animation-delay: .08s;
}

.mockup_initial_loader_mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.035)),
    rgba(3, 4, 6, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 34px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
}

.mockup_initial_loader_copy {
  display: grid;
  gap: 5px;
}

.mockup_initial_loader_copy span {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
}

.mockup_initial_loader_copy strong {
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
}

@media (prefers-reduced-motion: reduce) {
  .mockup_initial_loader_cube,
  .mockup_initial_loader_cube_face,
  .mockup_initial_loader_stack_shadow,
  .mockup_initial_loader_particles span {
    animation: none;
  }

  .mockup_initial_loader.is-leaving {
    animation-duration: .01ms;
  }
}

@keyframes mockupInitialLoaderExit {
  0% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -25% 100%);
  }
  100% {
    opacity: 0;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, -25% 100%);
  }
}

@keyframes mockupInitialLoaderContentExit {
  0% {
    opacity: 1;
    transform: translateY(-8px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-18px) scale(.96);
    filter: blur(6px);
  }
}

.builder_shell_background_media {
  position: absolute;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  transition: none;
}

.builder_shell_background_media--ambient {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .7;
  filter: blur(18px) saturate(.98) brightness(.88) contrast(1.01);
  transform: scale(1.13) translate3d(0, 0, 0);
}

.builder_shell_background_media--aligned {
  z-index: 1;
  left: var(--builder-shell-align-left);
  top: var(--builder-shell-align-top);
  width: var(--builder-shell-align-width);
  height: var(--builder-shell-align-height);
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: saturate(.96) brightness(.92) contrast(1.02);
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  -webkit-mask-image: radial-gradient(ellipse 70% 66% at center, #000 0%, #000 26%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0.28) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 66% at center, #000 0%, #000 26%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0.28) 70%, transparent 100%);
}

section.page.builder[data-shell-aligned="true"] .builder_shell_background_media--aligned {
  opacity: .64;
}

.builder_seamless_loop_video_group {
  overflow: hidden;
}

.builder_seamless_loop_video--grouped {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: inherit;
  object-position: inherit;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: opacity;
}

section.page.builder > .container {
  position: relative;
  z-index: 3;
}

.builder_main {
  width: 100%;
  height: auto;
  
}
.builder_sections {
  display: grid;
  grid-template-columns: 471px calc(100% - 867px) 356px;
  grid-gap: 20px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
}

section.page.builder:not(.mockup) .builder_category {
  order: 1;
}

section.page.builder:not(.mockup) .builder_illustration {
  order: 2;
}

section.page.builder:not(.mockup) .builder_layers {
  order: 3;
}

section.page.builder:not(.mockup) .builder_category_navs_content {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
}

section.page.builder:not(.mockup) .builder_category_nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 64px;
  margin: 0 auto;
  position: relative;
  border-radius: 16px;
  padding: 8px 4px;
}
section.page.builder:not(.mockup) .builder_category_nav.is-dragging {
  opacity: .58;
  transform: scale(.96);
}
section.page.builder:not(.mockup) .builder_settings_order_panel {
  margin: 10px 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
}
section.page.builder:not(.mockup) .builder_settings_order_panel[hidden] {
  display: none;
}
section.page.builder:not(.mockup) .builder_settings_order_toggle {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
section.page.builder:not(.mockup) .builder_settings_order_toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .18s ease;
}
section.page.builder:not(.mockup) .builder_settings_order_panel.is-open .builder_settings_order_toggle svg {
  transform: rotate(180deg);
}
section.page.builder:not(.mockup) .builder_settings_order_list {
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
section.page.builder:not(.mockup) .builder_settings_order_list[hidden] {
  display: none;
}
section.page.builder:not(.mockup) .builder_settings_order_row {
  min-height: 34px;
  padding: 7px 8px 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.76);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
section.page.builder:not(.mockup) .builder_settings_order_row.is-dragging {
  opacity: .52;
  transform: scale(.985);
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.12);
}
section.page.builder:not(.mockup) .builder_settings_order_actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
section.page.builder:not(.mockup) .builder_settings_order_actions button {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.74);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, opacity .18s;
}
section.page.builder:not(.mockup) .builder_settings_order_actions button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
section.page.builder:not(.mockup) .builder_settings_order_actions button:disabled {
  opacity: .35;
  cursor: default;
}
section.page.builder:not(.mockup) .builder_settings_order_actions svg {
  width: 15px;
  height: 15px;
}
section.page.builder:not(.mockup) .builder_category_text_block_title,
section.page.builder:not(.mockup) .builder_category_text_animate_title,
section.page.builder:not(.mockup) .builder_category_border_border_title,
section.page.builder:not(.mockup) .builder_category_particles_border_title {
  display: flex;
  align-items: center;
  gap: 8px;
}
section.page.builder:not(.mockup) .builder_category_nav_label {
  display: block;
  max-width: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 7.5px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color .25s ease;
  line-height: 1.05;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  white-space: normal;
}
section.page.builder:not(.mockup) .builder_category_nav:hover .builder_category_nav_label {
  color: rgba(255, 255, 255, 0.85);
}
section.page.builder:not(.mockup) .builder_category_nav_active .builder_category_nav_label,
section.page.builder:not(.mockup) .builder_category_nav_active:hover .builder_category_nav_label {
  color: rgba(0, 0, 0, 0.7);
}
.builder_category {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(5, 5, 5, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.026);
  border-radius: 24px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.018);
  position: relative;
  overflow: hidden;
}

section.page.builder:not(.mockup) .builder_category,
section.page.builder:not(.mockup) .builder_illustration,
section.page.builder:not(.mockup) .builder_layers {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.004)),
    rgba(5, 5, 5, 0.64);
  border-color: rgba(255, 255, 255, 0.022);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.012);
}

section.page.builder:not(.mockup) .builder_illustration {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.01);
}

section.page.builder.builder--animated-shell .builder_category,
section.page.builder.builder--animated-shell .builder_illustration,
section.page.builder.builder--animated-shell .builder_layers {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.004)),
    rgba(5, 5, 5, 0.82);
}

section.page.builder.builder--animated-shell .builder_category_content,
section.page.builder.builder--animated-shell .builder_illustration_content,
section.page.builder.builder--animated-shell .builder_layers_content {
  background: transparent;
}

section.page.builder.builder--animated-shell .builder_illustration_up,
section.page.builder.builder--animated-shell .builder_layers_block,
section.page.builder.builder--animated-shell .builder_layers_block_add,
section.page.builder.builder--animated-shell .builder_layers_add_menu,
section.page.builder.builder--animated-shell .builder_category_navs,
section.page.builder.builder--animated-shell .builder_category_setting_input,
section.page.builder.builder--animated-shell .builder_category_setting_bg_selected,
section.page.builder.builder--animated-shell .builder_category_setting_bg_filter,
section.page.builder.builder--animated-shell .builder_category_setting_category_select_selected {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.035);
}

.builder_category_content {
  position: relative;
  z-index: 1;
  padding: 22px;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    radial-gradient(120% 70% at 100% 100%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
}
.builder_category_up {
  display: flex;
  align-items: center;
}
.builder_category_title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
color: var(--obvodka-vybora);
}
.builder_category_title svg{
  vertical-align: middle;
}
.builder_category_up_items {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 7.33px;
}
section.page.builder:not(.mockup) .builder_category_up_items {
  display: none;
}
.builder_category_up_item {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  outline: none;
}
.builder_category_up_item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.builder_category_up_item svg{
  vertical-align: middle;
}
.builder_category_navs {
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.15);
}
.builder_category_navs_content {
  padding: 6px;
  display: flex;
  align-items: center;
}
.builder_category_nav {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  outline: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .2s ease, box-shadow .3s ease;
  background: transparent;
  margin-left: auto;
  position: relative;
}
.builder_category_nav:first-child {
  margin-left: 0;
}
.builder_category_nav:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.builder_category_nav_disabled,
.builder_category_nav_disabled:hover,
.builder_category_nav:disabled,
.builder_category_nav:disabled:hover {
  cursor: not-allowed;
  opacity: 0.36;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.builder_category_nav_active,
.builder_category_nav_active:hover {
  background: var(--obvodka-vybora);
  border-color: transparent;
  box-shadow:
    0 6px 20px rgba(255, 255, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transform: none;
}
.builder_category_nav_active svg path {
  fill: #000;
}
.builder_category_nav svg {
  vertical-align: middle;
  transition: transform .2s ease;
}
.builder_category_nav:hover svg {
  transform: scale(1.08);
}
.builder_category_nav_active:hover svg {
  transform: none;
}
.builder_category_setting_bg {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.builder_subtitle {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: var(--obvodka-vybora);
}
.builder_category_setting_input {
  margin-top: 20px;
  width: 100%;
  outline: none;
  border-radius: 16px;
  padding: 14px 16px 14px 44px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  background:
    url(../img/builder_search.svg) no-repeat 16px center,
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color .2s ease, background-color .2s ease;
}
.builder_category_setting_input:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background-color: rgba(255, 255, 255, 0.07);
}
.builder_category_setting_input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.builder_background_search {
  position: relative;
  width: 100%;
  margin-top: 20px;
}
.builder_background_search .builder_category_setting_input {
  margin-top: 0;
  padding-right: 46px;
}
.builder_background_search .builder_category_setting_input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.builder_background_search_clear {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font: 500 22px/1 var(--font-family);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.builder_background_search_clear:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.builder_background_search_clear[hidden] {
  display: none;
}
.builder_category_setting_bg_selected {
  width: 100%;
  height: auto;
  margin-top: 16px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
padding: 16px;
background: var(--seraya-plashka);
border-radius: 16px;

}
.builder_category_setting_bg_filters {
  width: 100%;
  height: auto;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.builder_category_setting_bg_filter {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
color: var(--obvodka-vybora);
padding: 12px 16px;
white-space: nowrap;
background: rgba(255, 255, 255, 0);
border-radius: 16px;
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
background: var(--seraya-plashka);
}
.builder_category_setting_bg_filter[hidden]{
  display: none !important;
}
.builder_category_setting_bg_filter:hover{
  opacity: .5;
}
.builder_category_setting_bg_filter:disabled,
.builder_category_setting_bg_filter.is-disabled{
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.builder_category_setting_bg_filter.is-active {
  background: #fff;
  color: #050505;
}
.builder_category_setting_bg_filter svg{
  vertical-align: middle;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_selected {
  margin-top: 12px;
  padding: 12px 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_selected span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}
section.page.builder:not(.mockup) .builder_category_setting_bg_filters {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 116px;
  gap: 8px;
  align-items: stretch;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_filters > .builder_category_setting_category_select,
section.page.builder:not(.mockup) .builder_category_setting_bg_filter {
  min-width: 0;
  min-height: 42px;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_filter {
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_filter:hover:not(:disabled):not(.is-disabled) {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_filter.is-active {
  border-color: rgba(255, 255, 255, 0.8);
  background: #ffffff;
  color: #050505;
}
section.page.builder:not(.mockup) .builder_category_setting_bg_filter.is-disabled,
section.page.builder:not(.mockup) .builder_category_setting_bg_filter:disabled {
  opacity: .42;
}
section.page.builder:not(.mockup) .builder_category_setting_category_select_selected {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
}
section.page.builder:not(.mockup) .builder_category_setting_category_select_selected svg {
  width: 13px;
  height: 13px;
  opacity: .7;
}
@media (max-width: 640px) {
  section.page.builder:not(.mockup) .builder_category_setting_bg_selected {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  section.page.builder:not(.mockup) .builder_category_setting_bg_selected span {
    width: 100%;
  }
  section.page.builder:not(.mockup) .builder_category_setting_bg_filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  section.page.builder:not(.mockup) .builder_category_setting_bg_filters > .builder_category_setting_category_select {
    grid-column: 1 / -1;
  }
}
.builder_category_setting_bg_backgrounds {
  width: 100%;
  height: auto;
  margin-top: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-height: 635px;
  padding-right: 16px;
}
.builder_category_setting_bg_background {
  position: relative;
  cursor: pointer;
  transition: all .5s;
  border-radius: 16px;
  padding: 4px;
  border: 1px solid transparent;
  min-height: 112px;
  min-width: 0;
  overflow: hidden;
}
.builder_category_setting_bg_background:hover{
  opacity: .5;
}
.builder_category_setting_bg_background_image {
  width: 100%;
  height: 92px;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(255,255,255,.035);
}
.builder_category_setting_bg_background_image.is-loading {
  animation: builderBackgroundPreviewPulse 1.6s ease-in-out infinite;
}
.builder_category_setting_bg_background_image.is-failed {
  opacity: .42;
  filter: grayscale(.35);
}
.builder_category_setting_bg_background:has(.builder_category_setting_bg_background_image.is-failed)::after {
  content: "No preview";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 38px;
  z-index: 2;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.52);
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
@keyframes builderBackgroundPreviewPulse {
  0%, 100% { opacity: .72; }
  50% { opacity: .44; }
}
.builder_category_setting_bg_background_title {
  margin-top: 8px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  color: var(--obvodka-vybora);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.builder_category_setting_bg_background_meta {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}
.builder_category_setting_bg_background_type {
  position: absolute;
  left: 9px;
  top: 9px;
  z-index: 2;
  width: 22px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.56);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-family);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.builder_category_setting_bg_background_type svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.builder_category_setting_bg_background_type.is-animated svg {
  width: 14px;
  height: 14px;
  stroke: none;
}
.builder_background_catalog_summary,
.builder_background_catalog_state,
.builder_background_catalog_append_error {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}
.builder_background_catalog_summary {
  padding: 9px 12px;
}
.builder_background_catalog_summary strong {
  color: rgba(255, 255, 255, 0.92);
}
.builder_background_catalog_summary span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 214, 107, 0.82);
}
.builder_background_catalog_state,
.builder_background_catalog_append_error {
  min-height: 112px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.builder_background_catalog_append_error {
  min-height: 0;
  padding: 12px;
}
.builder_background_catalog_state_title {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 800;
}
.builder_background_catalog_state_query {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.52);
}
.builder_background_catalog_state_action {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.builder_background_catalog_state_action:hover {
  background: rgba(255, 255, 255, 0.16);
}
.builder_background_favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.builder_background_favorite svg {
  width: 13px;
  height: 13px;
}
.builder_background_favorite:hover,
.builder_background_favorite.is-active {
  border-color: rgba(255, 214, 107, 0.42);
  background: rgba(255, 214, 107, 0.18);
  color: #ffd66b;
}
.builder_background_favorite.is-active svg {
  fill: currentColor;
}
.builder_category_setting_bg_backgrounds.is-loading {
  overflow: hidden;
}
.builder_category_setting_bg_background--skeleton {
  cursor: default;
  pointer-events: none;
}
.builder_category_setting_bg_background--skeleton:hover {
  opacity: 1;
}
.builder_category_setting_bg_background--skeleton .builder_category_setting_bg_background_image,
.builder_category_setting_bg_background--skeleton .builder_category_setting_bg_background_title span {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.055));
  background-size: 220% 100%;
  animation: builderSkeletonShimmer 1.35s ease-in-out infinite;
}
.builder_category_setting_bg_background--skeleton .builder_category_setting_bg_background_image {
  border: 1px solid rgba(255, 255, 255, 0.055);
}
.builder_category_setting_bg_background--skeleton .builder_category_setting_bg_background_title {
  gap: 6px;
}
.builder_category_setting_bg_background--skeleton .builder_category_setting_bg_background_title span {
  width: 82%;
  height: 12px;
  border-radius: 999px;
}
.builder_category_setting_bg_background--skeleton .builder_category_setting_bg_background_title span:nth-child(2) {
  width: 54%;
  opacity: .72;
}
.builder_category_setting_bg_background_sentinel{
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

@keyframes builderSkeletonShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.builder_illustration {
  width: 100%;
  height: auto;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(5, 5, 5, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.024);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.016);
}
.builder_illustration_content {
  padding: 20px;
  min-width: 0;
}
.builder_section_title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
color: var(--obvodka-vybora);
}
.builder_section_title svg{
  vertical-align: middle;
}
.builder_illustration_up {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 28px;
  background: var(--seraya-plashka);
}
.builder_illustration_up_content {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  min-width: 0;
}
/* The showcase-type caption was dropped here: tabs keep the left column next to the
   download button, and the GIF mode sits on the row below them. */
@media (min-width: 1751px) {
  .builder_illustration_up_content:not(:has(> .builder_illustration_up_title)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Only here do five tabs share a column with the download button, and label
     length swings a lot per locale ("Витрина" vs "Uyarlanabilir"), so the type
     scales with the viewport instead of being patched per language. */
  .builder_illustration_up_button,
  .builder_avatar_mode_button {
    font-size: clamp(10px, .58vw, 12px);
    padding-inline: clamp(6px, .5vw, 10px);
  }
}
.builder_illustration_up_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
white-space: nowrap;
min-width: max-content;
}
.builder_illustration_up_navs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--color);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 999px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.builder_illustration_up_button,
.builder_avatar_mode_button {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .62);
  min-width: 0;
  padding: 12px 10px;
  outline: none;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .3s ease, transform .2s ease;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder_illustration_up_button:hover,
.builder_avatar_mode_button:hover {
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, 0.06);
}
.builder_illustration_up_button:focus-visible,
.builder_avatar_mode_button:focus-visible {
  outline: 2px solid var(--obvodka-vybora);
  outline-offset: -2px;
}
.builder_illustration_up_button_active {
  color: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  background: var(--obvodka-vybora);
}
.builder_illustration_up_button_active:hover {
  color: #000;
  background: var(--obvodka-vybora);
  opacity: 1;
  transform: none;
}
.builder_illustration_up_download {
  margin-left: 0;
  outline: none;
  border: none;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 15px;
  color: #000;
padding: 15px 18px;
white-space: nowrap;
box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
border-radius: 20px;
cursor: pointer;
transition: all .5s;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
gap: 6px 12px;
max-width: 100%;
min-width: 0;
justify-self: end;
  grid-column: -2 / -1;
  grid-row: 1;
  flex-shrink: 0;
}
.builder_gif_mode {
  position: relative;
  min-width: 0;
  z-index: 41;
}
/* Lives on the header line next to "Поделиться", so it costs the export block no row. */
.builder_illustration_header .builder_gif_mode {
  margin-left: auto;
}
@media (max-width: 1200px) {
  .builder_illustration_header .builder_gif_mode {
    order: 3;
    margin-left: 0;
  }
}
.builder_gif_mode_trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.builder_gif_mode_trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder_gif_mode_trigger svg {
  flex: 0 0 auto;
  width: 10px;
  height: 7px;
  transition: transform .2s ease;
}
.builder_gif_mode.is-open .builder_gif_mode_trigger svg {
  transform: rotate(180deg);
}
.builder_gif_mode_trigger:hover,
.builder_gif_mode.is-open .builder_gif_mode_trigger {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.builder_gif_mode_trigger:focus-visible {
  outline: 2px solid var(--obvodka-vybora);
  outline-offset: 2px;
}
.builder_gif_mode_menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 42;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: min(320px, 78vw);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(26, 27, 29, .98) 0%, rgba(8, 9, 10, .98) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.builder_gif_mode_item {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}
.builder_gif_mode_item strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, .9);
}
.builder_gif_mode_recommended {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .62);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}
.builder_gif_mode_item small {
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .55);
}
.builder_gif_mode_item:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06);
}
.builder_gif_mode_item.is-active {
  background: rgba(255, 255, 255, .1);
}
.builder_gif_mode_item:focus-visible {
  outline: 2px solid var(--obvodka-vybora);
  outline-offset: -2px;
}
.builder_gif_mode_item:disabled {
  cursor: default;
}
.builder_gif_mode_item:disabled strong {
  color: rgba(255, 255, 255, .45);
}
.builder_illustration_up_download.is-busy {
  position: relative;
  opacity: .72;
}
.builder_illustration_up_download.is-busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.72);
  border-radius: 50%;
  animation: builderDownloadSpin .8s linear infinite;
}
.builder_illustration_up_download svg{
  height: 50px;
  vertical-align: middle;
  display: none;
}
@keyframes builderDownloadSpin {
  to { transform: rotate(360deg); }
}
section.page.builder:not(.mockup) .builder_illustration {
  position: relative;
  top: auto;
  align-self: flex-start;
}
.builder_illustration_up_download_badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.72);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.builder_illustration_up_download:hover{
  transform: scale(1.03);
}
.builder_export_progress {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 10px;
}
.builder_export_progress_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
}
.builder_export_progress_row strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.builder_export_progress_track {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
.builder_export_progress_track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #29a7ff;
  transition: width .24s ease;
}
.builder_export_progress_track.is-indeterminate span {
  width: 36%;
  animation: builderExportProgress 1.2s ease-in-out infinite;
}
@keyframes builderExportProgress {
  from { transform: translateX(-110%); }
  to { transform: translateX(310%); }
}
/* ==========================================================================
   Builder dialogs: token top-up + authorization
   One shared premium dark shell. Pure black glass, single white accent.
   ========================================================================== */
@keyframes builderDialogOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes builderDialogPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.builder_token_modal,
.builder_auth_dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .05), transparent 62%),
    rgba(0, 0, 0, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: builderDialogOverlayIn .2s ease both;
}
.builder_token_modal_shell,
.builder_auth_dialog_shell {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
}
.builder_token_modal_panel,
.builder_auth_dialog_panel {
  position: relative;
  isolation: isolate;
  width: min(480px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 26px;
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(255, 255, 255, .1), transparent 60%),
    linear-gradient(180deg, rgba(17, 17, 18, .96), rgba(0, 0, 0, .97));
  box-shadow:
    0 40px 110px rgba(0, 0, 0, .72),
    0 2px 10px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(255, 255, 255, .025);
  padding: 30px 28px 26px;
  color: #fff;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: builderDialogPanelIn .28s cubic-bezier(.22, 1, .36, 1) both;
}
.builder_token_modal_panel::before,
.builder_auth_dialog_panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  pointer-events: none;
}
.builder_token_modal_panel::after,
.builder_auth_dialog_panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -140px;
  z-index: -1;
  width: 320px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .13), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .builder_token_modal,
  .builder_auth_dialog,
  .builder_token_modal_panel,
  .builder_auth_dialog_panel {
    animation: none;
  }
}

/* --- shared header row --- */
.builder_token_modal_top,
.builder_auth_dialog_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
}
/* The token dialog has no badge, so its header row is a single line of text. */
.builder_token_modal_top {
  min-height: 0;
}
.builder_token_modal_kicker,
.builder_auth_dialog_kicker {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}
.builder_auth_dialog_glyph {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 6px 20px rgba(0, 0, 0, .4);
}
.builder_auth_dialog_glyph svg {
  display: block;
}

/* --- shared body copy --- */
.builder_token_modal_title,
.builder_auth_dialog_title {
  margin: 22px 0 0;
  font-size: clamp(27px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: #fff;
}
.builder_token_modal_text,
.builder_auth_dialog_text {
  margin: 12px 0 0;
  max-width: 42ch;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .58);
}
.builder_token_modal_hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .38);
}

/* --- token meter --- */
.builder_token_modal_meter {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  padding: 14px 15px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* The deficit is the selling number, so it leads the meter block. */
.builder_token_modal_meter_lead {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 14px;
}
.builder_token_modal_meter_value {
  flex: 0 0 auto;
  font-size: clamp(38px, 5.5vw, 48px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.035em;
  /* Equal-width digits so the unit never twitches as the count changes. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: #fff;
}
.builder_token_modal_meter_unit {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .44);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.builder_token_modal_meter_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, .38);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.builder_token_modal_meter_row strong {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.builder_token_modal_meter_track {
  position: relative;
  overflow: hidden;
  height: 6px;
  margin-top: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.builder_token_modal_meter_track span {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 6px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .42), #fff);
  box-shadow: 0 0 16px rgba(255, 255, 255, .3);
  transition: width .3s cubic-bezier(.22, 1, .36, 1);
}

/* --- shared actions --- */
.builder_token_modal_actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 22px;
}
.builder_auth_dialog_actions {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}
.builder_token_modal_primary,
.builder_token_modal_secondary,
.builder_auth_dialog_primary,
.builder_auth_dialog_secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 15px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.005em;
  cursor: pointer;
  transition:
    transform .18s cubic-bezier(.22, 1, .36, 1),
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}
.builder_token_modal_primary,
.builder_auth_dialog_primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 9px;
  min-height: 54px;
  border: 0;
  background: #fff;
  color: #050505;
  font-size: 15px;
  box-shadow:
    0 12px 34px rgba(255, 255, 255, .18),
    0 2px 8px rgba(0, 0, 0, .34),
    inset 0 -1px 0 rgba(0, 0, 0, .14);
}
/* Slow light sweep across the CTA so it reads as the live action in the panel. */
.builder_token_modal_primary::after,
.builder_auth_dialog_primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 18%,
    rgba(255, 255, 255, .85) 42%,
    rgba(255, 255, 255, .85) 58%,
    transparent 82%
  );
  mix-blend-mode: overlay;
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.builder_token_modal_primary:hover::after,
.builder_auth_dialog_primary:hover::after,
.builder_token_modal_primary:focus-visible::after,
.builder_auth_dialog_primary:focus-visible::after {
  transform: translateX(120%);
}
.builder_token_modal_primary_arrow {
  flex: 0 0 auto;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.builder_token_modal_primary:hover .builder_token_modal_primary_arrow,
.builder_token_modal_primary:focus-visible .builder_token_modal_primary_arrow {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .builder_token_modal_primary::after,
  .builder_auth_dialog_primary::after,
  .builder_token_modal_primary_arrow {
    transition: none;
  }
}
.builder_token_modal_secondary,
.builder_auth_dialog_secondary {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .42);
}
.builder_token_modal_secondary {
  min-height: 54px;
  min-width: 132px;
}
.builder_auth_dialog_secondary {
  min-height: 44px;
  font-size: 13px;
}
.builder_token_modal_primary:hover,
.builder_auth_dialog_primary:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 18px 46px rgba(255, 255, 255, .26),
    0 3px 10px rgba(0, 0, 0, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .14);
}
.builder_token_modal_secondary:hover,
.builder_auth_dialog_secondary:hover {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
}
.builder_token_modal_primary:active,
.builder_token_modal_secondary:active,
.builder_auth_dialog_primary:active,
.builder_auth_dialog_secondary:active {
  transform: translateY(0) scale(.985);
}

/* --- visible focus --- */
.builder_token_modal_primary:focus-visible,
.builder_token_modal_secondary:focus-visible,
.builder_auth_dialog_primary:focus-visible,
.builder_auth_dialog_secondary:focus-visible,
.builder_token_modal_panel:focus-visible,
.builder_auth_dialog_panel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.builder_token_modal_secondary:focus-visible,
.builder_auth_dialog_secondary:focus-visible {
  color: #fff;
}
.builder_oversize_modal {
  position: fixed;
  inset: 0;
  z-index: 82;
  overflow-y: auto;
  padding: 24px;
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(18px);
}
.builder_oversize_modal_shell {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
}
.builder_oversize_modal_panel {
  position: relative;
  width: min(540px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, .13), transparent 32%),
    radial-gradient(circle at 86% 96%, rgba(52, 211, 153, .12), transparent 34%),
    linear-gradient(180deg, rgba(31, 33, 36, .88), rgba(5, 6, 7, .95));
  box-shadow:
    0 30px 92px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(255, 255, 255, .035);
  padding: 28px;
  color: #fff;
}
.builder_oversize_modal_panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  opacity: .72;
}
.builder_oversize_modal_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.builder_oversize_modal_kicker {
  margin: 0;
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.builder_oversize_modal_badge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  padding: 8px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.builder_oversize_modal_badge strong {
  font-size: 18px;
  line-height: 1;
}
.builder_oversize_modal_badge span {
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}
.builder_oversize_modal_title {
  margin-top: 20px;
  max-width: 430px;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: .98;
}
.builder_oversize_modal_text {
  margin-top: 14px;
  max-width: 450px;
  color: rgba(255, 255, 255, .64);
  font-size: 15.5px;
  font-weight: 620;
  line-height: 1.55;
}
.builder_oversize_modal_note {
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  padding: 14px 15px;
  color: rgba(255, 255, 255, .52);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.builder_oversize_modal_error {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: rgba(255, 80, 80, .08);
  padding: 12px 14px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.builder_oversize_modal_actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 20px;
}
.builder_oversize_modal_primary,
.builder_oversize_modal_secondary,
.builder_oversize_modal_plain {
  min-height: 50px;
  border-radius: 17px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
}
.builder_oversize_modal_primary {
  border: 0;
  background: #fff;
  color: #050505;
  box-shadow: 0 16px 34px rgba(255, 255, 255, .11);
}
.builder_oversize_modal_primary:disabled {
  cursor: wait;
  opacity: .7;
}
.builder_oversize_modal_secondary {
  min-width: 152px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .74);
}
.builder_oversize_modal_plain {
  grid-column: 1 / -1;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .42);
}
.builder_oversize_modal_primary:hover,
.builder_oversize_modal_secondary:hover,
.builder_oversize_modal_plain:hover {
  opacity: .86;
  transform: translateY(-1px);
}
/* ── builder oversize alert ─────────────────────────────────────── */
.builder_oversize_alert {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 55% at 0% 0%, rgba(255, 255, 255, .085) 0%, transparent 65%),
    radial-gradient(ellipse 42% 50% at 100% 100%, rgba(140, 156, 170, .055) 0%, transparent 60%),
    linear-gradient(160deg, rgba(26, 27, 29, .96) 0%, rgba(8, 9, 10, .96) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 1px 0 rgba(255, 255, 255, .12) inset,
    0 18px 42px rgba(0, 0, 0, .38),
    0 2px 8px rgba(255, 255, 255, .035);
  padding: 16px 48px 16px 16px;
  color: #fff;
  backdrop-filter: blur(20px);
  animation: oversizeAlertIn .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes oversizeAlertIn {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* top shimmer line */
.builder_oversize_alert::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, .16) 35%, rgba(255, 255, 255, .24) 50%, rgba(255, 255, 255, .16) 65%, transparent 95%);
  pointer-events: none;
}
/* ambient glow blob behind icon */
.builder_oversize_alert::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -14px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 70%);
  pointer-events: none;
}
.builder_oversize_alert_main {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.builder_oversize_alert_head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-right: 4px;
}
.builder_oversize_alert_icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12) 0%, rgba(140, 156, 170, .06) 100%);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .035),
    0 4px 12px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  font-family: var(--third-family);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 0 8px rgba(255, 255, 255, .22);
}
.builder_oversize_alert_kicker {
  margin: 0 0 4px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
}
.builder_oversize_alert_title {
  margin: 0;
  max-width: 620px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  color: #fff;
}
.builder_oversize_alert_text {
  margin: 10px 0 0;
  max-width: 640px;
  color: rgba(255, 255, 255, .52);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.builder_oversize_alert--pro {
  max-width: 720px;
  padding-block: 14px;
}
.builder_oversize_alert--pro .builder_oversize_alert_text {
  max-width: 560px;
}
.builder_oversize_alert_progress {
  margin-top: 12px;
  max-width: 390px;
}
.builder_oversize_alert_progress_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, .52);
}
.builder_oversize_alert_progress_row strong {
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
}
.builder_oversize_alert_progress_track {
  position: relative;
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.builder_oversize_alert_progress_track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .86));
  box-shadow: 0 0 16px rgba(255, 255, 255, .12);
  transition: width .3s ease;
}
/* stats pills */
.builder_oversize_alert_stats {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.builder_oversize_alert_stats span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}
/* first pill — count */
.builder_oversize_alert_stats span:nth-child(1) {
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .62);
}
/* second pill — actual size (warning) */
.builder_oversize_alert_stats span:nth-child(2) {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .78);
}
.builder_oversize_alert_stats span:nth-child(2)::before {
  content: none;
  font-size: 9px;
  font-weight: 900;
  opacity: .75;
}
/* third pill — target size (good) */
.builder_oversize_alert_stats span:nth-child(3) {
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .56);
}
.builder_oversize_alert_stats span:nth-child(3)::before {
  content: none;
  font-size: 9px;
  font-weight: 900;
  opacity: .75;
}
/* error */
.builder_oversize_alert_error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 0 0;
  border: 1px solid rgba(255, 90, 90, .18);
  border-radius: 12px;
  background: rgba(255, 60, 60, .07);
  padding: 9px 12px;
  color: rgba(255, 185, 185, .92);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}
.builder_oversize_alert_error::before {
  content: "!";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 80, 80, .22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 150, 150, .9);
  margin-top: 1px;
}
/* actions */
.builder_oversize_alert_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 14px;
}
.builder_oversize_alert_action_wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Pro+ badge */
.builder_oversize_alert_plan_badge {
  position: absolute;
  left: 11px;
  top: -8px;
  z-index: 2;
  display: inline-flex;
  min-height: 15px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20, 20, 20, .98), rgba(14, 14, 14, .98));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .035);
  padding: 0 6px;
  color: rgba(255, 255, 255, .68);
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* shared button base */
.builder_oversize_alert_primary,
.builder_oversize_alert_secondary,
.builder_oversize_alert_close {
  font-family: var(--font-family);
  font-weight: 850;
  cursor: pointer;
  transition:
    transform .17s cubic-bezier(.22, 1, .36, 1),
    opacity .17s ease,
    box-shadow .17s ease,
    background .17s ease;
}
/* primary — white CTA */
.builder_oversize_alert_primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 0;
  border-radius: 13px;
  background: #fff;
  color: #0c0a06;
  padding: 0 18px;
  font-size: 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 22px rgba(255, 255, 255, .08),
    0 2px 6px rgba(0, 0, 0, .22);
}
.builder_oversize_alert_primary:disabled {
  cursor: wait;
  opacity: .6;
}
/* secondary — ghost */
.builder_oversize_alert_secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .62);
  padding: 0 15px;
  font-size: 12px;
}
/* close */
.builder_oversize_alert_close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .5);
  font-size: 16px;
  line-height: 1;
}
/* hovers */
.builder_oversize_alert_primary:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 12px 28px rgba(255, 255, 255, .12),
    0 4px 10px rgba(0, 0, 0, .26);
}
.builder_oversize_alert_secondary:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
  transform: translateY(-1px);
}
.builder_oversize_alert_close:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .8);
  transform: scale(1.08);
}
@media (max-width: 560px) {
  .builder_token_modal,
  .builder_auth_dialog {
    padding: 14px;
  }
  .builder_token_modal_panel,
  .builder_auth_dialog_panel {
    border-radius: 22px;
    padding: 24px 20px 20px;
  }
  .builder_token_modal_actions {
    grid-template-columns: 1fr;
  }
  .builder_token_modal_top,
  .builder_auth_dialog_top {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .builder_token_modal_title,
  .builder_auth_dialog_title {
    margin-top: 18px;
    font-size: 25px;
  }
  .builder_token_modal_text,
  .builder_auth_dialog_text {
    font-size: 14px;
  }
  .builder_token_modal_secondary {
    min-width: 0;
  }
  .builder_oversize_modal {
    padding: 16px;
  }
  .builder_oversize_modal_panel {
    border-radius: 24px;
    padding: 22px;
  }
  .builder_oversize_modal_actions {
    grid-template-columns: 1fr;
  }
  .builder_oversize_modal_top {
    align-items: flex-start;
    flex-direction: column;
  }
  .builder_oversize_modal_secondary {
    min-width: 0;
  }
  .builder_oversize_alert {
    grid-template-columns: 1fr;
  }
  .builder_oversize_alert_actions {
    align-items: stretch;
  }
  .builder_oversize_alert_action_wrap {
    flex: 1 1 160px;
  }
  .builder_oversize_alert_primary,
  .builder_oversize_alert_secondary {
    flex: 1 1 160px;
  }
}
.builder_illustration_gif_notice {
  grid-column: 1 / -1;
  margin: -2px 6px 4px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.58);
}
.builder_illustration_header {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
}
.builder_illustration_header .builder_section_title {
  min-width: 0;
}
.builder_gallery_menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 40;
}
.builder_gallery_menu_button {
  min-height: 34px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  transition: opacity .2s, background .2s, border-color .2s, color .2s;
}
.builder_gallery_menu_button:hover,
.builder_gallery_menu_button.is-open {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.builder_gallery_publish {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(8, 8, 8, 0.98);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
}
.builder_gallery_publish_hint {
  margin: 0;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.52);
}
.builder_share_card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}
.builder_share_card strong {
  display: block;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.builder_share_heading {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.builder_share_heading > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: rgba(102, 192, 244, 0.13);
  color: #9cdbff;
}
.builder_share_card p,
.builder_share_card small {
  margin: 4px 0 0;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.52);
}
.builder_share_link {
  display: flex;
  gap: 7px;
}
.builder_share_link input {
  min-width: 0;
  flex: 1;
  height: 36px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--font-family);
  font-size: 11px;
  outline: none;
}
.builder_share_link button {
  min-width: 74px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.builder_share_divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.44);
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.builder_share_divider span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.maintenance_progress {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 4px;
}
.maintenance_progress span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9cdbff;
  box-shadow: 0 0 14px rgba(102, 192, 244, 0.8);
  animation: maintenancePulse 1.2s ease-in-out infinite;
}
.maintenance_progress span:nth-child(2) { animation-delay: .16s; }
.maintenance_progress span:nth-child(3) { animation-delay: .32s; }
@keyframes maintenancePulse { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.builder_share_divider::before,
.builder_share_divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.09);
}
.builder_gallery_publish_field {
  display: grid;
  gap: 7px;
}
.builder_gallery_publish_field span {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.58);
}
.builder_gallery_publish_field small {
  justify-self: end;
  margin-top: -3px;
  font-family: var(--font-family);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.38);
}
.builder_gallery_publish_field input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  outline: none;
}
.builder_gallery_publish_field input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}
.builder_gallery_publish_field input:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.34);
}
.builder_gallery_publish_rights {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}
.builder_gallery_publish_rights input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--obvodka-vybora);
}
.builder_gallery_publish_button {
  min-height: 42px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 17px rgba(255, 255, 255, 0.22);
  color: #000000;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.builder_gallery_publish_button:hover {
  opacity: .72;
}
.builder_gallery_publish_button:disabled {
  cursor: default;
  opacity: 0.6;
}
.builder_gallery_publish_status {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(74, 222, 128, 0.24);
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.1);
  color: #d7ffe4;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.builder_gallery_publish_status--error {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.11);
  color: #ffd6d6;
}
.builder_gallery_template_notice {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.builder_gallery_template_notice--error {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.11);
  color: #ffd6d6;
}
.builder_layers {
  width: 100%;
  height: auto;
  background: rgba(5, 5, 5, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.024);
  border-radius: 24px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.016);
}
.builder_layers_content {
  padding: 20px;
}
.builder_layers_blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.builder_layers_block {
  width: 100%;
  height: auto;
  background: var(--seraya-plashka);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  transition: all .3s ease;
  cursor: pointer;
}
.builder_layers_block:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.12);
}
.builder_layers_block.is-selected{
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 18px 0 rgba(255, 255, 255, 0.1);
}
.builder_layers_block.is-hidden{
  opacity: .45;
}
.builder_layers_block.is-dragging{
  opacity: .35;
  transform: scale(.99);
}
.builder_layers_block.is-inactive .builder_layers_block_title{
  opacity: .6;
}
.builder_layers_block.is-locked{
  cursor: default;
}
.builder_layers_block_content {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.builder_layers_block_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
}
.builder_layers_block_drag{
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: all .5s;
}
.builder_layers_block_drag:hover{
  opacity: .5;
}
.builder_layers_block_drag:active{
  cursor: grabbing;
}
.builder_layers_block_drag:disabled{
  cursor: default;
  opacity: .35;
}
.builder_layers_block_settings {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 16px;
}
.builder_layers_block_settings_move {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all .5s;
}
.builder_layers_block_settings_move:hover{
  opacity: .5;
}
.builder_layers_block_settings_move:disabled{
  opacity: .25;
  cursor: default;
}
.builder_layers_block_settings_delete {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  transition: all .5s;
}
.builder_layers_block_settings_delete:hover{
  opacity: .5;
}
.builder_layers_block_settings_hide {
  vertical-align: middle;
  cursor: pointer;
  transition: all .5s;
}
.builder_layers_block_settings_hide:hover{
  opacity: .5;
}
.builder_layers_block_settings_hide{
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.builder_layers_block_settings_lock{
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
}
.builder_layers_block_drop_marker{
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--obvodka-vybora);
  box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.24);
}
.builder_layers_block_add {
  background: var(--seraya-plashka);
  width: 100%;
  height: auto;
  border: 1px dashed rgba(255, 255, 255, 0.22);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-family);
font-weight: 600;
font-size: 12px;
color: var(--obvodka-vybora);
cursor: pointer;
transition: all .5s;
outline: none;
padding: 16.75px;
}
.builder_layers_block_add:hover{
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.1);
}
.builder_layers_block_add svg{
  vertical-align: middle;
  margin-top: 2px;
}
.builder_layers_add_wrap{
  position: relative;
}
.builder_layers_add_menu{
  width: 100%;
  height: auto;
  margin-top: 10px;
  background: var(--seraya-plashka);
  border-radius: 16px;
  overflow: hidden;
}
.builder_layers_add_menu_item{
  width: 100%;
  text-align: left;
  outline: none;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  color: var(--obvodka-vybora);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .5s;
}
.builder_layers_add_menu_item:hover{
  background: rgba(255,255,255,.06);
}
.builder_layers_add_menu_empty{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  padding: 14px 16px;
}

.builder .page_main{
  padding-top: 20px;
}



.builder_category_character {
  width: 100%;
  height: auto;
  margin-top: 20px;

}
.builder_category_character_title {
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: var(--obvodka-vybora);
}
.builder_category_character_load {
  width: 100%;
  height: auto;
  margin-top: 20px;
  background: var(--seraya-plashka);
  border-radius: 20px;

}
.builder_category_character_load_content {
  padding: 16px;
}
.builder_category_character_load_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: var(--obvodka-vybora);
}
.builder_category_character_load_button {
  width: 100%;
  height: auto;
  margin-top: 16px;
  border: 2px dashed var(--punktir);
  border-radius: 16px;
  padding-top: 29px;
  padding-bottom: 29px;
  cursor: pointer;
  transition: all .5s;
}
.builder_category_character_load_button:hover{
  opacity: .5;
}
.builder_category_character_load_button_icon {
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--seraya-plashka);
  width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.builder_category_character_load_button_text {
  margin-top: 8px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 11px;
line-height: 1.35;
text-align: center;
color: var(--obvodka-vybora);
}
.builder_category_character_gif_warning {
  margin-top: 10px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  color: #ff6b6b;
}
.builder_category_character_processing{
  width: 100%;
  height: auto;
}
.builder_category_character_processing_text{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.builder_category_character_processing_actions{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder_category_character_processing_button{
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--obvodka-vybora);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  transition: background .25s, border-color .25s, opacity .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.builder_category_character_processing_button:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
}
.builder_category_character_processing_button:disabled{
  opacity: .5;
  cursor: default;
}
.builder_category_character_processing_button--primary{
  background: var(--obvodka-vybora);
  color: #000;
  box-shadow: 0 0 10px 0 rgba(255,255,255,.18);
}
.builder_category_character_processing_button--primary:hover{
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.22);
}
.builder_category_character_processing_badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.builder_category_character_load_actions{
  margin-top: 12px;
}
.builder_category_character_load_action{
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--obvodka-vybora);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  transition: background .25s, border-color .25s, opacity .25s;
}
.builder_category_character_load_action:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
}
.builder_category_character_transform {
  width: 100%;
  height: auto;
  position: relative;
}
.builder_category_character_animation{
  position: relative;
}
.builder_category_character_correction{
  position: relative;
}
.builder_category_character_transform_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
margin-top: 20px;
}
.builder_category_character_section_heading{
  position: relative;
  min-height: 32px;
  padding-right: 48px;
  margin-top: 20px;
}
.builder_category_character_section_heading .builder_category_character_transform_title{
  margin-top: 0;
}
.builder_category_character_transform_rect {
  width: 100%;
  height: auto;
  background: var(--seraya-plashka);
  border-radius: 20px;
margin-top: 8px;
}
.builder_category_character_transform_rect_content {
  padding: 16px;
}
.builder .optimizer_lossy_up{
  align-items: flex-start;
}
.builder_category_character_transform_blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.builder_category_character_breath{
  margin-top: 18px;
}
.builder_category_character_breath_center {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.026));
}
.builder_category_character_breath_center[hidden] {
  display: none;
}
.builder_category_character_breath_mode {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}
.builder_category_character_breath_auto {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.builder_category_character_breath_auto:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.builder_category_character_breath_auto.is-active {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #05070b !important;
  box-shadow: 0 8px 18px rgba(255, 255, 255, 0.08) !important;
}
.builder_category_character_reset{
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all .5s;
  outline: none;
}
.builder_category_character_reset:hover{
  opacity: .75;
}
.builder_category_character_reset svg{
  display: block;
}
.builder_category_character_reset--section{
  margin-left: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.builder_illustration_delete_bg_title{
  font-family: var(--font-family);
font-weight: 600;
font-size: 13px;
text-align: left;
color: var(--obvodka-vybora);
}
.builder_illustration_delete_bg_description{
  margin-top: 6px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  color: rgba(255, 255, 255, 0.62);
}

.builder_illustration_delete_bg {
  width: 100%;
  max-width: 372px;
  height: auto;
  backdrop-filter: blur(15px);
background: var(--seraya-plashka);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
display: block;
margin: 0 auto;
margin-top: 20px;
}
.builder_illustration_delete_bg_content {
  padding: 14px;
}
.builder_illustration_delete_bg_buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.builder_illustration_delete_bg_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 12px;
color: var(--obvodka-vybora);
padding: 11px 12px;
width: 100%;
min-height: 42px;
border-radius: 10px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
background: #000;
cursor: pointer;
transition: all .5s;
outline: none;
border: none;
}
.builder_illustration_delete_bg_button:hover{
  opacity: .5;
}
.builder_illustration_delete_bg_button:disabled{
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.builder_illustration_delete_bg_button svg{
  vertical-align: middle;
}

.builder_illustration_delete_bg_button:first-child{
  box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.4);
background: var(--obvodka-vybora);
color: #000;
}



.builder_category_text {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.builder_category_text_blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.builder_category_text_block {
  width: 100%;
  height: auto;
}
.builder_category_text_block_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.builder_category_text_block_input {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
padding: 16px;
width: 100%;
height: auto;
background: var(--seraya-plashka);
border-radius: 16px;
padding: 16px;
outline: none;
border: none;
margin-top: 8px;
}
.builder_category_text_block_input::placeholder{
  color: var(--obvodka-vybora);
}
.builder_category_text_block_items {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.builder_category_text_block_item:first-child {
  width: calc(100% - 52px)
}
.builder_category_text_block_item_select {
position: relative;
width: 100%;
}
.builder_category_text_block_item_select_selected {
  width: 100%;
  height: auto;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
padding: 16px;
display: flex;
align-items: center;
background: var(--serayhover);
border: 0;
border-radius: 16px;
cursor: pointer;
transition: all .5s;

}
.builder_category_text_block_item_select_selected:hover{
  opacity: .5;
}
.builder_category_text_block_item_select_selected:focus-visible,
.builder_category_text_block_item_select_tab:focus-visible,
.builder_category_text_block_item_select_item--font:focus-visible,
.builder_category_text_block_item_select_item--action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
.builder_category_text_block_item_select_selected svg{
  vertical-align: middle;
  margin-left: auto;
}
.builder_category_text_block_item_select_items {
  width: 100%;
  background: linear-gradient(155deg, rgba(31, 31, 34, 0.985), rgba(18, 18, 20, 0.985));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  border-radius: 22px;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: none;
  overflow: hidden auto;
  max-height: min(320px, calc(100vh - 160px));
  padding: 0;
  flex-direction: column;
  backdrop-filter: blur(24px);
  animation: builderFontCatalogIn .18s ease-out both;
}

@keyframes builderFontCatalogIn {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.builder_category_text_blocks .builder_category_text_block_item_select_items {
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(22, 22, 24, 0.97), rgba(5, 6, 7, 0.985));
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.68), 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  -webkit-backdrop-filter: blur(34px) saturate(108%);
  backdrop-filter: blur(34px) saturate(108%);
  animation: builderFontCatalogModalIn .18s ease-out both;
}

@keyframes builderFontCatalogModalIn {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

.builder_category_text_blocks .builder_category_text_block_item_select.is-open-upward .builder_category_text_block_item_select_items {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom left;
}

.builder_font_catalog_header {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 10px 12px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(255, 255, 255, 0.025);
}
.builder_font_catalog_title {
  color: #fff;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 650;
}
.builder_font_catalog_close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.builder_font_catalog_close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(4deg);
}
.builder_font_catalog_close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}
.builder_font_catalog_toolbar {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(220px, 1.2fr);
  gap: 10px;
}
.builder_font_catalog_groups_nav {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  margin: 1px 12px 9px;
}
.builder_font_catalog_groups_nav[hidden] {
  display: none;
}
.builder_font_catalog_groups {
  display: flex;
  width: 100%;
  gap: 6px;
  min-height: 35px;
  padding: 1px 0 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.builder_font_catalog_groups[hidden] {
  display: none;
}
.builder_font_catalog_groups::-webkit-scrollbar {
  display: none;
}
.builder_font_catalog_groups_arrow {
  position: absolute;
  top: 0;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 27, 30, 0.96);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
  backdrop-filter: blur(12px);
}
.builder_font_catalog_groups_arrow[hidden] {
  display: none;
}
.builder_font_catalog_groups_arrow--prev {
  left: 0;
  background: linear-gradient(90deg, rgba(27, 27, 30, 1) 66%, rgba(27, 27, 30, 0.9));
}
.builder_font_catalog_groups_arrow--next {
  right: 0;
  background: linear-gradient(270deg, rgba(27, 27, 30, 1) 66%, rgba(27, 27, 30, 0.9));
}
.builder_font_catalog_groups_arrow:hover {
  color: #fff;
  border-color: rgba(151, 197, 255, 0.48);
  background: rgba(55, 63, 75, 0.98);
  transform: scale(1.06);
}
.builder_font_catalog_groups_arrow:focus-visible {
  outline: 2px solid rgba(151, 197, 255, 0.62);
  outline-offset: 2px;
}
.builder_font_catalog_group {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.builder_font_catalog_group_count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}
.builder_font_catalog_group.is-active .builder_font_catalog_group_count {
  background: rgba(151, 197, 255, 0.17);
  color: rgba(255, 255, 255, 0.8);
}
.builder_font_catalog_group:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}
.builder_font_catalog_group.is-active {
  color: #fff;
  border-color: rgba(151, 197, 255, 0.34);
  background: rgba(122, 180, 255, 0.13);
}
.builder_font_catalog_group:focus-visible {
  outline: 2px solid rgba(151, 197, 255, 0.55);
  outline-offset: 2px;
}

section.page.builder:not(.mockup) .builder_category:has(.builder_category_text_block_item_select.is-open) {
  overflow: visible;
  z-index: 1000;
}

section.page.builder:not(.mockup):has(.builder_category_text_block_item_select.is-open) {
  z-index: 10;
}

section.page.builder:not(.mockup) .builder_category:has(.builder_category_text_animate .builder_category_text_block_item_select.is-open) {
  z-index: 60;
}

.builder_category_text_animate .builder_category_text_block_item_select.is-open .builder_category_text_block_item_select_items {
  position: static;
  margin-top: 8px;
  z-index: 60;
  max-height: min(260px, calc(100vh - 180px));
  overflow: hidden auto;
}
.builder_category_text_block_item_select_item {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 15px;
  color: var(--obvodka-vybora);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.builder_category_text_block_item_select_item:not(.builder_category_text_block_item_select_item--action):not(.builder_category_text_block_item_select_item--font):hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.builder_category_text_block_item_select_item_active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.builder_category_text_block_item_select_item--action {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  gap: 12px;
  align-items: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.builder_category_text_block_item_select_item--action:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.builder_category_text_block_item_select_item_action_icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.builder_category_text_block_item_select_item_action_texts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.builder_category_text_block_item_select_item_action_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.builder_category_text_block_item_select_tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px 12px 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.builder_category_text_block_item_select_tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 9px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all .25s;
}
.builder_category_text_block_item_select_tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.builder_category_text_block_item_select_tab.is-active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.09));
  color: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.builder_category_text_block_item_select_search {
  min-width: 0;
  padding: 0;
}
.builder_font_catalog_preview_text {
  display: none;
}
.builder_category_text_block_item_select_search_input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(8, 8, 9, 0.34);
  height: 100%;
  min-height: 42px;
  padding: 10px 13px;
  outline: none;
  color: #fff;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  transition: border-color .2s ease, background .2s ease;
}
.builder_category_text_block_item_select_search_input:focus {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
}
.builder_category_text_block_item_select_search_input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.builder_category_text_block_item_select_feedback {
  margin: 0 12px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.45;
}
.builder_category_text_block_item_select_feedback[data-kind="info"] {
  color: #cfd8ff;
  background: rgba(95, 130, 255, 0.14);
}
.builder_category_text_block_item_select_feedback[data-kind="success"] {
  color: #d5ffe9;
  background: rgba(77, 180, 120, 0.16);
}
.builder_category_text_block_item_select_feedback[data-kind="error"] {
  color: #ffd5d5;
  background: rgba(229, 84, 84, 0.16);
}
.builder_category_text_block_item_select_sections {
  min-height: 0;
  flex: 1 1 auto;
  padding: 10px 14px 14px;
  max-height: none;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.builder_category_text_blocks .builder_category_text_block_item_select.is-open .builder_category_text_block_item_select_items {
  position: fixed;
  width: min(640px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 32px));
  right: auto;
  bottom: auto;
  margin: 0;
}
.builder_category_text_blocks .builder_category_text_block_item_select_sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.builder_category_text_block_item_select_sections::-webkit-scrollbar {
  width: 8px;
}
.builder_category_text_block_item_select_sections::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.builder_category_text_block_item_select_sections::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
  background-clip: padding-box;
  border: 2px solid transparent;
}
.builder_category_text_block_item_select_item--font {
  position: relative;
  justify-content: space-between;
  gap: 12px;
  height: 94px;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.047), rgba(255, 255, 255, 0.022));
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.builder_category_text_block_item_select_item--font.is-loading {
  pointer-events: none;
  border-color: rgba(151, 197, 255, 0.2);
}
.builder_category_text_block_item_select_item--font.is-loading::after {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  content: "";
  animation: builder-font-random-spin .7s linear infinite;
}
.builder_category_text_block_item_select_item--font.is-loading .builder_category_text_block_item_select_favorite {
  visibility: hidden;
}
.builder_category_text_block_item_select_item_text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}
.builder_category_text_block_item_select_item--font:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
  border-color: rgba(255, 255, 255, 0.13);
  color: #fff;
  transform: translateY(-1px);
}
.builder_category_text_block_item_select_item--font.builder_category_text_block_item_select_item_active {
  background: linear-gradient(145deg, rgba(122, 180, 255, 0.14), rgba(255, 255, 255, 0.045));
  border-color: rgba(151, 197, 255, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(190, 219, 255, 0.06);
}
.builder_category_text_block_item_select_item_label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 650;
}
.builder_category_text_block_item_select_item_preview {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .builder_category_text_blocks .builder_category_text_block_item_select.is-open .builder_category_text_block_item_select_items {
    position: fixed;
    inset: 8px !important;
    width: auto;
    height: calc(100dvh - 16px);
    max-height: none !important;
    border-radius: 18px;
  }
  .builder_category_text_blocks .builder_category_text_block_item_select_sections {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .builder_category_text_block_item_select_tabs {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr);
    gap: 5px;
    padding-top: 9px;
  }
  .builder_category_text_block_item_select_tab {
    min-width: 0;
    padding: 9px 4px;
    font-size: 11px;
  }
  .builder_category_text_block_item_select_item_preview {
    font-size: 24px;
  }
  .builder_font_catalog_toolbar {
    grid-template-columns: 1fr;
    padding-top: 8px;
    gap: 8px;
  }
  .builder_font_catalog_preview_text {
    display: block;
  }
  .builder_font_catalog_groups_nav {
    margin-right: 8px;
    margin-left: 8px;
  }
  .builder_font_catalog_groups {
    min-height: 39px;
    padding-bottom: 5px;
  }
  .builder_font_catalog_groups_arrow {
    width: 36px;
    height: 36px;
  }
  .builder_font_catalog_group {
    min-height: 32px;
    padding: 7px 10px;
  }
  .builder_category_text_block_item_select_item--font {
    width: 100%;
    max-width: 100%;
    height: 88px;
  }
}
@media (max-width: 380px) {
  .builder_font_catalog_header {
    min-height: 44px;
  }
  .builder_category_text_block_item_select_tabs {
    padding-right: 8px;
    padding-left: 8px;
  }
  .builder_category_text_block_item_select_tab {
    font-size: 10px;
  }
  .builder_category_text_block_item_select_item--font {
    height: 78px;
    padding: 10px 11px;
  }
  .builder_category_text_block_item_select_item_preview {
    font-size: 21px;
  }
}
@media (max-height: 660px) and (min-width: 681px) {
  .builder_category_text_blocks .builder_category_text_block_item_select.is-open .builder_category_text_block_item_select_items {
    position: fixed;
    inset: 10px !important;
    width: min(640px, calc(100vw - 20px));
    height: calc(100dvh - 20px);
    max-height: none !important;
    margin: auto;
  }
}
.builder_category_text_block_item_select_favorite {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.34);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .25s;
}
.builder_category_text_block_item_select_favorite:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}
.builder_category_text_block_item_select_favorite.is-active {
  color: #ffd66b;
  background: rgba(255, 214, 107, 0.14);
}
.builder_category_text_block_item_select_favorite.is-active svg {
  fill: #ffd66b;
}
.builder_category_text_block_item_select_favorite:focus-visible {
  outline: 2px solid rgba(255, 214, 107, 0.55);
  outline-offset: 2px;
}
.builder_category_text_block_item_select_empty {
  padding: 14px 16px 18px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.48);
}
.builder_category_text_block_item_button {
  width: 52px;
height: 52px;
background: var(--seraya-plashka);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .5s;
outline: none;
border: none;
}
.builder_category_text_block_item_button svg{
  vertical-align: middle;
  transition: transform .2s ease, opacity .2s ease;
}
.builder_category_text_block_item_button.is-loading {
  cursor: wait;
  opacity: .82;
}
.builder_category_text_block_item_button.is-loading svg {
  animation: builderRandomFontSpin .72s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes builderRandomFontSpin {
  to { transform: rotate(360deg); }
}
.builder_category_text_block_item_button:hover{
  opacity: .5;
}
.builder_category_text_location {
  width: 100%;
  height: auto;
  margin-top: 20.22px;
}
.builder_category_text_location_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.builder_category_text_location_rect {
  width: 100%;
  height: auto;
  background: var(--seraya-plashka);
  border-radius: 20px;
  margin-top: 8px;

}
.builder_category_text_title{
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: var(--obvodka-vybora);
}
.builder_category_text_location_rect_content {
  padding: 16px;
}
.builder_category_text_location_rect_settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.builder_category_text_location_rect_setting {

}
.builder_category_text_orientation {
  width: 100%;
  height: auto;
  margin-top: 16px;
}
.builder_category_text_orientation_title{
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: var(--obvodka-vybora);
}
.builder_category_text_orientation_buttons {
  width: 100%;
  height: auto;
  margin-top: 16px;
  display: flex;
  align-items: center;
  padding: 8px;
  background: var(--color);
  border-radius: 20px;

}
.builder_category_text_orientation_button {
  width: 100%;
  height: auto;
  font-family: var(--font-family);
font-weight: 600;
font-size: 12px;
color: var(--obvodka-vybora);
padding: 12px;
background: transparent;
outline: none;
border-radius: 12px;
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
}
.builder_category_text_orientation_button:hover{
  opacity: .5;
}
.builder_category_text_orientation_button_active {
  color: #000;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29);
background: var(--obvodka-vybora);
}
.builder_category_text_orientation_button_active:hover{
  opacity: 1;
}
.builder_category_text_colors {
width: 100%;
margin-top: 16px;
  border-radius: 16px;

}
.builder_category_text_colors_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: var(--obvodka-vybora);
}
.builder_category_text_colors_blocks {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 8px;
  margin-top: 12px;
  background: var(--color);
  padding: 8px;
  border-radius: 16px;

}
.builder_category_text_color_button {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  outline: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s;
  border-radius: 12px;
  background: var(--obvodka-vybora);
}
.builder_category_text_color_button:hover{
  opacity: .5;
}
.builder_category_text_color_button_active {
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.builder_category_text_color_button_active:hover{
  opacity: 1;
}

.builder_category_text_colors_blocks {
  position: relative;
}

.builder_color_picker_anchor {
  position: relative;
}

.builder_category_text_color_input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.builder_category_text_color_button--picker {
  --builder-custom-color: #ffffff;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 7px, rgba(255, 255, 255, 0.02) 7px 14px),
    #12151d;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 2px rgba(15, 17, 24, 0.18);
}

.builder_category_text_color_button--picker.has-custom {
  background: var(--builder-custom-color);
  box-shadow: inset 0 0 0 1px rgba(15, 17, 24, 0.18);
}

.builder_category_text_color_button--picker::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(18, 20, 28, 0.88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.builder_category_text_color_button_picker_icon {
  position: relative;
  z-index: 1;
}

.builder_category_text_color_button_picker_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 6px 0 0;
}

.builder_category_text_color_button--picker.is-open {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(15, 17, 24, 0.18);
}

.builder_color_picker_popover {
  position: fixed;
  z-index: 10000;
  width: 272px;
  max-width: min(272px, calc(100vw - 40px));
  padding: 14px;
  border-radius: 18px;
  background: rgba(18, 20, 28, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px);
}

.builder_color_picker_popover .react-colorful {
  width: 100%;
  height: 168px;
}

.builder_color_picker_popover .react-colorful__saturation {
  border-radius: 14px 14px 0 0;
}

.builder_color_picker_popover .react-colorful__hue {
  height: 14px;
  margin-top: 10px;
  border-radius: 999px;
}

.builder_color_picker_popover .react-colorful__pointer {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.builder_color_picker_popover_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.builder_color_picker_popover_value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.04em;
}

.builder_color_picker_popover_input {
  width: 92px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  padding: 7px 9px;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  letter-spacing: 0;
  outline: none;
  text-transform: uppercase;
}

.builder_color_picker_popover_input:focus {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.09);
}

.builder_color_picker_popover_chip {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(15, 17, 24, 0.2);
}

.builder_color_picker_popover_close {
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  color: #fff;
  transition: background .2s ease, opacity .2s ease;
}

.builder_color_picker_popover_close:hover {
  background: rgba(255, 255, 255, 0.14);
}


.builder_category_text_animate {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.builder_category_text_animate_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.builder_category_text_animate_rect {
  width: 100%;
  height: auto;
margin-top: 12px;
background: var(--seraya-plashka);
border-radius: 20px;

}
.builder_category_text_animate .builder_category_text_block_item_select_selected{
  margin-top: 12px;
}
.builder_category_text_animate_rect_content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}

.builder_category_text_effect_color {
  width: 100%;
}

.builder_category_text_effect_color_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.builder_category_text_colors_blocks--effect {
  margin-top: 10px;
  grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
}

.builder_category_text_colors_blocks--effect .builder_category_text_color_button {
  min-height: 38px;
  border-radius: 10px;
}

.builder{
  background: url(../img/builder_bg_select.png) top center no-repeat;
  background-size: max(1920px, 100%) auto;
  background-color: #000;
}




.builder_category_border {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.builder_category_text_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: var(--obvodka-vybora);
}
.builder_category_border_border {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.builder_category_border_border_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.builder_category_border_border_rect {
  width: 100%;
  height: auto;
  margin-top: 8px;
  background: var(--seraya-plashka);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 20px;
}
.builder_category_border_border_rect_content {
  padding: 14px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(255, 255, 255, 0.015) 0%, transparent 55%);
  border-radius: 20px;
}
.builder_category_border_border_rect_items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px;
}
.builder_category_border_border_rect_item {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
    var(--seraya-plashka);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .2s ease;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.builder_category_border_border_rect_item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow .25s ease;
}
.builder_category_border_border_rect_item:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    var(--seraya-plashka);
}
.builder_category_border_border_rect_item img {
  vertical-align: middle;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
  transition: transform .25s ease;
}
.builder_category_border_border_rect_item:hover img {
  transform: scale(1.04);
}
.builder_category_border_border_rect_item--clear {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px),
    var(--seraya-plashka);
}
.builder_category_border_border_rect_item--clear:hover {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.builder_category_border_border_rect_item--clear.builder_category_border_border_rect_item_active {
  color: #000;
  border-color: transparent;
}
.builder_category_border_border_rect_item_active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%),
    var(--seraya-plashka);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.builder_category_border_border_rect_item_active::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.builder_category_border_border_rect_item_active:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.builder_category_border_config {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.builder_category_border_config_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.builder_category_border_config_rect {
  width: 100%;
  height: auto;
  margin-top: 8px;
  background: var(--seraya-plashka);
  border-radius: 20px;

}
.builder_category_border_config_rect_content {
  padding: 16px;
}
.builder_category_border_config_blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.builder_category_border_config_items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.builder_category_particles{
  margin-top: 20px;
}

.builder_category_particles .builder_category_text_block_item:first-child {
  width: 100%;
  flex: 1 1 100%;
}




.mockup_profile {
  width: 100%;
  height: auto;
  backdrop-filter: blur(60.8px);
  -webkit-backdrop-filter: blur(60.8px);
  background: var(--color);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.mockup_profile_content {
  position: relative;
  z-index: 1;
  padding: 22px;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    radial-gradient(120% 70% at 100% 100%, rgba(255, 255, 255, 0.02) 0%, transparent 60%);
}
.mockup_profile_title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-family);
font-weight: 600;
font-size: 24px;
color: var(--obvodka-vybora);
}
.mockup_profile_title svg{
  vertical-align: middle;
}
.mockup_profile_button {
  width: 100%;
  height: auto;
  margin-top: 20px;
  outline: none;
border: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
color: #000;
padding: 12px 20px;
background: var(--obvodka-vybora);
border-radius: 16px;
cursor: pointer;
transition: all .5s;
}
.mockup_profile_button:hover{
  opacity: .5;
}
.mockup_profile_button_save {
  background: rgba(255, 255, 255, 0.08);
  color: var(--obvodka-vybora);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mockup_profile_save_status {
  width: 100%;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.58);
}
.mockup_profile_save_dialog {
  margin-top: 14px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.36);
  padding: 14px;
}
.mockup_profile_save_dialog_head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mockup_profile_save_dialog_head p {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--obvodka-vybora);
}
.mockup_profile_save_dialog_head button {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
}
.mockup_profile_save_slots {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.mockup_profile_save_slot {
  min-width: 0;
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: opacity .2s, border-color .2s, background .2s;
}
.mockup_profile_save_slot:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.075);
}
.mockup_profile_save_slot:disabled {
  cursor: default;
  opacity: 0.55;
}
.mockup_profile_save_slot span,
.mockup_profile_save_slot strong,
.mockup_profile_save_slot small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family);
}
.mockup_profile_save_slot span {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.mockup_profile_save_slot strong {
  margin-top: 9px;
  font-weight: 700;
  font-size: 13px;
  color: var(--obvodka-vybora);
}
.mockup_profile_save_slot small {
  margin-top: 8px;
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.46);
}
.mockup_profile_save_slot.is-locked {
  background: rgba(0, 0, 0, 0.32);
}
.mockup_profile_save_slot.is-saved {
  border-color: rgba(75, 211, 145, 0.58);
  background: rgba(75, 211, 145, 0.11);
}
.mockup_profile_save_slot.is-saved small {
  color: rgba(174, 255, 211, 0.9);
}
.mockup_export_note--cost {
  color: rgba(255, 255, 255, 0.78);
}
.mockup_profile_blocks {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.mockup_profile_block {
  width: 100%;
  height: auto;
}
.mockup_profile_block_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.mockup_profile_block_input {
  margin-top: 8px;
  width: 100%;
  height: auto;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
padding: 16px;
border-radius: 16px;
background: var(--seraya-plashka);
outline: none;
border: none;
}
.mockup_profile_block_input::placeholder{
  color: var(--obvodka-vybora);
}
.mockup_profile_block_items {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mockup_profile_block_item {
  width: 100%;
}
.mockup_profile_block_up {
  display: flex;
  align-items: center;
}
.mockup_profile_block_up_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.mockup_profile_block_up_limits {
  margin-left: auto;
  font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.mockup_profile_block_textarea {
  width: 100%;
  height: auto;
  margin-top: 8px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
padding: 16px;
background: var(--seraya-plashka);
border-radius: 16px;
outline: none;
border: none;
resize: none;
min-height: 122px;
}
.mockup_profile_block_textarea::placeholder{
  color: var(--obvodka-vybora);
}
.mockup_profile_stats {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.mockup_profile_stats_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: var(--obvodka-vybora);
}
.mockup_profile_groups {
  width: 100%;
  height: auto;
  margin-top: 20px;

}
.mockup_profile_groups_up {
  display: flex;
  align-items: center;
}
.mockup_profile_groups_up_title {
  font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
color: var(--obvodka-vybora);
}
.mockup_profile_groups_up_hide {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
margin-left: auto;
cursor: pointer;
transition: all .5s;
}
.mockup_profile_groups_up_hide:hover{
  opacity: .5;
}
.mockup_profile_groups_items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.mockup_profile_groups_item {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
outline: none;
border: none;
padding: 12px 16px;
background: var(--seraya-plashka);
border-radius: 16px;
width: 100%;

}
.mockup_profile_groups_item::placeholder{
  color: var(--obvodka-vybora);
}

.mockup .builder_sections {
  grid-template-columns: 471px calc(100% - 985px) 514px;
  align-items: start;
}

.mockup .builder_category {
  height: auto;
  align-self: start;
  contain: layout style;
  overflow: visible;
}

html:has(section.mockup) {
  scrollbar-gutter: stable;
}

.mockup_category_panels {
  width: 100%;
  margin-top: 20px;
}

.mockup_category_panels > * {
  display: none;
  width: 100%;
  margin-top: 0;
}

.mockup_category_panels > .is-active-panel {
  display: block;
}



.mockup_category_setting_avatar {
  width: 100%;
}
.mockup_category_setting_bg {
  width: 100%;
}

.mockup_category_setting_avatar .builder_category_setting_bg_backgrounds{
  grid-template-columns: repeat(3, 1fr);
}

.mockup_category_setting_vitrines {
  width: 100%;
  height: auto;
}

.mockup_category_setting_vitrines_blocks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.mockup_category_setting_vitrines_block {
  width: 100%;
  height: auto;
}
.mockup_category_setting_vitrines_block_item {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--seraya-plashka);
  cursor: pointer;
}
.mockup_category_setting_vitrines_block_item_content {
  padding: 16px;
  display: flex;
  align-items: center;
}
.mockup_category_setting_vitrines_block_item_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
margin-right: 12px;
}
.mockup_category_setting_vitrines_block_item_checkbox {
  margin-left: auto;
}

.mockup_category_setting_vitrines_block_item svg{
  vertical-align: middle;
  margin-left: 12px;
}





.mockup_category_setting_badges {
  width: 100%;
}

.mockup_category_setting_badges_all {
  width: 100%;
  height: auto;
  margin-top: 20px;
}
.mockup_category_setting_badges_all_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.mockup_category_setting_badges_all_items {
  display: flex;
  align-items: center;
  gap: 10.33px;
  margin-top: 8px;
}
.mockup_category_setting_badges_all_item {
  border-radius: 16px;
max-width: 100px;
max-height: 100px;
object-fit: cover;
cursor: pointer;
transition: all .5s;
}
.mockup_category_setting_badges_all_item:hover{
  opacity: .5;
}
.mockup_category_setting_badges_favorite {
  width: 100%;
  height: auto;
  margin-top: 20px;

}
.mockup_category_setting_badges_favorite_title {
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}
.mockup_category_setting_badges_favorite_blocks {
  display: grid;
  grid-template-columns: 140px calc(100% - 156px);
  align-items: center;
margin-top: 8px;
gap: 16px;
}
.mockup_category_setting_badges_favorite_image {
  vertical-align: middle;
  max-width: 140px;
max-height: 140px;
object-fit: cover;
border-radius: 16px;
cursor: pointer;
transition: all .5s;
}
.mockup_category_setting_badges_favorite_image:hover{
  opacity: .5;
}
.mockup_category_setting_badges_favorite_items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: auto;
}
.mockup_category_setting_badges_favorite_tittle,
.mockup_category_setting_badges_favorite_xp {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  color: var(--obvodka-vybora);
outline: none;
border: none;
padding: 15px 16px;
background: var(--seraya-plashka);
border-radius: 16px;
width: 100%;
height: auto;
}
.mockup_category_setting_badges_favorite_tittle::placeholder,
.mockup_category_setting_badges_favorite_xp::placeholder {
  color: var(--obvodka-vybora);
}
.mockup_category_setting_badges .builder_category_setting_bg_filter{
display: none;
}


.builder_category_setting_category_select {
  width: 100%;
  position: relative;
}
.builder_category_setting_category_select_selected {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  color: var(--obvodka-vybora);
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.builder_category_setting_category_select_selected:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}
.builder_category_setting_category_select.is-open .builder_category_setting_category_select_selected {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.builder_category_setting_category_select_items {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 220px;
  height: 333px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015) 60%, rgba(255, 255, 255, 0)),
    rgba(14, 16, 20, 0.86);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform-origin: top left;
  animation: builderCategorySelectIn 160ms ease both;
}

@keyframes builderCategorySelectIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.builder_category_setting_category_select.is-open .builder_category_setting_category_select_items {
  display: block;
}

.builder_category_setting_category_select.is-open .builder_category_setting_category_select_selected svg {
  transform: rotate(180deg);
}

.builder_category_setting_category_select_selected svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.builder_category_setting_category_select_items_content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 6px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.builder_category_setting_category_select_items_content::-webkit-scrollbar {
  width: 6px;
}
.builder_category_setting_category_select_items_content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.builder_category_setting_category_select_items_content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.builder_category_setting_category_select_item_title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 6px;
}
.builder_category_setting_category_select_item_item_select {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.builder_category_setting_category_select_item_item_select:hover {
  background: rgba(255, 255, 255, 0.05);
}
.builder_category_setting_category_select .mockup_category_setting_vitrines_block_item_checkbox {
  margin-left: 0;
}
.builder_category_setting_category_select_item_item_select.is-active {
  background: rgba(255, 255, 255, 0.08);
}
.builder_category_setting_category_select_item_item_select.is-active .builder_category_setting_category_select_item_item_select_title {
  color: #fff;
}
.builder_category_setting_category_select_item_item_select_title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  color: var(--obvodka-vybora);
  line-height: 1.2;
}

.builder_category_setting_category_select_item_select_items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}




.mockup_profile .builder_category_text_block_item_select{
  width: 100%;
  margin-top: 8px;
}


.mockup_profile_groups_create{
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.mockup_profile_groups_create_title{
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.5);
}

.mockup_profile_groups_create_input{
  width: 100%;
  height: auto;
  margin-top: 8px;
  font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--obvodka-vybora);
padding: 16px;
border-radius: 16px;
background: var(--seraya-plashka);
outline: none;
border: none;
}
.mockup_profile_groups_create_input::placeholder{
  color: #8d8d8d;
}

.mockup_profile_groups_create_button{
  margin-top: 12px;
  width: 100%;
  height: auto;
  outline: none;
  border: none;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  color: #000;
  padding: 12px 20px;
  background: var(--obvodka-vybora);
  border-radius: 16px;
  cursor: pointer;
  transition: all .5s;
}
.mockup_profile_groups_create_button:hover{
  opacity: .5;
}














.builder_category_setting_bg_background_selected {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.builder_category_character_load_button.is-dragover {
  border-color: var(--obvodka-vybora);
  background: rgba(255, 255, 255, 0.08);
}

.builder .inputRange,
.optimizer .inputRange {
  width: 100%;
  max-width: 100%;
}

.builder_category_text_block_item_select.is-open .builder_category_text_block_item_select_selected {
  border-radius: 16px;
}

.header_burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 10px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  flex-shrink: 0;
}

.header_burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

body.menu-open .header_burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.menu-open .header_burger span:nth-child(2) {
  opacity: 0;
}

body.menu-open .header_burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header_mobile_overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.header_mobile_overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.header_mobile_panel {
  width: min(320px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 24px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid var(--obvodka);
  transform: translateX(24px);
  transition: transform 0.3s;
}

.header_mobile_overlay.is-open .header_mobile_panel {
  transform: translateX(0);
}

.header_mobile_panel_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.header_mobile_logo {
  height: 32px;
  width: auto;
}

.header_mobile_close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.header_mobile_nav_title {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.header_mobile_nav_list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header_mobile_nav_list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  transition: background 0.2s;
}

.header_mobile_nav_list a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.header_mobile_nav_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header_mobile_unread_badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #34d399;
  color: #06130d;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.header_mobile_balance {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.header_mobile_language {
  margin-top: 18px;
}

.header_mobile_language .header_language_menu,
.header_mobile_language .header_language_trigger {
  width: 100%;
}

.header_mobile_language .header_language_trigger {
  justify-content: space-between;
  min-height: 44px;
  border-radius: 16px;
  padding-inline: 14px;
}

.header_mobile_language .header_language_dropdown {
  left: 0;
  right: 0;
  width: 100%;
}

body.menu-open {
  overflow: hidden;
}

.page_main,
.builder_main,
.gif_edit_main,
.optimizer_main,
.authorization_main {
  min-width: 0;
}

@media (min-width:1370px) and (max-width:1919px){
  .builder_sections {
    grid-template-columns: 380px minmax(0, 1fr) 320px;
  }
  .builder_illustration_up_content {
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
  }
  .builder_illustration_up_title {
    flex: 1 1 100%;
  }
  .builder_illustration_up_navs {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .builder_illustration_up_download {
    margin-left: 0;
    flex: 1 1 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 16px 20px;
  }
  .builder_category_setting_bg_filters{
    flex-direction: column;
    gap: 8px;
  }
  .builder_category_setting_bg_filter{
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .header{
    left: 10px;
  }
  .builder_illustration_up_content{
    gap: 16px;
  }
  .main_intro .container{
    padding: 0 20px;
  }
  .mockup .builder_sections {
    grid-template-columns: 471px calc(100% - 400px) ;
    align-items: start;
}
.main_intro_item_image{
  max-width: 700px;
}
.main_intro_items{
  gap: 50px;
}
.main_intro_subtitle{
  text-align: center;
}

.main_intro_item_button{
  display: block;
  margin: 0 auto;
  margin-top: 70px;
}
.main_intro_subtitle br{
  display: none;
}
.main_intro_title{
  font-size: 50px;
  text-align: center;
}
}

@media (min-width:1200px) and (max-width:1369px){
  .main_intro_item_image{
    max-width: 600px;
  }
  .main_intro_subtitle{
    font-size: 20px;
    text-align: left!important;
    margin-top: 35px;
  }
  .main_intro_item_button{
    margin-left: 0px;
  }
  .main_intro_subtitle br{
    display: none;
  }
  .main_intro_title{
    font-size: 50px;
  }
  .builder_sections {
    grid-template-columns: 340px minmax(0, 1fr) 280px;
  }
  .builder_illustration_up_content {
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
  }
  .builder_illustration_up_navs {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .builder_illustration_up_download {
    margin-left: 0;
    flex: 1 1 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 16px 20px;
  }
  .builder_category_text_colors_blocks{
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  }
  .builder_category_setting_bg_filters{
    flex-direction: column;
    gap: 8px;
  }
  .builder_category_setting_bg_filter{
    width: 100%;
    text-align: center;
    justify-content: center;
    text-align: center;
  }
  .header{
    left: 10px;
  }
  .builder_illustration_up_title{
    display: none;
  }
  .mockup .builder_sections {
    grid-template-columns: 471px calc(100% - 400px) ;
    align-items: start;
}
}

@media (max-width: 1750px) {
  .builder_illustration_up_content {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  .builder_illustration_up_title {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .builder_illustration_up_navs {
    justify-content: center;
  }

  .builder_illustration_up_download {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 16px 20px;
  }
}




@media (max-width: 768px) {

  section.page.builder:not(.mockup) .builder_shell_background_media--ambient {
    filter: none;
    opacity: .5;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  section.page.builder:not(.mockup) .builder_category,
  section.page.builder:not(.mockup) .builder_illustration,
  section.page.builder:not(.mockup) .builder_layers {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.004)),
      rgba(5, 5, 5, 0.74);
  }

.profile_sections{
  flex-direction: column-reverse;
  gap: 20px;
}
.profile_section_main{
  margin: 0 auto;
  width: 100%!important;
  max-width: 450px;
}
.profile_section_right{
  margin: 0 auto;
}

  .builder_illustration_up_content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .builder_illustration_up_navs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
    /* Three rows tall here, so the pill radius would round off as a half-circle. */
    border-radius: 22px;
  }

  .builder_illustration_up_button,
  .builder_avatar_mode_button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Two per row on phones: long locales wrap instead of turning into "Uyarl…". */
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-size: 12px;
    line-height: 1.15;
    box-sizing: border-box;
  }

  .builder_illustration_up_download {
    width: 100%;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Full-width trigger and menu so both stay reachable by thumb. */
  .builder_illustration_header .builder_gif_mode {
    flex: 1 1 100%;
  }
  .builder_gif_mode_trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 42px;
  }
  .builder_gif_mode_menu {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
  .builder_gif_mode_item {
    min-height: 44px;
    align-content: center;
  }
}
  @media (max-width: 1400px) {
.container{
  padding: 0px 20px;
}
.main_intro_subtitle{
  text-align: center;
}
.main_intro_item_button{
  display: block;
  margin: 0 auto;
  margin-top: 35px;
}
.main_intro_items{
  padding-bottom: 50px;
}

  .builder .container {
    padding-left: 110px;
    padding-right: 32px;
  }

  .page .container {
    padding-left: 110px;
    padding-right: 32px;
    box-sizing: border-box;
  }
}

@media (min-width: 993px) and (max-width: 1536px) {
  section.header {
    left: 10px;
    transform: translateX(calc(-100% + 28px));
    opacity: .62;
    transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
  }

  section.header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -26px;
    width: 26px;
  }

  section.header:hover,
  section.header:focus-within {
    transform: translateX(0);
    opacity: 1;
  }

  .builder .container,
  .page .container {
    padding-left: 48px !important;
  }
}

@media (max-width: 1200px) {
  .header_main {
    width: calc(100% - 48px);
    left: 24px;
    right: 24px;
  }
  .container{
    padding: 0px 20px;
  }
  .builder_sections{
    min-height: auto;
  }

  .header_main .container {
    width: 100%;
  }

  section.header {
    left: 12px;
    top: 12px;
    height: calc(100% - 24px);
    max-width: 72px;
  }

  section.header .header_main_item_left_logo {
    width: 44px;
    height: auto;
  }

  .builder .container,
  .page .container {
    padding-left: 96px;
    padding-right: 20px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .header_main_item_left {
    gap: 32px;
  }

  .header_main_item_left_navs,
  .header_main_item_right_navs {
    gap: 24px;
  }

  section.header .header_main_item_left {
    gap: var(--sidebar-group-gap);
  }

  section.header .header_main_item_left_navs,
  section.header .header_main_item_right_navs {
    gap: var(--sidebar-nav-gap);
  }

  .main_intro {
    margin-top: 140px;
  }

  .main_intro_items {
    flex-direction: column;
    gap: 40px;
  }

  .main_intro_item:first-child {
    max-width: 100%;
  }

  .main_intro_item:last-child {
    order: -1;
    margin-left: 0;
    width: 100%;
  }

  .main_intro_item_image {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .main_intro_item_image_lines {
    right: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 700px);
    max-width: 100%;
    height: auto;
  }

  .main_intro_title {
    font-size: 42px;
    text-align: center;
  }

  .main_intro_subtitle br {
    display: none;
  }

  .builder_sections,
  .mockup .builder_sections {
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 20px;
    min-width: 0;
  }

  .builder_sections > *,
  .builder_category,
  .builder_illustration,
  .builder_layers,
  .builder_category_content,
  .builder_illustration_content,
  .builder_layers_content {
    min-width: 0;
    max-width: 100%;
  }

  section.page.builder:not(.mockup) .builder_illustration {
    order: 1;
  }

  section.page.builder:not(.mockup) .builder_category {
    order: 3;
  }

  section.page.builder:not(.mockup) .builder_layers {
    order: 2;
  }

  .builder_category_up {
    flex-wrap: wrap;
    gap: 12px;
  }

  .builder_category_up_items {
    margin-left: 0;
  }

  .builder_category_navs_content {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: stretch;
    gap: 4px;
  }

  .builder_category_nav {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }

  .builder_category_setting_bg_filters {
    flex-wrap: wrap;
  }

  .builder_category_setting_bg_filter {
    white-space: normal;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .builder_category_setting_bg_backgrounds {
    max-height: none;
    padding-right: 0;
  }

  .builder_illustration_up_content {
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
  }

  .builder_illustration_up_title {
    white-space: normal;
    flex: 1 1 100%;
    text-align: center;
  }

  .builder_illustration_up_navs {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .builder_illustration_up_download {
    margin-left: 0;
    flex: 1 1 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 16px 20px;
  }

  .builder_illustration_delete_bg {
    max-width: 100%;
  }

  .builder_illustration_delete_bg_buttons {
    flex-wrap: wrap;
  }

  .builder_illustration_delete_bg_button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
  }

  .builder_category_setting_input,
  .builder_category_text_block_input,
  .faq_question_input,
  .faq_question_textarea {
    box-sizing: border-box;
    max-width: 100%;
  }

  .builder_main,
  .page_main {
    overflow-x: clip;
  }

  .builder_category_text_block_items {
    flex-wrap: wrap;
  }

  .builder_category_text_block_item:first-child {
    width: 100%;
    flex: 1 1 100%;
  }

  .builder_category_text_block_item_button {
    flex-shrink: 0;
  }

  .builder_category_text_colors_blocks {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  }

  .builder_category_text_color_button {
    width: 100%;
    max-width: 48px;
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
  }

  .builder_category_border_border_rect_items {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 12px;
  }

  .builder_category_border_border_rect_item {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 76px;
  }

  .builder_category_text_orientation_buttons {
    flex-wrap: wrap;
  }

  .builder_category_text_orientation_button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .inputRange {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

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

  .optimizer_limits_buttons,
  .optimizer_frames_buttons {
    flex-wrap: wrap;
  }

  .optimizer_limits_buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .donate_plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .donate_credits_content {
    flex-wrap: wrap;
    gap: 16px;
  }

  .donate_credits_title {
    white-space: normal;
    flex: 1 1 100%;
  }

  .donate_credits_items {
    flex-wrap: wrap;
  }

  .profile_main_infos {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .authorization_main_modern {
    padding: 40px 16px;
  }

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

  .authorization_email_card,
  .authorization_provider_card {
    padding: 22px;
    border-radius: 20px;
  }

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

  .profile_main_history_blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile_main_up_content {
    flex-wrap: wrap;
    gap: 16px;
  }

  .profile_main_up_exit {
    margin-left: 0;
  }

  .faq_questions_content {
    padding: 24px;
  }

  .page_subtitle br,
  .donate_subtitle br {
    display: none;
  }

  .donate_title {
    font-size: 28px;
  }

  .gif_edit_title,
  .optimizer_main_title {
    font-size: 28px;
  }

  .gif_edit_main_up_items {
    flex-wrap: wrap;
    gap: 12px;
  }

  .gif_edit_main_up_title {
    flex: 1 1 100%;
  }

  .gif_edit_main_up_buttons {
    margin-left: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .gif_edit_main_up_download {
    margin-left: 0;
    flex: 1 1 100%;
    text-align: center;
  }

  .gif_edit_main_layers_block {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .gif_edit_main_layers_block_title {
    white-space: normal;
  }

  .gif_edit_main_media_types_one_items {
    flex-direction: column;
  }

  .gif_edit_main_media_types_one_item {
    min-height: 200px;
  }

  .gif_edit_main_media_main_settings_items {
    flex-wrap: wrap;
    gap: 20px;
  }

  .gif_edit_main_media_main_settings_fps {
    margin-left: 0;
    width: 100%;
  }

  .gif_edit_main_colors_main_blocks {
    grid-template-columns: 1fr;
  }

  .gif_edit_main_colors_action {
    margin-left: 0;
  }

  .gif_edit_main_colors_presets {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .gif_edit_main_patcher_blocks {
    flex-direction: column;
    gap: 24px;
  }

  .gif_edit_main_patcher_content {
    padding: 32px 24px;
  }

  .optimizer_main_upload_main {
    min-height: 280px;
  }

  .optimizer_main_upload_main_compact {
    min-height: 96px;
  }

  .optimizer_compare {
    padding: 20px;
  }

  .optimizer_compare_header {
    flex-direction: column;
  }

  .optimizer_compare_badges {
    margin-left: 0;
  }

  .optimizer_compare_stage {
    width: 100%;
    max-height: none;
  }

  .optimizer_main_upload_main_stats_content {
    padding: 24px;
  }

  .authorization_rect_content {
    padding: 40px 32px;
  }

  .authorization_rect_title {
    font-size: 32px;
  }

  .profile_main_info_plan_content {
    flex-wrap: wrap;
    gap: 20px;
  }

  .profile_main_info_plan_item:last-child {
    margin-left: 0;
    width: 100%;
  }

  .profile_main_info_plan_date {
    text-align: left;
  }

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

  .profile_main_saved_up {
    flex-wrap: wrap;
    gap: 8px;
  }

  .profile_main_saved_up_autosave {
    margin-left: 0;
    width: 100%;
  }

  .faq_main {
    max-width: 100%;
  }

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

  .faq_side {
    display: flex;
    flex-direction: column;
  }

  .page.sitemap .page_main {
    max-width: 100%;
  }

  .legal_page .page_main {
    max-width: 100%;
  }

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

  .legal_toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  section.header {
    display: none;
  }

  .builder .container,
  .page .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .faq_guides_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq_guides {
    padding: 20px;
  }

  .legal_toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header_main_item_left_navs,
  .header_main_item_right_navs {
    display: none;
  }

  .header_main_item_right_nav_balance {
    display: none;
  }

  .header_burger,
  .header_burger--fixed {
    display: flex;
  }

  .header_burger--fixed {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1;
  }

  .header_main_item_left {
    width: 100%;
    gap: 16px;
  }

  .header_main_items {
    flex-wrap: wrap;
  }

  .header_main_item_right {
    display: none;
  }

  .main_intro {
    margin-top: 110px;
  }

  .main_intro_title {
    font-size: 40px;
    text-align: center;
  }

  .main_intro_subtitle {
    font-size: 14px;
    text-align: center;
    margin-top: 35px;
  }

  .page_title,
  .donate_title {
    font-size: 28px;
  }

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

  .profile_main_info_content {
    padding: 24px;
  }

  section.header + section.page .page_main,
  section.header + section.builder .builder_main {
    padding-top: 50px;
  }

  .gif_edit_title,
  .optimizer_main_title {
    font-size: 24px;
  }

  .authorization_main {
    padding: 72px 16px 24px;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .authorization_rect {
    max-width: 100%;
  }

  .authorization_rect_content {
    padding: 32px 20px;
  }

  .authorization_rect_title {
    font-size: 26px;
  }

  .authorization_rect_subtitle {
    font-size: 16px;
  }

  .profile_main_up_nickname {
    font-size: 28px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .profile_main_up_content {
    flex-wrap: wrap;
    gap: 16px;
  }

  .profile_main_info_support_content {
    flex-wrap: wrap;
    gap: 12px;
  }

  .profile_main_info_support_item:last-child {
    margin-left: 0;
    width: 100%;
  }

  .profile_main_info_support_item_button {
    width: 100%;
    text-align: center;
  }

  .profile_main_history_rect_item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .profile_main_history_rect_item_texts {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .profile_main_history_rect_item_download {
    margin-left: 0;
  }

  .profile_main_history_rect_item_actions {
    width: 100%;
    justify-content: flex-end;
  }

  .optimizer_frames_buttons {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .header_main {
    width: calc(100% - 24px);
    left: 12px;
    top: 12px;
    border-radius: 16px;
  }

  .builder_editor_stage {
    margin-left: 0px!important;
  }

  .builder_editor_viewport {
    overflow: hidden;
    padding-bottom: 8px;
  }



  .header_main_content {
    padding: 12px 16px;
  }

  .header_main_item_left_logo {
    height: 28px;
    width: auto;
  }

  .main_intro_item_button {
    display: block;
    margin: 0 auto;
    margin-top: 35px;
  }

  .main_intro_item_button span{
    font-size: 18px;
    width: 100%;
  }

  .builder .container,
  .page .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .builder_category_content,
  .builder_illustration_content,
  .builder_layers_content {
    padding: 16px;
  }

  .builder_category_title,
  .builder_section_title {
    font-size: 20px;
    flex-wrap: wrap;
  }

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

  .donate_credits_items {
    flex-direction: column;
  }

  .faq_questions_content {
    padding: 16px;
  }

  .faq_guides {
    padding: 16px;
  }

  .faq_section_title {
    font-size: 22px;
  }

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

  .faq_side {
    display: flex;
    flex-direction: column;
  }

  .faq_item_up {
    padding: 16px;
    font-size: 15px;
  }

  .faq_item_text {
    padding: 0 16px 16px;
    font-size: 14px;
  }

  .faq_panel {
    padding: 18px;
  }

  .legal_meta {
    justify-content: stretch;
  }

  .legal_meta span {
    width: 100%;
    text-align: center;
  }

  .legal_notice,
  .legal_section {
    border-radius: 16px;
  }

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

  .legal_toc a {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .optimizer_main_compression_content {
    padding: 20px;
  }

  .gif_edit_main_load_content {
    padding: 32px 20px;
  }

  .gif_edit_main_layers_content,
  .gif_edit_main_media_content,
  .gif_edit_main_colors_content {
    padding: 20px;
  }

  .gif_edit_main_layers_block_item_content {
    padding: 24px 16px;
  }

  .gif_edit_main_up_button {
    padding: 12px 16px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .gif_edit_main_media_main_timeline_content {
    padding: 20px 16px;
  }

  .gif_edit_main_media_main_settings_size_buttons,
  .gif_edit_main_media_main_settings_fps_buttons {
    flex-wrap: wrap;
  }

  .authorization_rect {
    border-radius: 24px;
  }

  .authorization_rect_content {
    padding: 24px 16px;
  }

  .authorization_rect_icon {
    width: 88px;
    height: 88px;
  }

  .authorization_rect_button {
    font-size: 16px;
    padding: 16px;
  }

  .donate_plan_content {
    padding: 24px 20px;
  }

  .donate_credits_content {
    padding: 20px;
  }

  .profile_main_up_content {
    padding: 20px;
  }

  .profile_main_empty_text {
    font-size: 14px;
  }

  .profile_main_info_plan_status {
    font-size: 36px;
  }

  .page.sitemap .sitemap_item {
    padding: 14px 16px;
  }

  .header_main_item_left {
    gap: 12px;
    justify-content: space-between;
    width: 100%;
  }

  .header_main .header_burger {
    margin-left: auto;
  }
  .mockup_category_setting_badges_all_items{
    flex-wrap: wrap;
  }

  .profile_main_banner_small{
    max-width: 60px!important;
  }
  .profile_main_banner_big {
    width: calc(100% - 60px)!important;
    height: 100%;
}
  .profile_main_workshop_main_title{
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .main_intro_title {
    font-size: 26px;
    text-align: center;
  }
  .profile_main_banners{
    height: var(--mockup-profile-main-banners-height, 400px)!important;
  }
  .mockup_profile_groups_items{
    grid-template-columns: repeat(1, 1fr);
  }
  .main_intro_item_button span{
    padding: 16px;
    display: block;
    margin-left: 16px;
    width: calc(100% - 32px);
    font-size: 14px;
  }
  .main_intro_item_button{
    width: 100%;
  }
  .builder_category_title {
    font-size: 18px;
  }

  .builder_category_nav {
    width: 100%;
    height: 54px;
  }
  section.page.builder:not(.mockup) .builder_category_nav {
    width: 100%;
    height: 54px;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 14px;
  }
  section.page.builder:not(.mockup) .builder_category_nav svg {
    width: 20px;
    height: 20px;
  }
  section.page.builder:not(.mockup) .builder_category_nav_label {
    font-size: 7px;
    line-height: 1;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .builder_category_title, .builder_section_title{
    font-size: 17px;
  }

  .builder_category_border_border_rect_items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .builder_category_text_colors_blocks {
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  }

  .builder_category_text_orientation_buttons {
    flex-direction: column;
  }

  .builder_category_text_orientation_button {
    width: 100%;
  }

  .header_mobile_overlay {
    padding: 0;
  }

  .header_mobile_panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .gif_edit_main_up_buttons {
    flex-direction: column;
    width: 100%;
  }

  .gif_edit_main_up_button {
    width: 100%;
  }

  .gif_edit_title,
  .optimizer_main_title,
  .donate_title {
    font-size: 22px;
  }

  .authorization_rect_title {
    font-size: 22px;
  }

  .faq_guide_card {
    padding: 14px;
  }

  .faq_guide_card_steps li {
    font-size: 12px;
  }

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

  .faq_contact_action {
    width: fit-content;
  }

  .profile_main_up_nickname {
    font-size: 24px;
  }

  .profile_main_info_title {
    font-size: 20px;
  }

  .profile_main_history_title {
    font-size: 20px;
  }

  .optimizer_main_upload_main_title {
    font-size: 16px;
  }

  .optimizer_main_upload_main_text {
    font-size: 14px;
  }

  .gif_edit_main_load_main_title,
  .optimizer_main_upload_main_title {
    font-size: 16px;
    word-break: break-word;
  }

  .donate_plan_price {
    font-size: 36px;
  }
}

.page.sitemap .page_main {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 80px;
}

.sitemap_main {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sitemap_group_title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}

.sitemap_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sitemap_item {
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--seraya-plashka);
  transition: border-color 0.2s, background 0.2s;
}

.sitemap_item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

.sitemap_item--current {
  border-color: var(--obvodka-vybora);
  background: rgba(255, 255, 255, 0.08);
}

.sitemap_link {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

.sitemap_link:hover {
  text-decoration: underline;
}

.sitemap_desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.legal_page .page_main {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 90px;
}

.legal_header {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.legal_eyebrow {
  width: fit-content;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255,255,255,.05);
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.legal_meta {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.legal_meta span {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0,0,0,.22);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.54);
}

.legal_notice {
  margin: 34px auto 0;
  max-width: 900px;
  border: 1px solid rgba(120,180,255,.2);
  border-radius: 18px;
  padding: 18px 20px;
  background: rgba(70,120,220,.1);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.legal_notice p {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(225,235,255,.9);
}

.legal_layout {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.legal_toc {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.legal_toc a {
  border-radius: 12px;
  padding: 10px 11px;
  font-family: var(--font-family);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.58);
  text-decoration: none;
  transition: background .2s, color .2s;
}

.legal_toc a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}

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

.legal_section {
  scroll-margin-top: 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 24px;
  background: rgba(0,0,0,.3);
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.legal_section h2 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.18;
  color: #fff;
}

.legal_section_body {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal_section p,
.legal_section li {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.66);
}

.legal_section p {
  margin: 0;
}

.legal_section strong {
  color: rgba(255,255,255,.92);
  font-weight: 900;
}

.legal_section ul,
.legal_section ol {
  margin: 0;
  padding-left: 20px;
}

.legal_section li + li {
  margin-top: 8px;
}

.legal_section a,
.legal_details a {
  color: rgba(255,255,255,.9);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.28);
  text-underline-offset: 3px;
}

.legal_section a:hover,
.legal_details a:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.75);
}

.legal_details {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255,255,255,.04);
}

.legal_details p {
  margin: 0;
  word-break: break-word;
}

.site_footer {
  position: relative;
  width: 100%;
  padding: 24px 0 34px;
  background: rgba(0, 0, 0, 0.18);
}

.site_footer .container {
  max-width: 1435px;
}

.site_footer_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
}

.site_footer_brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site_footer_brand strong,
.site_footer_brand span,
.site_footer_nav a {
  font-family: var(--font-family);
}

.site_footer_brand strong {
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255,255,255,.8);
}

.site_footer_brand span {
  max-width: 520px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.38);
}

.site_footer_nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.site_footer_nav a {
  font-weight: 800;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.54);
  text-decoration: none;
  transition: color .2s;
  white-space: nowrap;
}

.site_footer_nav a:hover {
  color: #fff;
}

.site_footer_language {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}

.site_footer_language a {
  min-width: 38px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.58);
  text-decoration: none;
  transition: color .2s, background .2s;
}

.site_footer_language a:hover {
  color: #fff;
}

.site_footer_language a.is-active {
  color: #050505;
  background: #fff;
}

@media (max-width: 1200px) {
  .legal_page .page_main {
    max-width: 100%;
  }

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

  .legal_toc {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .legal_toc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal_section {
    padding: 20px;
  }

  .legal_section h2 {
    font-size: 20px;
  }
}

@media (max-width: 575px) {
  .legal_meta {
    justify-content: stretch;
  }

  .legal_meta span {
    width: 100%;
    text-align: center;
  }

  .legal_notice,
  .legal_section {
    border-radius: 16px;
  }

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

  .legal_toc a {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .site_footer_inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .site_footer_nav {
    justify-content: flex-start;
  }
}

.header_main_item_left_logo {
  cursor: pointer;
}

.header_main_item_right_nav_balance {
  cursor: pointer;
}

.gif_edit_main_up_download {
  cursor: pointer;
}

.optimizer_main_upload_main.has-file,
.gif_edit_main_load_main.has-file,
.gif_edit_main_layers_block_item.has-file,
.builder_category_character_load_button.has-file {
  border-color: var(--obvodka-vybora);
}

.profile_main_history_rect_item_download {
  cursor: pointer;
}

.builder_illustration_main {
  width: 100%;
  margin-top: 20px;
  min-width: 0;
}

.builder_editor {
  width: 100%;
  min-width: 0;
}

.builder_editor_viewport {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  padding: 8px 0 16px;
  transition: padding .82s cubic-bezier(0.16, 1, 0.3, 1);
}

.builder_editor_stage.is-active {
  flex-shrink: 0;
}

.builder_editor_stage {
  display: none;
  width: 100%;
  min-width: 0;
  overflow: visible;
  transition:
    width .82s cubic-bezier(0.16, 1, 0.3, 1),
    height .82s cubic-bezier(0.16, 1, 0.3, 1);
}

.builder_editor_stage.is-active {
  display: block;
}

.builder_editor_composite {
  position: relative;
  margin: 0 auto;
  background: #000;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    width .82s cubic-bezier(0.16, 1, 0.3, 1),
    height .82s cubic-bezier(0.16, 1, 0.3, 1),
    top .82s cubic-bezier(0.16, 1, 0.3, 1),
    left .82s cubic-bezier(0.16, 1, 0.3, 1),
    transform .82s cubic-bezier(0.16, 1, 0.3, 1);
  animation: builderShowcaseSurfaceIn .82s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.builder_workshop_preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 54px),
    #171717;
  border: 1px solid rgba(255, 255, 255, 0.075);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: none;
  animation: builderWorkshopPreviewIn .78s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.builder_workshop_preview_title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  color: rgba(255, 255, 255, 0.92);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1;
  background: rgba(23, 23, 23, 0.98);
  z-index: 2;
}

.builder_workshop_preview_thumb {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(144, 186, 60, 0.85);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.builder_workshop_preview_thumb img,
.builder_workshop_preview_thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.builder_workshop_preview_footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    rgba(0, 0, 0, 0.48);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.builder_workshop_preview::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 58px;
  bottom: 40px;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 20px 38px rgba(0, 0, 0, 0.28);
}

@keyframes builderWorkshopPreviewIn {
  from {
    opacity: 0;
    filter: brightness(.92);
  }

  to {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes builderShowcaseSurfaceIn {
  from {
    opacity: .96;
    filter: brightness(.96);
  }

  to {
    opacity: 1;
    filter: brightness(1);
  }
}

.builder_editor_composite--artwork {
  display: flex;
  gap: 24px;
  width: 630px;
  height: 824px;
}

.builder_editor_composite--core {
  overflow: hidden;
}

section.page.builder.builder--background-loading .builder_editor_composite--core {
  isolation: isolate;
  animation: builderBackgroundLoadingBorder 2.4s ease-in-out infinite;
}

section.page.builder.builder--background-loading .builder_editor_composite--core::before,
section.page.builder.builder--background-loading .builder_editor_composite--core::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform;
}

/* Wide ambient glow sweep */
section.page.builder.builder--background-loading .builder_editor_composite--core::before {
  z-index: 27;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(210, 210, 210, 0.07) 25%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(225, 225, 225, 0.2) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    rgba(210, 210, 210, 0.07) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
  animation: builderShimmerSweep 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Narrow bright "scanner" highlight, offset by 0.3s */
section.page.builder.builder--background-loading .builder_editor_composite--core::after {
  z-index: 28;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.14) 47%,
    rgba(255, 255, 255, 0.48) 50%,
    rgba(255, 255, 255, 0.14) 53%,
    rgba(255, 255, 255, 0) 60%
  );
  mix-blend-mode: screen;
  animation: builderShimmerSweep 2s cubic-bezier(0.4, 0, 0.6, 1) 0.3s infinite;
}

@keyframes builderShimmerSweep {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(300%); }
}

@keyframes builderBackgroundLoadingBorder {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 0 24px rgba(255, 255, 255, 0.03);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
      inset 0 0 48px rgba(215, 215, 215, 0.075);
  }
}

.builder_editor_background,
.builder_editor_background_empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.builder_editor_background {
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: none;
}

.builder_editor_background_empty {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #050b12;
  background-size: 48px 48px;
}

.builder_editor_zone_overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.builder_editor_guide-layer {
  position: absolute;
  z-index: 30;
  overflow: visible;
  pointer-events: none;
  transform-origin: top left;
  transition:
    width .82s cubic-bezier(0.16, 1, 0.3, 1),
    height .82s cubic-bezier(0.16, 1, 0.3, 1),
    top .82s cubic-bezier(0.16, 1, 0.3, 1),
    left .82s cubic-bezier(0.16, 1, 0.3, 1),
    transform .82s cubic-bezier(0.16, 1, 0.3, 1);
}

.builder_editor_zone_overlay--workshop {
  z-index: 16;
}

.builder_editor_filter_defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.builder_editor_effect-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.builder_editor_composition-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.builder_editor_frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.builder_editor_frame-part {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.builder_editor_frame-gap {
  position: absolute;
  top: 0;
  background: #000;
  pointer-events: none;
  z-index: 0;
}

.builder_editor_frame-part img,
.builder_editor_frame-part video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.builder_editor_adaptive {
  width: min(630px, 100%);
  max-width: 100%;
  margin: 0 auto 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(8, 22, 34, 0.72);
}

.builder_editor_adaptive_group {
  margin-bottom: 10px;
}

.builder_editor_adaptive_group > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.builder_editor_adaptive_buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.builder_editor_adaptive_buttons button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.builder_editor_adaptive_buttons button:hover,
.builder_editor_adaptive_buttons button.is-active {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.builder_editor_adaptive_up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.builder_editor_adaptive_up strong {
  font-size: 13px;
}

.builder_editor_adaptive_range {
  width: 100%;
  accent-color: #fff;
}

.builder_editor_slot {
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
}

.builder_editor_slot--main {
  width: 506px;
  height: 824px;
}

.builder_editor_slot--side {
  width: 100px;
  height: 824px;
}

.builder_editor_slot-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.builder_editor_size-label {
  position: absolute;
  z-index: 4;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.builder_editor_size-label--tl {
  top: -28px;
  left: 0;
}

.builder_editor_size-label--tr {
  top: -28px;
  right: 0;
}

.builder_editor_layer-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.builder_editor_layer-wrap--text {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.builder_editor_layer-wrap--text.is-selected {
  z-index: 24;
}

.builder_editor_layer-wrap--text.is-editing {
  z-index: 26;
}

.builder_editor_layer-wrap--text.is-interactive {
  pointer-events: auto;
}

.builder_editor_upload-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.builder_editor_upload-hint:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

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

.builder_editor_item {
  position: absolute;
  z-index: 2;
  touch-action: none;
  outline: none;
}

.builder_editor_item[hidden] {
  display: none !important;
}

.builder_editor_item-frame {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.builder_editor_item.is-selected .builder_editor_item-frame {
  outline: 1px dashed rgba(255, 255, 255, 0.9);
  outline-offset: -1px;
}

.builder_editor_item-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.builder_editor_item[data-editable-id="main"] .builder_editor_item-body {
  overflow: visible;
}

.builder_editor_item[data-editable-id^="text-"] .builder_editor_item-body {
  position: relative;
  overflow: visible;
  clip-path: none;
  contain: none;
}

.builder_editor_layer-wrap--text.is-editing .builder_editor_item-body {
  cursor: text;
}

.builder_editor_item-body img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
}

.builder_editor_breath_canvas {
  width: 118%;
  height: 118%;
  flex: 0 0 auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.builder_editor_breath_pin {
  position: absolute;
  z-index: 7;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: rgba(41, 216, 255, 0.84);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.34);
  cursor: grab;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.builder_editor_breath_pin--pull {
  background: rgba(255, 255, 255, 0.78);
}

.builder_editor_breath_pin::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: #fff;
}

.builder_editor_breath_pin.is-auto {
  background: rgba(255, 255, 255, 0.34);
}

.builder_editor_breath_pin--anchor {
  left: calc(50% + 42px);
  width: 24px;
  height: 24px;
  background: rgba(255, 203, 46, 0.88);
  box-shadow:
    0 0 0 5px rgba(255, 203, 46, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.builder_editor_breath_anchor_line {
  position: absolute;
  left: -6%;
  right: -6%;
  z-index: 6;
  height: 1px;
  border-top: 1px dashed rgba(255, 203, 46, 0.82);
  pointer-events: none;
  transform: translateY(-50%);
}

.builder_editor_text {
  font-family: var(--font-family);
  font-weight: 700;
  line-height: 1.12;
  width: max-content;
  max-width: none;
  max-height: none;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre-wrap;
  text-align: center;
  box-sizing: border-box;
  user-select: none;
  pointer-events: none;
  display: inline-block;
}

.builder_editor_text_view {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: none;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

.builder_editor_text_view.is-empty {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

.builder_editor_text_view.is-empty .builder_editor_text {
  opacity: 0;
}

.builder_editor_text_measure {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.builder_editor_text_caret {
  display: inline-block;
  width: 2px;
  height: 1.08em;
  margin-left: 2px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  animation: builder-text-caret-blink 1s steps(1, end) infinite;
  flex: 0 0 auto;
}

@keyframes builder-text-caret-blink {
  0%, 48% {
    opacity: 1;
  }

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

.site_update_notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 14px 12px 18px;
  color: #fff;
  background: rgba(18, 21, 27, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
}

.site_update_notice button {
  flex: 0 0 auto;
  padding: 9px 14px;
  color: #071018;
  font-weight: 700;
  background: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.builder_editor_handle {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 6;
  display: none;
  touch-action: none;
}

.builder_editor_item.is-selected .builder_editor_handle {
  display: block;
}

.builder_editor_handle[data-handle="nw"] {
  top: -5px;
  left: -5px;
  cursor: nwse-resize;
}

.builder_editor_handle[data-handle="ne"] {
  top: -5px;
  right: -5px;
  cursor: nesw-resize;
}

.builder_editor_handle[data-handle="sw"] {
  bottom: -5px;
  left: -5px;
  cursor: nesw-resize;
}

.builder_editor_handle[data-handle="se"] {
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
}

.builder_editor_handle[data-handle="n"] {
  top: -5px;
  left: calc(50% - 5.5px);
  cursor: ns-resize;
}

.builder_editor_handle[data-handle="s"] {
  bottom: -5px;
  left: calc(50% - 5.5px);
  cursor: ns-resize;
}

.builder_editor_handle[data-handle="w"] {
  top: calc(50% - 5.5px);
  left: -5px;
  cursor: ew-resize;
}

.builder_editor_handle[data-handle="e"] {
  top: calc(50% - 5.5px);
  right: -5px;
  cursor: ew-resize;
}

.builder_editor_border-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.builder_mask_editor{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.builder_mask_editor_backdrop{
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 13, .74);
  backdrop-filter: blur(8px);
}
.builder_mask_editor_panel{
  position: relative;
  z-index: 1;
  width: min(1380px, calc(100vw - 16px));
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background: #11131a;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.builder_mask_editor_header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.builder_mask_editor_eyebrow{
  margin: 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.builder_mask_editor_title{
  margin: 0;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  color: var(--obvodka-vybora);
}
.builder_mask_editor_close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.8);
  font-size: 22px;
  line-height: 1;
}
.builder_mask_editor_toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.builder_mask_editor_modes{
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.builder_mask_editor_modes button{
  min-width: 84px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  transition: background .2s, color .2s;
}
.builder_mask_editor_modes button.is-active{
  background: rgba(255,255,255,.12);
  color: var(--obvodka-vybora);
}
.builder_mask_editor_modes_button--pan{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 98px;
}
.builder_mask_editor_brush{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.builder_mask_editor_brush span,
.builder_mask_editor_brush strong{
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--obvodka-vybora);
}
.builder_mask_editor_brush strong{
  min-width: 54px;
  text-align: right;
}
.builder_mask_editor_brush input{
  width: 180px;
}
.builder_mask_editor_zoom{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.builder_mask_editor_zoom_button{
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.08);
  color: var(--obvodka-vybora);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  transition: background .2s, opacity .2s;
}
.builder_mask_editor_zoom_button:hover{
  background: rgba(255,255,255,.12);
}
.builder_mask_editor_zoom_button--icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.builder_mask_editor_zoom_button:disabled{
  opacity: .45;
  cursor: default;
}
.builder_mask_editor_zoom_value{
  min-width: 68px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.08);
  text-align: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: var(--obvodka-vybora);
  transition: background .2s, opacity .2s;
}
.builder_mask_editor_zoom_value:hover{
  background: rgba(255,255,255,.12);
}
.builder_mask_editor_reset{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: var(--obvodka-vybora);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
}
.builder_mask_editor_reset:disabled{
  opacity: .45;
  cursor: default;
}
.builder_mask_editor_stage{
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.builder_mask_editor_stage_viewport{
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.builder_mask_editor_stage_viewport::-webkit-scrollbar{
  display: none;
}
.builder_mask_editor_stage_viewport.is-pan-mode{
  cursor: grab;
}
.builder_mask_editor_stage_viewport.is-panning{
  cursor: grabbing;
}
.builder_mask_editor_stage_surface{
  position: relative;
  width: 100%;
  height: 100%;
}
.builder_mask_editor_canvas_wrap{
  position: absolute;
  overflow: hidden;
  border-radius: 18px;
  background-color: #c7ccd8;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.55) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.55) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.55) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.55) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.builder_mask_editor_canvas{
  display: block;
  max-width: 100%;
  max-height: 100%;
  cursor: none;
}
.builder_mask_editor_cursor{
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.builder_mask_editor_cursor--erase{
  border-color: #ff5f73;
}
.builder_mask_editor_cursor--restore{
  border-color: #60f2b0;
}
.builder_mask_editor_cursor_marker{
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(42%, 42%);
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(17,19,26,.92), 0 0 0 1px rgba(255,255,255,.28);
}
.builder_mask_editor_cursor_marker--erase{
  background: #ff5f73;
}
.builder_mask_editor_cursor_marker--restore{
  background: #54e5a6;
}
.builder_mask_editor_footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.builder_mask_editor_actions{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
}
.builder_mask_editor_button{
  min-width: 126px;
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  transition: opacity .2s, background .2s, border-color .2s;
}
.builder_mask_editor_button:disabled{
  opacity: .55;
  cursor: default;
}
.builder_mask_editor_button--ghost{
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.75);
}
.builder_mask_editor_button--primary{
  border: 1px solid rgba(255,255,255,.1);
  background: var(--obvodka-vybora);
  color: #0b0e13;
}

@media (max-width: 768px) {
  .builder_editor_size-label {
    font-size: 11px;
  }

  .builder_editor_size-label--tl,
  .builder_editor_size-label--tr {
    top: -22px;
  }

  .builder_mask_editor{
    padding: 12px;
  }
  .builder_mask_editor_panel{
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    padding: 14px;
    border-radius: 18px;
  }
  .builder_mask_editor_title{
    font-size: 18px;
  }
  .builder_mask_editor_brush{
    width: 100%;
    justify-content: space-between;
  }
  .builder_mask_editor_brush input{
    width: min(100%, 190px);
    flex: 1 1 auto;
  }
  .builder_mask_editor_zoom{
    width: 100%;
    justify-content: space-between;
  }
  .builder_mask_editor_zoom_value{
    min-width: 0;
    flex: 1 1 auto;
  }
  .builder_mask_editor_footer{
    align-items: stretch;
    gap: 10px;
  }
  .builder_mask_editor_actions{
    width: 100%;
    margin-left: 0;
  }
  .builder_mask_editor_button{
    flex: 1 1 0;
  }
}

.backgrounds_modal_panel a[href*="/builder"] {
  background: var(--obvodka-vybora) !important;
  color: #000 !important;
}

.backgrounds_modal_panel a[href*="/mockup"] {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}

.backgrounds_modal_panel a[href*="steamcommunity.com"],
.backgrounds_modal_panel a[href*="steampowered.com/points"] {
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.28) !important;
  color: #fff !important;
}

.backgrounds_modal_panel a:hover {
  opacity: .72;
}

section.page.backgrounds .backgrounds_filters::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}

section.page.backgrounds .backgrounds_filters::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
  border-radius: 999px;
  box-shadow: none;
}

section.page.backgrounds .backgrounds_filters::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
}

.backgrounds_modal_action_stack {
  border-radius: 18px !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(0, 0, 0, 0.18) !important;
}

.backgrounds_modal_action_stack + p {
  display: none !important;
}

.backgrounds_modal_tools {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  background: transparent !important;
}

.backgrounds_modal_tool_link,
.backgrounds_modal_purchase_link {
  display: flex !important;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 14px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center;
  white-space: nowrap;
  box-shadow: none !important;
}

.backgrounds_modal_tool_link[href*="/builder"] {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.backgrounds_modal_tool_link[href*="/mockup"] {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
}

.backgrounds_modal_purchase_grid {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.backgrounds_modal_purchase_grid.grid-cols-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

.backgrounds_modal_purchase_link {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: #ffffff !important;
}

.backgrounds_modal_tool_link:hover,
.backgrounds_modal_purchase_link:hover {
  opacity: 0.76;
}

/* Achievement letter showcase */
section.page.achievements {
  padding: 0 !important;
  background: transparent !important;
  color: var(--button-primary-color) !important;
}

.achievements_container {
  position: relative;
  z-index: 1;
  max-width: 1435px !important;
  padding: 60px 32px 64px 124px !important;
}

.achievements_layout {
  align-items: start;
  grid-template-columns: minmax(250px, 282px) minmax(0, 1fr) !important;
  gap: 32px !important;
}

.achievements_sidebar,
.achievements_preview,
.achievements_catalog {
  border: 1px solid var(--seraya-plashka) !important;
  border-radius: 32px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.5) !important;
}

.achievements_sidebar {
  position: static !important;
  top: 28px !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px !important;
}

.achievements_eyebrow,
.achievements_preview_label {
  color: rgba(255, 255, 255, 0.46) !important;
  letter-spacing: 0.14em !important;
}

.achievements_title {
  font-family: var(--font-family);
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  color: var(--obvodka-vybora) !important;
}

.achievements_control {
  margin-top: 0 !important;
}

.achievements_control label,
.achievements_control > p {
  margin-bottom: 10px !important;
  font-family: var(--font-family);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45) !important;
}

.achievements_input {
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.26) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  letter-spacing: 0.12em !important;
}

.achievements_input:focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.achievements_pill,
.achievements_mode_button,
.achievements_color_button,
.achievements_link_button,
.achievements_load_more {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: var(--font-family);
  font-weight: 700 !important;
  transition: transform 0.25s, opacity 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
}

.achievements_pill,
.achievements_color_button,
.achievements_link_button {
  min-height: 36px;
  border-radius: 13px !important;
}

.achievements_mode_button {
  min-height: 40px !important;
  border-radius: 14px !important;
}

.achievements_pill:hover,
.achievements_mode_button:hover,
.achievements_color_button:hover,
.achievements_link_button:hover,
.achievements_load_more:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

.achievements_active {
  border-color: transparent !important;
  background: var(--obvodka-vybora) !important;
  color: #000000 !important;
  box-shadow: 0 0 17px 0 rgba(255, 255, 255, 0.29) !important;
}

.achievements_selected_set,
.achievements_hint,
.achievements_color_box {
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.achievements_selected_set {
  padding: 10px 12px !important;
}

.achievements_color_notice {
  border: 1px solid rgba(255, 180, 84, 0.18);
  border-radius: 14px;
  background: rgba(255, 180, 84, 0.07);
  padding: 10px 12px;
  color: rgba(255, 214, 160, 0.88);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.achievements_preview_header {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  padding: 22px !important;
}

.achievements_preview_title {
  font-family: var(--font-family);
  font-size: 22px !important;
  font-weight: 700 !important;
}

.achievements_stats span {
  min-width: 86px;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.24) !important;
}

.achievements_stats strong {
  color: var(--obvodka-vybora) !important;
}

.achievements_preview_body {
  min-height: 250px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005)),
    rgba(0, 0, 0, 0.16) !important;
  padding: 22px !important;
}

.achievements_preview_slot,
.achievements_style_card,
.achievements_detail_card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  box-shadow: none !important;
}

.achievements_preview_slot {
  width: 92px !important;
  padding: 8px !important;
}

.achievements_preview_slot img,
.achievements_style_card img,
.achievements_detail_card img {
  filter: saturate(0.96) contrast(1.03);
}

.achievements_catalog {
  padding: 22px !important;
}

.achievements_catalog_header h2 {
  font-family: var(--font-family);
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--obvodka-vybora) !important;
}

.achievements_style_card {
  padding: 14px !important;
  min-height: 146px;
}

.achievements_style_card:hover,
.achievements_detail_card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.achievements_style_card span,
.achievements_detail_card span {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.achievements_detail_card {
  min-height: 86px;
}

.achievements_fallback_slot {
  border-color: rgba(255, 180, 84, 0.34) !important;
  background: rgba(255, 180, 84, 0.055) !important;
}

.achievements_load_more {
  min-height: 42px;
  border-radius: 14px !important;
  padding: 0 18px !important;
}

.achievements_loader {
  width: 100%;
  min-height: 34px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent),
    rgba(255, 255, 255, 0.018);
  background-size: 220% 100%;
  animation: achievements_loader_sheen 1.4s ease-in-out infinite;
}

@keyframes achievements_loader_sheen {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

.achievements_to_top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.86);
  color: #ffffff;
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.82;
  pointer-events: auto;
  transform: translateY(0);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44), 0 0 18px rgba(255, 255, 255, 0.14);
  transition: opacity 0.22s, transform 0.22s, border-color 0.22s, background 0.22s;
}

.achievements_to_top_visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-2px);
}

.achievements_to_top:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1199px) {
  .achievements_container {
    padding-left: 32px !important;
  }

  .achievements_layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .achievements_container {
    padding: 30px 14px 48px !important;
  }

  .achievements_sidebar,
  .achievements_preview,
  .achievements_catalog {
    border-radius: 24px !important;
  }

  .achievements_preview_header,
  .achievements_catalog {
    padding: 16px !important;
  }

  .achievements_preview_body {
    padding: 16px !important;
  }

  .achievements_stats {
    width: 100%;
  }

  .achievements_stats span {
    min-width: 0;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 1180px) {
  section.page.builder:not(.mockup) .builder_illustration {
    position: relative;
    top: auto;
  }
}

@media (max-width: 768px) {
  body.mockup-route-active nextjs-portal {
    display: none !important;
  }

  body.mockup-route-active .mockup_overlay_toggle {
    color: transparent !important;
  }

  body.mockup-route-active .mockup_overlay_toggle::before {
    color: rgba(255, 255, 255, 0.86) !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  body.mockup-route-active .mockup_overlay_toggle:hover::before,
body.mockup-route-active .mockup_overlay_toggle.is-active::before {
    color: #ffffff !important;
  }
}

.builder_category_setting_bg_filter,
.builder_illustration_up_button,
.builder_category_text_block_item_select_tab,
.builder_illustration_up_download,
.builder_category_character_processing_button {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.12;
}

.builder_category_character_load_button_text {
  overflow-wrap: anywhere;
}

.builder_illustration_up_download_badge {
  flex-shrink: 0;
  white-space: nowrap;
}
.builder_category--avatar .builder_category_nav:nth-child(n + 3),
.builder_category--avatar .builder_category_character_animation {
  display: none !important;
}

/* 2026-08-12 incident explanation page. */

.incident_page {
  display: flex;
  justify-content: center;
  padding: 56px 20px 96px;
}

.incident_card {
  width: 100%;
  max-width: 760px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.incident_badge {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.incident_title {
  margin: 18px 0 0;
  font-size: 32px;
  line-height: 120%;
  color: #fff;
}

.incident_lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 158%;
  color: rgba(255, 255, 255, 0.78);
}

.incident_sections {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.incident_section_title {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 130%;
  color: #fff;
}

.incident_section_body {
  margin: 0;
  font-size: 14px;
  line-height: 160%;
  color: rgba(255, 255, 255, 0.66);
}

.incident_section_body + .incident_section_body {
  margin-top: 10px;
}

.incident_section_highlight {
  color: #fff;
}

.incident_list {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  list-style: disc;
}

.incident_list + .incident_section_body {
  margin-top: 12px;
}

.incident_list_item {
  margin: 0;
  font-size: 14px;
  line-height: 160%;
  color: rgba(255, 255, 255, 0.66);
}

.incident_list_item + .incident_list_item {
  margin-top: 6px;
}

.incident_actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.incident_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 9999px;
  border: 1px solid #fff;
  background: #fff;
  color: #000;
  font-size: 14px;
  text-decoration: none;
}

.incident_button:hover {
  opacity: 0.86;
}

.incident_button--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.incident_button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

@media (max-width: 640px) {
  .incident_page {
    padding: 28px 14px 64px;
  }

  .incident_card {
    padding: 26px 20px;
    border-radius: 18px;
  }

  .incident_title {
    font-size: 25px;
  }

  .incident_lead {
    font-size: 15px;
  }

  .incident_button {
    flex: 1 1 100%;
  }
}

.incident_closing {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.incident_closing_body {
  margin: 0;
  font-size: 15px;
  line-height: 162%;
  color: rgba(255, 255, 255, 0.82);
}

.incident_closing_body + .incident_closing_body {
  margin-top: 12px;
}

.incident_closing_signature {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 140%;
  color: rgba(255, 255, 255, 0.5);
}