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

.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%;
  }
}

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 {
  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_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);
}

.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;
  font-size: 24px;
}

.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(60.65727233886719px);
background: var(--chernyyy);
position: fixed;
left: 40px;
top: 20px;
height: calc(100% - 40px);
z-index: 50;
border-radius: 24px;
overflow: visible;
--sidebar-nav-gap: clamp(14px, 3vh, 28px);
--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: var(--sidebar-icon-box);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

@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_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);
}

.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_token_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.donate_token_card {
  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: 22px;
  background: rgba(255,255,255,.04);
  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: rgba(255,255,255,.07);
}

.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 {
  margin-top: 4px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}

.donate_token_price {
  margin-top: 18px;
  border-radius: 14px;
  padding: 9px 12px;
  background: #fff;
  color: #000;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

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

.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);
}

.donate_token_badge_hot {
  background: rgba(255,80,80,.18);
  color: rgba(255,120,120,1);
  border: 1px solid rgba(255,80,80,.22);
}

.donate_token_badge_popular {
  background: rgba(100,180,255,.15);
  color: rgba(130,200,255,1);
  border: 1px solid rgba(100,180,255,.2);
}

.donate_token_amount {
  margin-top: 20px;
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
}

.donate_token_per {
  margin-top: 4px;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  color: rgba(255,255,255,.38);
}

/* ── 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_checkout_btn:hover,
.donate_checkout_btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,255,255,.14);
}

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

/* ── FOUNDER BANNER ────────────────────────────────────────────────── */
.donate_founder {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 32px;
  background: rgba(255,255,255,.04);
  margin-top: 32px;
  padding: 0;
}

.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,.06) 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 10px 36px rgba(255,255,255,.2);
}

.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_section_head,
  .donate_checkout {
    align-items: stretch;
    flex-direction: column;
  }

  .donate_section_note {
    max-width: none;
    text-align: left;
  }

  .donate_checkout_btn {
    width: 100%;
  }

  .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_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: 16px;
  border: 1px solid var(--seraya-plashka);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}
.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_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_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: repeat(2, 1fr);
  gap: 40px;
}
.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_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: 32px;
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.57);
 background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(31, 31, 31, 0.8) 100%);
 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_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_status {
  margin-top: 16px;
  font-family: var(--font-family);
font-weight: 700;
font-size: 48px;
line-height: 75%;
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_main_info_limits_stats {
  margin-top: 12px;
  font-family: var(--third-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
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_info_limits_credits {
  margin-top: 12px;
  font-family: var(--third-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
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_supports {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}
.profile_main_info_support {
  width: 100%;
  height: auto;
  background: var(--seraya-plashka);
  border-radius: 16px;

}
.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_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:hover{
  transform: scale(1.03);
}
.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 {
  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_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: auto;
transition: all .5s;
}
.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: vertical;
  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;
}
.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);
}
.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: cover;
  border-radius: 16px;
}
.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: 118px;
  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_items--downloads {
  gap: 28px;
}
.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_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;
}


.inputRange {
  appearance: none;
  width: 200px;
  height: 7px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ffffff 30%, #dddddd10 30%);
  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(6, minmax(0, 1fr));
  gap: 8px;
}
.optimizer_limits_button {
  font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
text-align: center;
color: var(--obvodka-vybora);
height: 36px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 10px 0px;
width: 100%;
outline: none;
border: none;
cursor: pointer;
transition: all .5s;
}
.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 {
  margin-left: auto;
  font-family: var(--font-family);
font-weight: 600;
font-size: 14px;
color: #000;
padding: 8px 14px;
border-radius: 8px;
background: var(--obvodka-vybora);
}
.inputRange {
  width: 100%;
}
.optimizer_lossy .inputRange{
  margin-top: 24px;
}

.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:last-child{
  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: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_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_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 — 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%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #05070a;
}

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.05), transparent 68%),
    linear-gradient(90deg, rgba(3, 5, 8, 0.42), rgba(3, 5, 8, 0.1) 43%, rgba(3, 5, 8, 0.44)),
    linear-gradient(180deg, rgba(3, 5, 8, 0.16), rgba(3, 5, 8, 0.42));
}

.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;
}

.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(1) brightness(.94) contrast(1.01);
  transform: scale(1.34) 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;
}

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_label {
  display: block;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color .25s ease;
  line-height: 1;
}
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: 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;
}

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: rgba(10, 14, 18, 0.72);
}

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.075);
  border-color: rgba(255, 255, 255, 0.11);
}

.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;
}
.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_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_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 svg{
  vertical-align: middle;
}
.builder_category_setting_bg_backgrounds {
  width: 100%;
  height: auto;
  margin-top: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-height: 635px;
  padding-right: 16px;
}
.builder_category_setting_bg_background {
  cursor: pointer;
  transition: all .5s;
  border-radius: 16px;
  padding: 4px;
  border: 1px solid transparent;
}
.builder_category_setting_bg_background:hover{
  opacity: .5;
}
.builder_category_setting_bg_background_image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  max-height: 120px;
  object-fit: cover;
  display: block;
}
.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;
}
.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: var(--chernyy);
  border: 1px solid rgba(255, 255, 255, 0.05);
  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.04);
}
.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;
}
.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: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px;
  background: var(--color);
  border-radius: 20px;
  min-width: 0;
  flex-wrap: wrap;

}
.builder_illustration_up_button {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  color: var(--obvodka-vybora);
  padding: 14px 14px;
  outline: none;
  border: none;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .3s ease, transform .2s ease;
  white-space: nowrap;
}
.builder_illustration_up_button:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.builder_illustration_up_button_active {
  color: #000;
  box-shadow:
    0 0 17px 0 rgba(255, 255, 255, 0.29),
    0 4px 12px rgba(0, 0, 0, 0.2);
  background: var(--obvodka-vybora);
}
.builder_illustration_up_button_active:hover {
  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: 16px;
  color: #000;
padding: 19.5px 20px;
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;
gap: 20px;
min-width: 0;
justify-self: end;
flex-shrink: 0;
}
.builder_illustration_up_download svg{
  height: 50px;
  vertical-align: middle;
  display: none;
}
.builder_illustration_up_download:hover{
  transform: scale(1.03);
}
.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_layers {
  width: 100%;
  height: auto;
  background: var(--color);
  border: 1px solid rgba(255, 255, 255, 0.05);
  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.04);
}
.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;
  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_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;
}
.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_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-radius: 16px;
cursor: pointer;
transition: all .5s;

}
.builder_category_text_block_item_select_selected:hover{
  opacity: .5;
}
.builder_category_text_block_item_select_selected svg{
  vertical-align: middle;
  margin-left: auto;
}
.builder_category_text_block_item_select_items {
  width: 100%;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: none;
  overflow: hidden auto;
  max-height: min(320px, calc(100vh - 160px));
  padding: 6px 0 4px;
}

section.page.builder:not(.mockup) .builder_category:has(.builder_category_text_block_item_select.is-open) {
  overflow: visible;
  z-index: 40;
}

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 {
  margin: 6px 12px 10px;
  padding: 12px 14px;
  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;
  gap: 6px;
  padding: 4px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.builder_category_text_block_item_select_tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  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: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.builder_category_text_block_item_select_search {
  padding: 10px 12px 8px;
}
.builder_category_text_block_item_select_search_input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
  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 {
  padding: 4px 4px 6px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.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 {
  justify-content: space-between;
  gap: 12px;
  margin: 0 8px 2px;
  padding: 10px 12px;
  border-radius: 12px;
}
.builder_category_text_block_item_select_item--font:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.builder_category_text_block_item_select_item--font.builder_category_text_block_item_select_item_active {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.builder_category_text_block_item_select_item_label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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;
}
.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: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  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_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;
}

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: flex;
justify-content: center;
width: 100%;
}


.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_balance {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

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 {
    justify-self: stretch;
    width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 16px 20px;
  }
}




@media (max-width: 768px) {

.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;
}
}
  @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 (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 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .builder_category_nav {
    flex-shrink: 0;
  }

  .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;
  }

  .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%;
  }
}

@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;
  }

  .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;
  }

  .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;
  }

  .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: 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: 30px;
    height: 30px;
  }
  section.page.builder:not(.mockup) .builder_category_nav {
    width: 44px;
    height: 44px;
  }
  .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;
}

.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: hidden;
  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;
  background: #171717;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  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 14px;
  color: rgba(255, 255, 255, 0.92);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1;
  background: #171717;
}

.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: 28px;
  background: rgba(0, 0, 0, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

@keyframes builderWorkshopPreviewIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(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(190, 210, 255, 0.07) 25%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(220, 215, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.18) 55%,
    rgba(190, 210, 255, 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(190, 210, 255, 0.08);
  }
}

.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%;
  pointer-events: none;
}

.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: fill;
  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;
}

.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: 10px auto 0;
  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: 18px;
  height: 18px;
  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: 4px;
  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: 16px;
  height: 16px;
  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;
  }
}

.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;
  }
}