@media (min-width: 1061px) {
  .sidebar-brand-row .sidebar-brand-full,
  .sidebar-brand-row .sidebar-compact-mark {
    transition: opacity 180ms ease, transform 280ms cubic-bezier(.23,1,.32,1);
    transform-origin: center;
  }
  .sidebar-brand-row .sidebar-brand-full { display: block; opacity: 1; transform: scale(1); }
  .sidebar-brand-row .sidebar-compact-mark {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 24px !important;
    height: 24px;
    display: block !important;
    opacity: 0;
    transform: translate(-50%,-50%) scale(0);
  }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-brand-full { display: block; opacity: 0; transform: scale(0); }
  body.sidebar-collapsed .sidebar-brand-row .sidebar-compact-mark { display: block !important; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  body.sidebar-transitioning .sidebar-brand-row .sidebar-brand-full,
  body.sidebar-transitioning .sidebar-brand-row .sidebar-compact-mark { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand:hover .sidebar-brand-full { transform: scale(1.035); }
  body.sidebar-collapsed .sidebar-brand-row .brand:hover .sidebar-compact-mark { transform: translate(-50%,-50%) scale(1.1) !important; }
  body:not(.sidebar-collapsed) .sidebar-brand-row .brand.is-pressing .sidebar-brand-full { animation: final-brand-press-full 300ms cubic-bezier(.34,1.56,.64,1); }
  body.sidebar-collapsed .sidebar-brand-row .brand.is-pressing .sidebar-compact-mark { animation: final-brand-press-compact 300ms cubic-bezier(.34,1.56,.64,1); }

  .sidebar-collapse.liquid-control,
  .sidebar-collapse.liquid-control.is-fluid-exiting,
  body.sidebar-collapsed #sidebarCollapse.liquid-control,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting {
    --control-base: rgba(255,255,255,.9);
    --control-fluid: var(--accent);
    color: var(--ink);
    background-color: var(--control-base);
    background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
    transition-property: --fluid-radius, opacity, color, background-color, box-shadow !important;
  }
  .sidebar-collapse.liquid-control.is-fluid-active,
  body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active {
    color: #fff;
    box-shadow: 0 14px 34px rgba(var(--accent-rgb),.18);
  }

  .sidebar-legal-link,
  .sidebar-legal-toggle {
    --control-base: rgba(255,255,255,.38);
    --control-fluid: var(--accent);
    border: 1px solid rgba(255,255,255,.72);
    color: var(--muted);
    background-color: var(--control-base);
    box-shadow: none;
  }
  .sidebar-legal-link { min-height: 28px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
  .sidebar-legal-link.liquid-control.is-fluid-active,
  .sidebar-legal-toggle.liquid-control.is-fluid-active {
    color: #fff;
    border-color: rgba(var(--accent-rgb),.78);
    box-shadow: 0 10px 24px rgba(var(--accent-rgb),.14);
  }
}

@keyframes final-brand-press-full {
  0%,100% { transform: scale(1.035); }
  42% { transform: scale(.94); }
  72% { transform: scale(1.055); }
}
@keyframes final-brand-press-compact {
  0%,100% { transform: translate(-50%,-50%) scale(1.1); }
  42% { transform: translate(-50%,-50%) scale(.86); }
  72% { transform: translate(-50%,-50%) scale(1.14); }
}

.ideas-carousel { -webkit-mask-image: none !important; mask-image: none !important; }
.ideas-carousel-shell::before,
.ideas-carousel-shell::after {
  content: "" !important;
  position: absolute;
  top: -10px;
  bottom: -10px;
  z-index: 5;
  width: 76px;
  display: block !important;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(.23,1,.32,1);
  background: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(.9);
  backdrop-filter: blur(10px) saturate(.9);
}
.ideas-carousel-shell::before {
  left: -1px;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.72) 42%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.72) 42%, transparent 100%);
}
.ideas-carousel-shell::after {
  right: -1px;
  opacity: 1;
  -webkit-mask-image: linear-gradient(270deg, #000 0, rgba(0,0,0,.72) 42%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0, rgba(0,0,0,.72) 42%, transparent 100%);
}
.ideas-carousel-shell:has(.ideas-carousel.is-scrolled)::before { opacity: 1; }
.ideas-carousel-shell:has(.ideas-carousel.is-at-end)::after { opacity: 0; }

/* The idea rail fills available space and only dissolves when it can actually scroll. */
.ideas-carousel-shell { margin-right: -6px; }
.ideas-carousel {
  gap: 16px !important;
  padding-right: 14px;
}
.ideas-carousel .idea-template {
  flex: 1 0 174px;
  min-width: 174px;
}
.ideas-carousel-shell::before,
.ideas-carousel-shell::after {
  width: 120px;
  -webkit-backdrop-filter: blur(16px) saturate(.88);
  backdrop-filter: blur(16px) saturate(.88);
  transition: opacity 620ms cubic-bezier(.23,1,.32,1);
}
.ideas-carousel-shell::before {
  opacity: 0 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.78) 30%, rgba(0,0,0,.28) 68%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.78) 30%, rgba(0,0,0,.28) 68%, transparent 100%);
}
.ideas-carousel-shell::after {
  opacity: 0 !important;
  -webkit-mask-image: linear-gradient(270deg, #000 0, rgba(0,0,0,.78) 30%, rgba(0,0,0,.28) 68%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0, rgba(0,0,0,.78) 30%, rgba(0,0,0,.28) 68%, transparent 100%);
}
.ideas-carousel-shell:has(.ideas-carousel.is-overflowing.is-scrolled)::before { opacity: 1 !important; }
.ideas-carousel-shell:has(.ideas-carousel.is-overflowing:not(.is-at-end))::after { opacity: 1 !important; }

/* Local fan-and-dots transition for each drawer block. */
@media (min-width: 1061px) {
  body.sidebar-wave-collapse .account-side-panel,
  body.sidebar-wave-collapse .product-side-panel,
  body.sidebar-wave-collapse .support-side-panel,
  body.sidebar-wave-collapse .sidebar-legal,
  body.sidebar-wave-expand .account-side-panel,
  body.sidebar-wave-expand .product-side-panel,
  body.sidebar-wave-expand .support-side-panel,
  body.sidebar-wave-expand .sidebar-legal {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  body.sidebar-wave-collapse .account-side-panel::after,
  body.sidebar-wave-collapse .product-side-panel::after,
  body.sidebar-wave-collapse .support-side-panel::after,
  body.sidebar-wave-collapse .sidebar-legal::after,
  body.sidebar-wave-expand .account-side-panel::after,
  body.sidebar-wave-expand .product-side-panel::after,
  body.sidebar-wave-expand .support-side-panel::after,
  body.sidebar-wave-expand .sidebar-legal::after {
    content: "";
    position: absolute;
    inset: -18% -35%;
    z-index: 8;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(6,93,253,.66) 1.45px, transparent 1.85px);
    background-size: 8px 8px;
    opacity: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  }
  body.sidebar-wave-collapse .account-side-panel::after,
  body.sidebar-wave-collapse .product-side-panel::after,
  body.sidebar-wave-collapse .support-side-panel::after,
  body.sidebar-wave-collapse .sidebar-legal::after { animation: drawer-dots-to-left 860ms cubic-bezier(.2,.78,.22,1) both; }
  body.sidebar-wave-expand .account-side-panel::after,
  body.sidebar-wave-expand .product-side-panel::after,
  body.sidebar-wave-expand .support-side-panel::after,
  body.sidebar-wave-expand .sidebar-legal::after { animation: drawer-dots-to-right 860ms cubic-bezier(.2,.78,.22,1) both; }

  body.sidebar-wave-collapse .account-summary,
  body.sidebar-wave-collapse .product-side-panel > :not(.side-title),
  body.sidebar-wave-collapse .support-side-panel > *,
  body.sidebar-wave-collapse .sidebar-legal > *,
  body.sidebar-wave-expand .account-summary,
  body.sidebar-wave-expand .product-side-panel > :not(.side-title),
  body.sidebar-wave-expand .support-side-panel > *,
  body.sidebar-wave-expand .sidebar-legal > * {
    transform-origin: center;
    will-change: transform, opacity;
  }
  body.sidebar-wave-collapse .account-summary,
  body.sidebar-wave-collapse .product-side-panel > :not(.side-title),
  body.sidebar-wave-collapse .support-side-panel > *,
  body.sidebar-wave-collapse .sidebar-legal > * { animation: drawer-fan-to-left 860ms cubic-bezier(.2,.78,.22,1) both; }
  body.sidebar-wave-expand .account-summary,
  body.sidebar-wave-expand .product-side-panel > :not(.side-title),
  body.sidebar-wave-expand .support-side-panel > *,
  body.sidebar-wave-expand .sidebar-legal > * { animation: drawer-fan-to-right 860ms cubic-bezier(.2,.78,.22,1) both; }

  body.sidebar-wave-collapse .product-side-panel::after,
  body.sidebar-wave-expand .product-side-panel::after,
  body.sidebar-wave-collapse .product-side-panel > *,
  body.sidebar-wave-expand .product-side-panel > * { animation-delay: 30ms; }
  body.sidebar-wave-collapse .support-side-panel::after,
  body.sidebar-wave-expand .support-side-panel::after,
  body.sidebar-wave-collapse .support-side-panel > *,
  body.sidebar-wave-expand .support-side-panel > * { animation-delay: 60ms; }
  body.sidebar-wave-collapse .sidebar-legal::after,
  body.sidebar-wave-expand .sidebar-legal::after,
  body.sidebar-wave-collapse .sidebar-legal > *,
  body.sidebar-wave-expand .sidebar-legal > * { animation-delay: 90ms; }

  body.sidebar-collapsed .account-avatar {
    transition: box-shadow 240ms ease, filter 240ms ease;
  }
  body.sidebar-collapsed .account-summary:hover .account-avatar,
  body.sidebar-collapsed .account-summary.is-fluid-active .account-avatar {
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px rgba(var(--accent-rgb),.16), 0 10px 28px rgba(var(--accent-rgb),.16);
    filter: saturate(1.04);
  }
}

@keyframes drawer-dots-to-left {
  0% { opacity: 0; transform: translateX(42%) scaleX(.72); }
  28% { opacity: .9; }
  72% { opacity: .48; }
  100% { opacity: 0; transform: translateX(-42%) scaleX(1.08); }
}
@keyframes drawer-dots-to-right {
  0% { opacity: 0; transform: translateX(-42%) scaleX(.72); }
  28% { opacity: .9; }
  72% { opacity: .48; }
  100% { opacity: 0; transform: translateX(42%) scaleX(1.08); }
}
@keyframes drawer-fan-to-left {
  0%,100% { opacity: 1; transform: perspective(700px) translateX(0) rotateY(0) skewY(0); }
  34% { opacity: .78; transform: perspective(700px) translateX(-7px) rotateY(7deg) skewY(-1.2deg); }
  55% { opacity: .18; transform: perspective(700px) translateX(-13px) rotateY(12deg) skewY(-2deg); }
  72% { opacity: .7; transform: perspective(700px) translateX(4px) rotateY(-3deg) skewY(.5deg); }
}
@keyframes drawer-fan-to-right {
  0%,100% { opacity: 1; transform: perspective(700px) translateX(0) rotateY(0) skewY(0); }
  34% { opacity: .78; transform: perspective(700px) translateX(7px) rotateY(-7deg) skewY(1.2deg); }
  55% { opacity: .18; transform: perspective(700px) translateX(13px) rotateY(-12deg) skewY(2deg); }
  72% { opacity: .7; transform: perspective(700px) translateX(-4px) rotateY(3deg) skewY(-.5deg); }
}

/* Shared rounded viewport for long-form modal screens. */
#billingModal .modal-scroll-body,
#projectsModal .modal-scroll-body {
  border-radius: 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
  -webkit-mask-composite: initial;
  mask-composite: initial;
}
#billingModal .modal-scroll-card.is-header-compact .modal-scroll-body,
#projectsModal .modal-scroll-card.is-header-compact .modal-scroll-body {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 18px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 18px), transparent 100%) !important;
}

/* The title glides into the dock instead of disappearing and teleporting. */
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 {
  animation: final-modal-title-dock 560ms cubic-bezier(.2,.78,.22,1) both;
}
#billingModal .modal-scroll-card.is-header-expanding .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-expanding .modal-heading h2 {
  animation: final-modal-title-undock 520ms cubic-bezier(.2,.78,.22,1) both;
}
@keyframes final-modal-title-dock {
  0% { left: 0; top: 30px; opacity: 1; filter: blur(0); transform: translate(0,0) scale(1); }
  38% { opacity: .72; filter: blur(1.6px); transform: translate(18px,-3px) scale(.96); }
  100% { left: 50%; top: 10px; opacity: 1; filter: blur(0); transform: translate(-50%,-50%) scale(1); }
}
@keyframes final-modal-title-undock {
  0% { left: 50%; top: 10px; opacity: 1; filter: blur(0); transform: translate(-50%,-50%) scale(1); }
  40% { opacity: .7; filter: blur(1.6px); transform: translate(-44%,-48%) scale(.96); }
  100% { left: 0; top: 30px; opacity: 1; filter: blur(0); transform: translate(0,0) scale(1); }
}

/* A filled plan is one continuous accent surface, without a secondary rim. */
.modal-plans .plan-card.is-fluid-active {
  border-color: var(--accent) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.modal-plans .plan-card.is-fluid-active::before,
.modal-plans .plan-card.is-fluid-active::after { box-shadow: none !important; }

/* Ordered drawer morph: control out, brand out, drawer, brand in, control in. */
body.sidebar-brand-hiding .sidebar-brand-full,
body.sidebar-brand-hiding .sidebar-compact-mark {
  opacity: 0 !important;
  transform: translate(-50%,-50%) scale(0) !important;
  transition-duration: 150ms !important;
}
body.sidebar-brand-appearing:not(.sidebar-collapsed) .sidebar-brand-full {
  display: block;
  opacity: 1;
  animation: final-brand-arrive-full 260ms cubic-bezier(.34,1.4,.64,1) both;
}
body.sidebar-brand-appearing.sidebar-collapsed .sidebar-compact-mark {
  display: block !important;
  opacity: 1;
  animation: final-brand-arrive-compact 260ms cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes final-brand-arrive-full {
  0% { opacity: 0; transform: scale(0); }
  72% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes final-brand-arrive-compact {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  72% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* Sidebar utility controls share the refresh button's liquid response. */
#sidebarCollapse.liquid-control,
#sidebarCollapse.liquid-control.is-fluid-exiting,
body.sidebar-collapsed #sidebarCollapse.liquid-control,
body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-exiting,
#sidebarLegalToggle.liquid-control,
#sidebarLegalToggle.liquid-control.is-fluid-exiting {
  --control-base: rgba(255,255,255,.9);
  --control-fluid: var(--accent);
  color: var(--ink);
  background-color: var(--control-base) !important;
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
  transition: --fluid-radius 360ms cubic-bezier(.2,.78,.22,1), color 140ms ease, box-shadow 220ms ease, opacity 140ms ease !important;
}
#sidebarCollapse.liquid-control.is-fluid-active,
body.sidebar-collapsed #sidebarCollapse.liquid-control.is-fluid-active,
#sidebarLegalToggle.liquid-control.is-fluid-active {
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(var(--accent-rgb),.18) !important;
}
#sidebarCollapse.liquid-control.is-fluid-active .collapse-glyph,
#sidebarCollapse.liquid-control.is-fluid-active .material-symbols-outlined,
#sidebarLegalToggle.liquid-control.is-fluid-active .material-symbols-outlined { color: #fff !important; }

/* Expanded legal links are quiet text; compact popover links stay fully interactive. */
body:not(.sidebar-collapsed) .sidebar-legal-link,
body:not(.sidebar-collapsed) .sidebar-legal-link.liquid-control,
body:not(.sidebar-collapsed) .sidebar-legal-link.liquid-control.is-fluid-active {
  min-height: 24px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: var(--muted);
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body:not(.sidebar-collapsed) .sidebar-legal-link:hover,
body:not(.sidebar-collapsed) .sidebar-legal-link.liquid-control.is-fluid-active { color: var(--accent) !important; }
body.sidebar-collapsed .sidebar-legal-menu .sidebar-legal-link.liquid-control {
  --control-base: rgba(255,255,255,.54);
  --control-fluid: var(--accent);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 999px;
  background-color: var(--control-base);
}
body.sidebar-collapsed .sidebar-legal-menu .sidebar-legal-link.liquid-control.is-fluid-active {
  color: #fff;
  border-color: transparent;
}

/* Compact legal actions use the same liquid accent fill as the primary sidebar actions. */
body.sidebar-collapsed .sidebar-legal-menu .sidebar-legal-link.liquid-control {
  --control-base: rgba(255,255,255,.54);
  --control-fluid: var(--accent);
  background-color: var(--control-base) !important;
  background-image: radial-gradient(
    circle at var(--fluid-x) var(--fluid-y),
    var(--control-fluid) 0 var(--fluid-radius),
    transparent calc(var(--fluid-radius) + .75px)
  ) !important;
}
body.sidebar-collapsed .sidebar-legal-menu .sidebar-legal-link.liquid-control.is-fluid-active {
  color: #fff !important;
  border-color: transparent !important;
  background-color: var(--control-base) !important;
  background-image: radial-gradient(
    circle at var(--fluid-x) var(--fluid-y),
    var(--control-fluid) 0 var(--fluid-radius),
    transparent calc(var(--fluid-radius) + .75px)
  ) !important;
}

.brief-field .brief-counter {
  position: absolute;
  right: 14px;
  bottom: 9px;
  z-index: 4;
  color: rgba(20,20,22,.38);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  transition: color 160ms ease;
}
.brief-title .brief-control { padding-right: 72px; }
.brief-description .brief-control { padding-bottom: 24px; }
.brief-description textarea.brief-control { resize: none; }
.brief-field.is-fluid-active .brief-counter { color: rgba(255,255,255,.62); }

/* One continuous wave crosses the whole drawer; individual cards only perform the fan motion. */
@media (min-width: 1061px) {
  .product-sidebar { isolation: isolate; }
  .sidebar-transition-wave {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: block;
    overflow: hidden;
    border-radius: 30px;
    opacity: 0;
    pointer-events: none;
    transition: right 470ms cubic-bezier(.2,.78,.22,1), width 470ms cubic-bezier(.2,.78,.22,1), border-radius 470ms cubic-bezier(.2,.78,.22,1);
  }
  body.sidebar-collapsed .sidebar-transition-wave { right: -70px; }
  .sidebar-transition-wave::before {
    content: "";
    position: absolute;
    inset: -8% -48%;
    background-image: radial-gradient(circle, rgba(6,93,253,.7) 1.45px, transparent 1.9px);
    background-size: 8px 8px;
    opacity: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 39%, #000 61%, transparent 88%);
    mask-image: linear-gradient(90deg, transparent 12%, #000 39%, #000 61%, transparent 88%);
    will-change: transform, opacity;
  }
  body.sidebar-wave-collapse .sidebar-transition-wave,
  body.sidebar-wave-expand .sidebar-transition-wave { opacity: 1; }
  body.sidebar-wave-collapse .sidebar-transition-wave::before {
    animation: drawer-global-dots-left 890ms cubic-bezier(.2,.78,.22,1) both;
  }
  body.sidebar-wave-expand .sidebar-transition-wave::before {
    animation: drawer-global-dots-right 890ms cubic-bezier(.2,.78,.22,1) both;
  }

  body.sidebar-wave-collapse .account-side-panel::after,
  body.sidebar-wave-collapse .product-side-panel::after,
  body.sidebar-wave-collapse .support-side-panel::after,
  body.sidebar-wave-collapse .sidebar-legal::after,
  body.sidebar-wave-expand .account-side-panel::after,
  body.sidebar-wave-expand .product-side-panel::after,
  body.sidebar-wave-expand .support-side-panel::after,
  body.sidebar-wave-expand .sidebar-legal::after {
    content: none !important;
    animation: none !important;
  }

  body.sidebar-wave-collapse .account-summary,
  body.sidebar-wave-collapse .product-side-panel > :not(.side-title),
  body.sidebar-wave-collapse .support-side-panel > *,
  body.sidebar-wave-collapse .sidebar-legal > * {
    animation: drawer-card-fold-left 820ms cubic-bezier(.2,.78,.22,1) both !important;
  }
  body.sidebar-wave-expand .account-summary,
  body.sidebar-wave-expand .product-side-panel > :not(.side-title),
  body.sidebar-wave-expand .support-side-panel > *,
  body.sidebar-wave-expand .sidebar-legal > * {
    animation: drawer-card-fold-right 820ms cubic-bezier(.2,.78,.22,1) both !important;
  }

  #sidebarCollapse.is-morphing,
  body.sidebar-collapsed #sidebarCollapse.is-morphing {
    opacity: 1 !important;
    animation: drawer-control-collapse 190ms cubic-bezier(.55,.02,.72,.38) both !important;
  }
  #sidebarCollapse.is-morphing { transform: none !important; }
  body.sidebar-collapsed #sidebarCollapse.is-morphing { transform: translateY(-50%) !important; }
  #sidebarCollapse.is-appearing,
  body.sidebar-collapsed #sidebarCollapse.is-appearing {
    animation: drawer-control-bubble 300ms cubic-bezier(.2,1.5,.38,1) both !important;
  }
  #sidebarCollapse.is-appearing { transform: none !important; }
  body.sidebar-collapsed #sidebarCollapse.is-appearing { transform: translateY(-50%) !important; }
}

@keyframes drawer-global-dots-left {
  0% { opacity: 0; transform: translateX(42%) scaleX(.7); }
  22% { opacity: .92; }
  68% { opacity: .58; }
  100% { opacity: 0; transform: translateX(-42%) scaleX(1.08); }
}
@keyframes drawer-global-dots-right {
  0% { opacity: 0; transform: translateX(-42%) scaleX(.7); }
  22% { opacity: .92; }
  68% { opacity: .58; }
  100% { opacity: 0; transform: translateX(42%) scaleX(1.08); }
}
@keyframes drawer-card-fold-left {
  0%,100% { opacity: 1; transform: perspective(900px) translateX(0) rotateY(0deg) skewY(0deg); }
  30% { opacity: .9; transform: perspective(900px) translateX(-5px) rotateY(5deg) skewY(-.7deg); }
  49% { opacity: .22; transform: perspective(900px) translateX(-11px) rotateY(10deg) skewY(-1.2deg); }
  68% { opacity: .82; transform: perspective(900px) translateX(3px) rotateY(-2deg) skewY(.25deg); }
}
@keyframes drawer-card-fold-right {
  0%,100% { opacity: 1; transform: perspective(900px) translateX(0) rotateY(0deg) skewY(0deg); }
  30% { opacity: .9; transform: perspective(900px) translateX(5px) rotateY(-5deg) skewY(.7deg); }
  49% { opacity: .22; transform: perspective(900px) translateX(11px) rotateY(-10deg) skewY(1.2deg); }
  68% { opacity: .82; transform: perspective(900px) translateX(-3px) rotateY(2deg) skewY(-.25deg); }
}
@keyframes drawer-control-collapse {
  0% { opacity: 1; scale: 1; filter: blur(0); }
  62% { opacity: .72; scale: .72; filter: blur(.2px); }
  100% { opacity: 0; scale: 0; filter: blur(1px); }
}
@keyframes drawer-control-bubble {
  0% { opacity: 0; scale: 0; filter: blur(1px); }
  66% { opacity: 1; scale: 1.12; filter: blur(0); }
  84% { scale: .96; }
  100% { opacity: 1; scale: 1; }
}

/* Compact profile card: taller cover, larger avatar and in-place carousel editors. */
.profile-modal-card {
  width: min(510px, calc(100vw - 28px)) !important;
  max-height: min(790px, calc(100vh - 24px));
  padding: 10px !important;
  overflow: visible;
}
.profile-modal-card .profile-form { gap: 10px; }
.profile-cover-card {
  position: relative;
  min-height: 232px !important;
  padding-bottom: 42px !important;
  overflow: visible;
}
.profile-cover-card .profile-cover {
  --profile-cover: url('assets/templates/ozon-electronics.png');
  position: relative;
  height: 190px !important;
  padding: 18px !important;
  overflow: hidden;
  border-radius: 21px !important;
  background-color: var(--accent);
  background-image: var(--profile-cover);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  transition: background-image 260ms ease, filter 260ms ease;
}
.profile-cover-card .profile-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6,93,253,.46);
  pointer-events: none;
}
.profile-cover-card .profile-cover > img {
  position: relative;
  z-index: 2;
  width: 142px !important;
  margin-left: auto;
  filter: brightness(0) invert(1);
}
.cover-edit,
.avatar-edit {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #151516;
  box-shadow: 0 8px 20px rgba(20,20,22,.16);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.23,1,.32,1), background-color 180ms ease;
}
.cover-edit:hover,
.avatar-edit:hover { transform: scale(1.08); background: var(--accent); }
.cover-edit { right: 14px; bottom: 14px; width: 31px; height: 31px; }
.cover-edit .material-symbols-outlined,
.avatar-edit .material-symbols-outlined { font-size: 15px; }
.profile-cover-card .avatar-picker-current {
  position: absolute;
  left: 22px;
  bottom: 0;
  z-index: 7;
  width: 108px !important;
  height: 108px !important;
  padding: 5px !important;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 14px 32px rgba(20,20,22,.17);
}
.profile-cover-card .avatar-picker-current > img {
  width: 98px !important;
  height: 98px !important;
  border-radius: 50%;
  object-fit: cover;
}
.profile-cover-card .avatar-edit { right: -3px; bottom: 2px; width: 32px; height: 32px; }

.avatar-picker-popover,
.cover-picker-popover {
  position: absolute;
  z-index: 6;
  display: block !important;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(245,246,248,.84);
  box-shadow: 0 18px 42px rgba(20,20,22,.15);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.88);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.2,1.3,.38,1), visibility 180ms;
}
.avatar-picker-popover.is-open,
.cover-picker-popover.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
.avatar-picker-popover {
  left: -81px;
  bottom: -1px;
  z-index: 9;
  width: 310px;
  border-radius: 999px;
  transform-origin: 50% 50%;
}
.avatar-picker-options,
.cover-picker-options {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.avatar-picker-options::-webkit-scrollbar,
.cover-picker-options::-webkit-scrollbar { display: none; }
.avatar-picker-options { gap: 10px; padding-inline: 112px; }
.avatar-option {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #fff;
  scroll-snap-align: center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.23,1,.32,1), border-color 180ms ease;
}
.avatar-option:hover { transform: scale(1.08); }
.avatar-option.active { opacity: 0; transform: scale(.82); pointer-events: none; }
.avatar-option img { width: 100%; height: 100%; object-fit: cover; }

.cover-picker-popover {
  top: 35px;
  left: 50%;
  width: min(430px, calc(100% - 28px));
  border-radius: 17px;
  transform: translateX(-50%) scale(.9);
  transform-origin: 50% 50%;
}
.cover-picker-popover.is-open { transform: translateX(-50%) scale(1); }
.cover-picker-options { gap: 9px; padding-inline: 136px; }
.cover-option {
  width: 128px;
  height: 70px;
  flex: 0 0 128px;
  border: 2px solid transparent;
  border-radius: 13px;
  background-image: var(--cover-preview);
  background-position: center;
  background-size: cover;
  scroll-snap-align: center;
  transition: transform 220ms cubic-bezier(.23,1,.32,1), border-color 180ms ease, opacity 180ms ease;
}
.cover-option:hover { transform: scale(1.035); }
.cover-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14); }
.avatar-picker-popover.is-selecting,
.cover-picker-popover.is-selecting { pointer-events: none; }

.profile-summary-card {
  position: relative;
  display: grid;
  gap: 11px !important;
  padding: 7px 14px 13px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.profile-summary-card .profile-name-line {
  grid-template-columns: minmax(0,1fr) minmax(210px,240px) !important;
  gap: 26px !important;
}
.profile-summary-card h2 { display: grid; font-size: 25px !important; font-weight: 800; }
.profile-summary-card h2 > * { grid-area: 1 / 1; }
.profile-identity-copy { min-width: 0; display: grid; gap: 2px; }
.profile-name-trigger,
.profile-public-id {
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-align: left;
}
.profile-name-trigger {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color 180ms ease, transform 180ms cubic-bezier(.23,1,.32,1);
}
.profile-name-trigger:hover { color: var(--accent); transform: translateY(-1px); }
.profile-name-trigger.is-editing { opacity: 0; pointer-events: none; }
.profile-name-input {
  display: none;
  width: min(250px, 100%);
  min-height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid rgba(var(--accent-rgb),.34);
  border-radius: 9px;
  font: inherit;
  font-weight: inherit;
  background: rgba(255,255,255,.82);
  outline: none;
}
.profile-name-input.is-editing { display: inline-block; }
.profile-public-id {
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0;
  transition: color 160ms ease;
}
.profile-public-id:hover { color: var(--accent); }
.profile-summary-card .achievement-rail {
  max-width: 240px;
  gap: 8px;
  padding: 4px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-summary-card .achievement-rail::-webkit-scrollbar { display: none; }
.achievement {
  width: 24px !important;
  min-width: 24px !important;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.23,1,.32,1), color 180ms ease;
}
.achievement:hover { transform: scale(1.18); }
.achievement i { font-size: 18px !important; }
.achievement b { width: 4px; height: 4px; }
.achievement.unlocked b,
.achievement.featured b { visibility: visible !important; background: var(--accent) !important; }
.achievement.featured { color: var(--accent); }
.achievement-popover {
  position: absolute;
  top: 48px;
  right: 14px;
  z-index: 12;
  width: min(245px, calc(100% - 28px));
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 13px;
  color: #fff;
  background: rgba(6,93,253,.94);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb),.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.96);
  transition: opacity 170ms ease, transform 220ms cubic-bezier(.23,1,.32,1), visibility 170ms;
}
.achievement-popover.is-open { opacity: 1; visibility: visible; transform: none; }
.achievement-popover strong { font-size: 11px; }
.achievement-popover span { font-size: 10px; line-height: 1.4; opacity: .82; }

.profile-details-row {
  display: grid;
  grid-template-columns: minmax(0,1.38fr) minmax(0,1fr);
  align-items: stretch;
  padding-top: 8px;
  border-top: 1px solid rgba(20,20,22,.08);
}
.profile-summary-card .profile-usage {
  display: flex !important;
  gap: 0 !important;
  padding: 0;
  border: 0;
}
.profile-summary-card .profile-usage span {
  min-height: 0 !important;
  flex: 1;
  display: grid;
  justify-items: center;
  grid-template-rows: 22px 14px;
  align-content: center;
  gap: 1px;
  padding: 2px 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center;
}
.profile-summary-card .profile-usage span + span { border-left: 1px solid rgba(20,20,22,.08); }
.profile-summary-card .profile-usage strong { font-size: 17px; line-height: 22px; }
.profile-summary-card .profile-usage small { line-height: 14px; }
.profile-email {
  min-width: 0;
  display: grid;
  grid-template-rows: 22px 14px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 2px 10px;
  border-left: 1px solid rgba(20,20,22,.08);
}
.profile-email small { color: var(--muted); font-size: 9px; line-height: 14px; }
.profile-email-copy {
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--ink);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font: 700 17px/22px "Manrope", sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 160ms ease, transform 180ms cubic-bezier(.23,1,.32,1);
}
.profile-email-copy:hover { color: var(--accent); transform: translateY(-1px); }

.profile-name-trigger.liquid-control.is-fluid-active,
.profile-name-trigger.liquid-control.is-fluid-exiting,
.profile-public-id.liquid-control.is-fluid-active,
.profile-public-id.liquid-control.is-fluid-exiting,
.profile-email-copy.liquid-control.is-fluid-active,
.profile-email-copy.liquid-control.is-fluid-exiting {
  color: var(--accent) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.profile-name-input,
.profile-name-input:focus {
  color: var(--accent) !important;
  caret-color: var(--accent);
}
.profile-name-input::selection { color: var(--accent); background: transparent; }

@media (min-width: 1061px) {
  body:not(.sidebar-collapsed) .account-side-panel {
    --fluid-radius: 0px;
    --control-fluid: var(--accent);
    overflow: hidden;
    border-radius: 28px;
    background-color: rgba(255,255,255,.38);
    background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px));
    background-repeat: no-repeat;
    transition: --fluid-radius 560ms cubic-bezier(.16,1,.3,1), box-shadow 220ms ease;
  }
  body:not(.sidebar-collapsed) .account-side-panel:has(.account-summary.is-fluid-active) {
    --fluid-radius: var(--fluid-max);
    box-shadow: 0 16px 38px rgba(var(--accent-rgb),.16);
  }
  body:not(.sidebar-collapsed) .account-summary.liquid-control,
  body:not(.sidebar-collapsed) .account-summary.liquid-control.is-fluid-active,
  body:not(.sidebar-collapsed) .account-summary.liquid-control.is-fluid-exiting {
    background: transparent !important;
    background-image: none !important;
  }
  body.sidebar-wave-collapse .sidebar-legal,
  body.sidebar-wave-expand .sidebar-legal {
    overflow: visible !important;
    isolation: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.sidebar-wave-collapse #sidebarLegalToggle,
  body.sidebar-wave-expand #sidebarLegalToggle {
    overflow: visible !important;
    border-radius: 50% !important;
    background-clip: padding-box !important;
    box-shadow: 0 12px 32px rgba(20,20,22,.09) !important;
  }
}

.auth-forgot {
  width: max-content;
  margin: 2px 2px 0 auto;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font: 600 10px "Manrope", sans-serif;
  transition: color 160ms ease;
}
.auth-forgot:hover { color: var(--accent); }
.auth-forgot-back { margin: 2px auto 0; }

.profile-modal-card .form-grid { gap: 7px; }
.profile-modal-card .form-grid label { font-size: 10px; }
.profile-modal-card .form-grid input { min-height: 46px; border-radius: 15px; }
.profile-modal-card .account-security { gap: 2px; }
.profile-modal-card .account-security .side-action { min-height: 42px; }
.profile-modal-card .account-security .side-action,
.profile-modal-card .account-security .side-action:hover,
.profile-modal-card .account-security .side-action:focus-visible,
.profile-modal-card .account-security .side-action.liquid-control.is-fluid-active,
.profile-modal-card .account-security .side-action.liquid-control.is-fluid-entering,
.profile-modal-card .account-security .side-action.liquid-control.is-fluid-exiting {
  box-shadow: none !important;
}
.profile-modal-card .modal-form-footer .btn { min-height: 48px; }

/* Keep the compact legal flyout closed while the drawer changes geometry. */
body.sidebar-transitioning .sidebar-legal-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-8px) scale(.96) !important;
}

/* The upload action becomes the only destructive control after files are selected. */
#uploadAction {
  padding: 0;
  border: 0;
  transition: transform 180ms cubic-bezier(.23,1,.32,1), background-color 200ms ease, color 160ms ease !important;
}
#uploadAction > .material-symbols-outlined { font-size: 22px; }
#uploadAction.is-reset,
#uploadAction.is-reset.liquid-control,
.upload-stage.is-fluid-active #uploadAction.is-reset,
#uploadAction.is-reset.liquid-control.is-fluid-exiting {
  --control-base: #151516;
  --control-fluid: #d92d42;
  color: #fff !important;
  border-color: transparent !important;
  background-color: #151516 !important;
  background-image: none !important;
  box-shadow: none !important;
}
#uploadAction.is-reset:hover,
#uploadAction.is-reset.liquid-control.is-fluid-active {
  color: #fff !important;
  background-color: #d92d42 !important;
  background-image: none !important;
  transform: scale(1.045);
}
#uploadAction.is-reset:active { transform: scale(.92); }

/* Clicking a brief field pushes the accent fill back out from the exact contact point. */
.brief-field { isolation: isolate; }
.brief-field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: #e7e7e4;
  pointer-events: none;
  visibility: hidden;
  clip-path: circle(3px at var(--restore-x, 50%) var(--restore-y, 50%));
  transition: none;
  will-change: clip-path;
}
.brief-field > span,
.brief-field > .brief-control { position: relative; z-index: 2; }
.brief-field > .brief-counter { z-index: 4; }
.brief-field.is-restoring::after {
  visibility: visible;
  clip-path: circle(var(--restore-radius, 320px) at var(--restore-x, 50%) var(--restore-y, 50%));
  transition: clip-path 1350ms cubic-bezier(.36,.05,.18,1), visibility 0s;
}
.brief-field.is-input-active,
.brief-field.is-fluid-active.is-input-active {
  border-color: rgba(20,20,22,.08) !important;
  background-color: #e7e7e4 !important;
  background-image: none !important;
}
.brief-field.is-restoring > span,
.brief-field.is-restoring > .brief-control,
.brief-field.is-fluid-active.is-input-active > span,
.brief-field.is-fluid-active.is-input-active > .brief-control {
  color: var(--ink) !important;
}
.brief-field.is-restoring > span,
.brief-field.is-restoring > .brief-control { transition-delay: 180ms; }
.brief-field.is-restoring .brief-control::placeholder,
.brief-field.is-fluid-active.is-input-active .brief-control::placeholder { color: rgba(20,20,22,.48) !important; }
.brief-field.is-restoring .brief-counter,
.brief-field.is-fluid-active.is-input-active .brief-counter { color: rgba(20,20,22,.38) !important; }

/* Closed compact legal menus do not participate in drawer interpolation. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .sidebar-legal:not(.is-open) .sidebar-legal-menu,
  body.sidebar-transitioning .sidebar-legal-menu,
  body.sidebar-wave-collapse .sidebar-legal-menu,
  body.sidebar-wave-expand .sidebar-legal-menu {
    display: none !important;
  }
  body.sidebar-collapsed .sidebar-legal.is-open .sidebar-legal-menu {
    display: flex !important;
    animation: compact-legal-in 220ms cubic-bezier(.23,1,.32,1) both;
  }
}
@keyframes compact-legal-in {
  from { opacity: 0; transform: translateX(-8px) scale(.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Keep the beta marker readable on the blue liquid state. */
.product-sidebar .side-link[data-mode="video"].is-fluid-active .side-badge,
.product-sidebar .side-link[data-mode="video"]:hover .side-badge {
  color: var(--accent) !important;
  background: rgba(255,255,255,.94) !important;
}

/* Idea cards now carry one vertically centered product category only. */
.idea-template-copy {
  align-self: stretch;
  display: flex !important;
  align-items: center;
  gap: 0 !important;
}
.idea-template-copy strong { line-height: 1.25; }

/* Active mode uses exactly the same horizontal axis as every other drawer action. */
.product-sidebar .side-link.active,
.product-sidebar .side-link.active:hover,
.product-sidebar .side-link.active.liquid-control,
.product-sidebar .side-link.active.liquid-control.is-fluid-active,
.product-sidebar .side-link.active.liquid-control.is-fluid-exiting {
  left: auto !important;
  translate: none !important;
  transform: none !important;
}

/* The current section is a stable black marker, not another hover action. */
.product-sidebar .side-link.active,
.product-sidebar .side-link.active:hover,
.product-sidebar .side-link.active.is-inert-hover,
.product-sidebar .side-link.active.liquid-control,
.product-sidebar .side-link.active.liquid-control.is-fluid-active,
.product-sidebar .side-link.active.liquid-control.is-fluid-exiting {
  --fluid-radius: 0px !important;
  --control-base: #151516 !important;
  --control-fluid: #151516 !important;
  color: #fff !important;
  border-color: transparent !important;
  background-color: #151516 !important;
  background-image: none !important;
  box-shadow: none !important;
  translate: none !important;
  transform: none !important;
}
body.cursor-active-nav #custom-cursor,
body:has(.product-sidebar .side-link.active:hover) #custom-cursor {
  --cursor-size: 16px !important;
  --cursor-fill: #fff !important;
  --cursor-border: rgba(255,255,255,.72) !important;
  --cursor-shadow: none !important;
}

@media (max-width: 620px) {
  .profile-modal-card { width: calc(100vw - 18px) !important; max-height: calc(100vh - 12px); }
  .profile-cover-card .profile-cover { height: 170px !important; }
  .profile-cover-card { min-height: 214px !important; }
  .profile-cover-card .avatar-picker-current { left: 16px; width: 96px !important; height: 96px !important; }
  .profile-cover-card .avatar-picker-current > img { width: 86px !important; height: 86px !important; }
  .avatar-picker-popover { left: -96px; width: min(300px, calc(100vw - 34px)); }
  .profile-summary-card .profile-name-line { grid-template-columns: 1fr !important; }
  .profile-summary-card .achievement-rail { justify-content: flex-start; max-width: 100%; }
  .profile-details-row { grid-template-columns: 1fr; gap: 8px; }
  .profile-email { padding-top: 8px; border-top: 1px solid rgba(20,20,22,.08); border-left: 0; }
  .profile-modal-card .form-grid { grid-template-columns: 1fr; }
}

/* Scrollable picker state: narrow cover previews expand only in the center. */
.cover-option {
  width: 78px !important;
  flex: 0 0 78px !important;
  opacity: .74;
  background-size: cover;
  background-position: center;
  transform: translateY(26px) scale(.86);
  transition: flex-basis 380ms cubic-bezier(.2,.78,.22,1), width 380ms cubic-bezier(.2,.78,.22,1), transform 380ms cubic-bezier(.2,.78,.22,1), opacity 220ms ease !important;
}
.cover-option[data-distance="-1"],
.cover-option[data-distance="1"] { opacity: .9; transform: translateY(14px) scale(.94); }
.cover-option[data-distance="-2"],
.cover-option[data-distance="2"] { opacity: .48; transform: translateY(38px) scale(.78); }
.cover-option.active {
  width: 100% !important;
  flex-basis: 100% !important;
  opacity: 0 !important;
  transform: translateY(0) scale(1) !important;
}
.cover-picker-options,
.avatar-picker-options { touch-action: pan-y; cursor: grab; }
.cover-picker-options:active,
.avatar-picker-options:active { cursor: grabbing; }
.cover-edit.is-confirm,
.avatar-edit.is-confirm {
  z-index: 12;
  color: #fff;
  background: var(--accent);
  animation: picker-confirm-arrive 260ms cubic-bezier(.2,1.4,.38,1) both;
}
.cover-edit.is-confirm .material-symbols-outlined,
.avatar-edit.is-confirm .material-symbols-outlined { font-size: 18px; }
@keyframes picker-confirm-arrive {
  0% { opacity: 0; scale: .25; }
  72% { opacity: 1; scale: 1.12; }
  100% { opacity: 1; scale: 1; }
}

@media (max-width: 620px) {
  .cover-option { width: 58px !important; flex-basis: 58px !important; }
  .cover-option.active { width: 100% !important; flex-basis: 100% !important; }
}

/* The edited object itself becomes the carousel center; no secondary popover surface. */
.profile-modal-card,
.profile-modal-card .profile-form,
.profile-cover-card { overflow: visible !important; }
.avatar-picker-popover,
.cover-picker-popover {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.cover-picker-popover {
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 190px;
  transform: scale(.96) !important;
}
.cover-picker-popover.is-open { transform: scale(1) !important; }
.cover-picker-options {
  width: 100% !important;
  height: 190px;
  gap: 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  will-change: transform;
}
.cover-option {
  width: 100% !important;
  height: 190px !important;
  flex: 0 0 100% !important;
  border: 0 !important;
  border-radius: 21px !important;
  box-shadow: 0 20px 46px rgba(20,20,22,.18);
  opacity: .82;
  transform: scale(.92);
}
.cover-option:hover { opacity: 1; transform: scale(.95); }
.cover-option.active {
  opacity: 0 !important;
  pointer-events: none;
  box-shadow: none !important;
}
.avatar-picker-popover {
  left: 22px !important;
  right: auto !important;
  bottom: 0 !important;
  width: 108px !important;
  height: 108px;
  transform: scale(.9) !important;
}
.avatar-picker-popover.is-open { transform: scale(1) !important; }
.avatar-picker-options {
  width: 108px !important;
  height: 108px;
  gap: 16px !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  will-change: transform;
}
.avatar-option {
  width: 108px !important;
  height: 108px !important;
  flex: 0 0 108px !important;
  border: 5px solid #fff !important;
  box-shadow: 0 16px 36px rgba(20,20,22,.18);
  opacity: .86;
  transform: scale(.9);
}
.avatar-option:hover { opacity: 1; transform: scale(.96); }
.avatar-option.active {
  opacity: 0 !important;
  pointer-events: none;
  box-shadow: none !important;
}
.cover-picker-popover.is-selecting,
.avatar-picker-popover.is-selecting { opacity: 1; }

@media (max-width: 620px) {
  .cover-picker-popover,
  .cover-picker-options,
  .cover-option { height: 170px !important; }
  .avatar-picker-popover { left: 16px !important; width: 96px !important; height: 96px; }
  .avatar-picker-options { width: 96px !important; height: 96px; }
  .avatar-option { width: 96px !important; height: 96px !important; flex-basis: 96px !important; }
}

/* The support card uses the same 6px rhythm as the image/video pair. */
body:not(.sidebar-collapsed) .support-side-panel {
  display: grid;
  align-content: center;
}
body:not(.sidebar-collapsed) .support-side-panel .side-nav { gap: 6px; }

/* Workbench surfaces become a single accent plane with no secondary rim. */
.upload-stage.is-fluid-active,
.brief-field.is-fluid-active {
  border-color: var(--accent) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.upload-stage.is-fluid-active::before,
.upload-stage.is-fluid-active::after,
.brief-field.is-fluid-active::before,
.brief-field.is-fluid-active::after { box-shadow: none !important; }

/* Header placement is switched by JavaScript only after the old text is erased. */
#billingModal .modal-heading h2,
#projectsModal .modal-heading h2,
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2,
#billingModal .modal-scroll-card.is-header-expanding .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-expanding .modal-heading h2 {
  animation: none !important;
  transition: none !important;
}
#billingModal .modal-scroll-card.is-header-compact .modal-heading h2,
#projectsModal .modal-scroll-card.is-header-compact .modal-heading h2 {
  left: 50%;
  top: 10px;
  transform: translate(-50%,-50%);
}
#billingModal .modal-scroll-card:not(.is-header-compact) .modal-heading h2,
#projectsModal .modal-scroll-card:not(.is-header-compact) .modal-heading h2 {
  left: 0;
  top: 30px;
  transform: none;
}

/* Final picker geometry: inactive covers are cropped strips; the centered slot expands full-width. */
.cover-picker-options { touch-action: pan-y; cursor: grab; }
.avatar-picker-options { touch-action: pan-y; cursor: grab; }
.cover-picker-options:active,
.avatar-picker-options:active { cursor: grabbing; }
.cover-option,
.cover-picker-options .cover-option {
  width: 78px !important;
  flex: 0 0 78px !important;
  opacity: .74;
  background-size: cover;
  background-position: center;
  transform: translateY(26px) scale(.86);
  transition: flex-basis 380ms cubic-bezier(.2,.78,.22,1), width 380ms cubic-bezier(.2,.78,.22,1), transform 380ms cubic-bezier(.2,.78,.22,1), opacity 220ms ease !important;
}
.cover-option[data-distance="-1"],
.cover-option[data-distance="1"] { opacity: .9; transform: translateY(14px) scale(.94); }
.cover-option[data-distance="-2"],
.cover-option[data-distance="2"] { opacity: .48; transform: translateY(38px) scale(.78); }
.cover-option.active,
.cover-picker-options .cover-option.active {
  width: 100% !important;
  flex: 0 0 100% !important;
  opacity: 0 !important;
  transform: translateY(0) scale(1) !important;
}
.cover-edit.is-confirm,
.avatar-edit.is-confirm {
  z-index: 12;
  color: #fff;
  background: var(--accent);
  animation: picker-confirm-arrive 260ms cubic-bezier(.2,1.4,.38,1) both;
}
.cover-edit.is-confirm .material-symbols-outlined,
.avatar-edit.is-confirm .material-symbols-outlined { font-size: 18px; }
@media (max-width: 620px) {
  .cover-option,
  .cover-picker-options .cover-option { width: 58px !important; flex-basis: 58px !important; }
  .cover-option.active,
  .cover-picker-options .cover-option.active { width: 100% !important; flex-basis: 100% !important; }
}

/* Continuous physics carousels. Geometry is driven per-frame by JavaScript. */
.cover-picker-options,
.avatar-picker-options {
  position: absolute;
  inset: 0;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
  touch-action: pan-y;
  user-select: none;
  z-index: 2;
}
.cover-option,
.avatar-option {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  will-change: width, height, transform;
}
.cover-option,
.cover-option:hover,
.cover-option.active,
.cover-picker-options .cover-option.active {
  opacity: 1 !important;
  border: 0 !important;
  box-shadow: 0 18px 42px rgba(20,20,22,.16) !important;
  transition: box-shadow 180ms ease, border-color 180ms ease !important;
}
.avatar-option,
.avatar-option:hover,
.avatar-option.active {
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 5px solid #fff !important;
  box-shadow: 0 14px 34px rgba(20,20,22,.16) !important;
  transition: box-shadow 180ms ease, border-color 180ms ease !important;
}
.cover-option.active,
.avatar-option.active {
  border-color: var(--accent) !important;
  animation: picker-selected-pulse 1.8s ease-in-out infinite;
}
@keyframes picker-selected-pulse {
  0%,100% { filter: drop-shadow(0 0 1px rgba(var(--accent-rgb),.8)); }
  50% { filter: drop-shadow(0 0 7px rgba(var(--accent-rgb),.42)); }
}
.cover-picker-popover::after,
.avatar-picker-popover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid rgba(20,20,22,.18);
  pointer-events: none;
  transform: scale(1);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.cover-picker-popover::after { border-radius: 21px; }
.avatar-picker-popover::after { border-radius: 50%; }
.cover-picker-popover.is-moving::after,
.avatar-picker-popover.is-moving::after {
  border-color: rgba(20,20,22,.22);
  transform: none;
}
.cover-picker-popover.is-snapped::after,
.avatar-picker-popover.is-snapped::after {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12);
  animation: picker-frame-lock 420ms ease-out both;
}
@keyframes picker-frame-lock {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
  55% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.16); }
  100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12); }
}
.profile-cover.is-picker-editing {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.profile-cover.is-picker-editing::after,
.profile-cover.is-picker-editing > img { opacity: 0 !important; }
.avatar-picker-current.is-picker-editing {
  background: transparent !important;
  box-shadow: none !important;
}
.avatar-picker-current.is-picker-editing > img { opacity: 0 !important; }
.cover-edit,
.avatar-edit,
.cover-edit:hover,
.avatar-edit:hover {
  border: 0 !important;
  color: var(--ink);
  background-color: #fff;
  box-shadow: 0 10px 26px rgba(20,20,22,.14);
  transform: none;
}
.cover-edit.liquid-control,
.avatar-edit.liquid-control {
  --control-base: #fff;
  --control-fluid: var(--accent);
  background-color: var(--control-base) !important;
  background-image: radial-gradient(circle at var(--fluid-x) var(--fluid-y), var(--control-fluid) 0 var(--fluid-radius), transparent calc(var(--fluid-radius) + .75px)) !important;
}
.cover-edit.liquid-control.is-fluid-active,
.avatar-edit.liquid-control.is-fluid-active { color: #fff !important; }
.cover-edit:active,
.avatar-edit:active { scale: .9; }

/* Compact account control follows the rounded-square rail geometry. */
@media (min-width: 1061px) {
  body.sidebar-collapsed .account-side-panel,
  body.sidebar-collapsed .account-summary,
  body.sidebar-collapsed .account-summary:hover,
  body.sidebar-collapsed .account-summary.liquid-control,
  body.sidebar-collapsed .account-summary.liquid-control.is-fluid-active {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    border-radius: 22px !important;
  }
  body.sidebar-collapsed .account-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 17px !important;
  }
}

.profile-summary-card .profile-name-line { align-items: center !important; }
.profile-summary-card h2 { line-height: 34px !important; }
.profile-summary-card .achievement-rail {
  min-height: 38px;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 6px 8px !important;
  margin: -6px -8px !important;
  scroll-padding-inline: 8px;
}
.profile-summary-card .achievement:first-child { margin-left: 2px; }

.profile-modal-card .modal-corner-actions,
.profile-modal-card .modal-close {
  z-index: 80 !important;
  pointer-events: auto !important;
}
.modal-shell > .toast { z-index: 120 !important; }

/* Shared project feedback and viewer. */
.project-nav-control { position: relative; }
.project-nav-control .project-nav-badge { margin-left: auto; }
.project-nav-badge { min-width: 17px; height: 17px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 9px; font-weight: 700; line-height: 1; }
.project-nav-badge.is-loading { background: #151518; }
.project-nav-badge.is-loading .material-symbols-outlined { font-size: 12px; animation: project-badge-spin 1s linear infinite; }
.project-nav-badge.is-ready { animation: project-badge-pop 360ms cubic-bezier(.2,1.45,.3,1) both; }
.project-nav-badge.is-ready .material-symbols-outlined { font-size: 12px; }
.project-card-heading h3 button { max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.project-actions { display: inline-flex; align-items: center; gap: 3px; }
.project-actions .project-icon-action { width: 28px; height: 28px; }
.project-flight { position: fixed; z-index: 1000; width: 28px; height: 28px; border-radius: 10px; background: var(--accent); box-shadow: 0 0 0 8px rgba(var(--accent-rgb),.12); pointer-events: none; animation: project-flight 670ms cubic-bezier(.22,.9,.25,1) both; }

.project-viewer[open] { position: fixed; z-index: 900; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: clamp(14px, 3vw, 40px); border: 0; background: rgba(20,23,30,.24); backdrop-filter: blur(16px); }
.project-viewer::backdrop { background: rgba(20,23,30,.24); backdrop-filter: blur(16px); }
.project-viewer-card { width: min(1120px, 100%); height: 100%; margin: auto; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.88); border-radius: 30px; background: rgba(247,248,251,.96); box-shadow: 0 28px 80px rgba(18,22,34,.28); }
.project-viewer-header { min-height: 68px; padding: 12px 14px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid rgba(18,19,24,.08); }
.project-viewer-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: #151518; }
.project-viewer-name { min-width: 0; text-align: center; }
.project-viewer-name button, .project-viewer-name input { max-width: 100%; border: 0; background: transparent; color: #151518; font: 700 clamp(16px, 2vw, 23px)/1.2 Manrope, sans-serif; text-align: center; }
.project-viewer-name input { width: min(100%, 420px); padding: 7px 12px; border-radius: 12px; background: #fff; outline: 2px solid rgba(var(--accent-rgb),.24); }
.project-viewer-save-title { min-height: 40px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--accent); color: #fff; font-weight: 800; }
.project-viewer-media { min-height: 0; padding: 22px; display: flex; gap: 16px; align-items: center; justify-content: center; overflow: auto; scrollbar-width: none; }
.project-viewer-media::-webkit-scrollbar { display: none; }
.project-viewer-media img { max-width: min(100%, 760px); max-height: 100%; border-radius: 18px; object-fit: contain; box-shadow: 0 24px 50px rgba(18,22,34,.2); }
.project-viewer-actions { padding: 13px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-top: 1px solid rgba(18,19,24,.08); }
.project-viewer-actions button { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 14px; background: #151518; color: #fff; font-weight: 800; }
.project-viewer-actions button.is-danger { background: #fff0f2; color: #c5273c; }
.credit-button.is-free::after { content: "Бесплатно"; margin-left: 5px; color: var(--accent); font: 700 10px/1 "IBM Plex Mono", monospace; }
.desktop-project-toolbar { display: inline-flex; align-items: center; gap: 6px; margin-right: 64px; }
.desktop-project-toolbar .icon-button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(18,19,24,.06); color: #151518; }
.desktop-project-toolbar .icon-button.is-active { background: var(--accent); color: #fff; }
@media (min-width: 761px) {
  #projectsModal .desktop-project-toolbar { position: absolute; z-index: 4; top: 20px; right: 66px; margin: 0; }
  #projectsModal .modal-scroll-card.is-header-compact .desktop-project-toolbar { opacity: 0; transform: translateY(-5px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; }
}
.auth-dialog { position: relative; margin-top: 42px !important; }
.auth-brand-mark { position: absolute; z-index: 2; top: -42px; left: 50%; width: 124px; transform: translateX(-50%); pointer-events: none; }

@media (min-width: 761px) {
  body.product-layout, body:has(.product-layout) { overflow: hidden; }
  .generator-main { overflow: hidden; }
}

/* A single cinematic wave crosses the whole account card from the action point. */
.profile-modal-card { isolation: isolate; }
.profile-transition-wave {
  --wave-x: 50%;
  --wave-y: 50%;
  position: absolute;
  z-index: 70;
  inset: 0;
  clip-path: inset(0 round 28px);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--wave-x) var(--wave-y), rgba(6,93,253,.12), transparent 34%);
}
.profile-transition-wave::before,
.profile-transition-wave::after {
  content: "";
  position: absolute;
  left: var(--wave-x);
  top: var(--wave-y);
  width: 1500px;
  height: 1500px;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(6,93,253,.9) 0 1.55px, transparent 1.95px);
  background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle, transparent 0 35%, #000 41%, #000 49%, transparent 57%);
  mask-image: radial-gradient(circle, transparent 0 35%, #000 41%, #000 49%, transparent 57%);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.025) rotate(-3deg);
  will-change: transform, opacity;
}
.profile-transition-wave::after {
  width: 1660px;
  height: 1660px;
  background-image: radial-gradient(circle, rgba(6,93,253,.58) 0 1px, transparent 1.45px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle, transparent 0 39%, #000 43%, #000 51%, transparent 60%);
  mask-image: radial-gradient(circle, transparent 0 39%, #000 43%, #000 51%, transparent 60%);
}
.profile-transition-wave.is-active {
  opacity: 1;
  animation: profile-wave-veil 980ms ease-out both;
}
.profile-transition-wave.is-active::before { animation: profile-wave-front 940ms cubic-bezier(.18,.72,.2,1) both; }
.profile-transition-wave.is-active::after { animation: profile-wave-tail 1020ms cubic-bezier(.16,.7,.2,1) 70ms both; }
.profile-transition-wave.is-closing::before { animation-direction: reverse; }
.profile-transition-wave.is-closing::after { animation-direction: reverse; }
@keyframes profile-wave-front {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.02) rotate(-4deg); }
  14% { opacity: .92; }
  68% { opacity: .76; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.08) rotate(2deg); }
}
@keyframes profile-wave-tail {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.015) rotate(3deg); }
  20% { opacity: .62; }
  72% { opacity: .38; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.12) rotate(-1deg); }
}
@keyframes profile-wave-veil {
  0%,100% { background-color: rgba(6,93,253,0); }
  42% { background-color: rgba(6,93,253,.025); }
}

/* Selection belongs to the center receiver, never to the image card itself. */
.cover-option.active,
.cover-picker-options .cover-option.active {
  border: 0 !important;
  animation: none !important;
  filter: none !important;
}
.avatar-option.active {
  border-color: #fff !important;
  animation: none !important;
  filter: none !important;
}
.cover-picker-popover::after,
.avatar-picker-popover::after { z-index: 1; transform: none !important; }
.cover-picker-popover.is-moving::after,
.avatar-picker-popover.is-moving::after {
  z-index: 1;
  border-color: rgba(20,20,22,.2) !important;
  box-shadow: none !important;
  animation: none !important;
}
.cover-picker-popover.is-snapped::after,
.avatar-picker-popover.is-snapped::after { z-index: 40; }

/* Editing curtains the lower profile without changing the card geometry. */
.profile-form { position: relative; }
.profile-picker-save {
  position: absolute;
  top: var(--picker-curtain-top, 330px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 0 0 22px 22px;
  background: rgba(246,247,249,.42);
  -webkit-backdrop-filter: blur(16px) saturate(.86);
  backdrop-filter: blur(16px) saturate(.86);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 300ms cubic-bezier(.23,1,.32,1), visibility 220ms;
}
.profile-picker-save::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.16);
  pointer-events: none;
}
.profile-picker-save .btn {
  position: relative;
  z-index: 2;
  min-width: 190px;
  min-height: 52px;
  justify-content: center;
  box-shadow: 0 16px 38px rgba(20,20,22,.18);
  margin-top: -5px;
  margin-bottom: 5px;
}
.profile-picker-active .profile-picker-save {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* One grid track owns the contraction, keeping the fan continuous and gap-free. */
.profile-editable-lower {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  perspective: 900px;
  transition: grid-template-rows 680ms cubic-bezier(.16,1,.3,1);
}
.profile-editable-lower-inner {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transform-origin: 50% 0;
  transition: opacity 310ms ease, transform 680ms cubic-bezier(.16,1,.3,1), filter 460ms ease;
}
.profile-editable-lower-inner > * {
  transform: none;
  transition: transform 680ms cubic-bezier(.16,1,.3,1), opacity 300ms ease;
}
.profile-picker-active .profile-editable-lower { grid-template-rows: 0fr; }
.profile-picker-active .profile-editable-lower-inner {
  opacity: 0;
  filter: blur(1.2px);
  transform: translateY(-15px) rotateX(7deg) scale(.985);
  pointer-events: none;
}
.profile-picker-active .profile-editable-lower-inner > :nth-child(1) { transform: translateX(-12px) rotate(-.65deg); }
.profile-picker-active .profile-editable-lower-inner > :nth-child(2) { transform: translateX(8px) rotate(.5deg); }
.profile-picker-active .profile-editable-lower-inner > :nth-child(3) { transform: translateX(-5px) rotate(-.3deg); }
.profile-picker-active .profile-picker-save {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  min-height: 78px;
  padding: 8px 14px 14px;
  border-radius: 18px;
  z-index: 36;
  overflow: visible;
}
.profile-picker-releasing .profile-editable-lower-inner { transform-origin: 50% 50%; }
.profile-picker-releasing { position: relative; }

.cover-picker-popover:focus,
.avatar-picker-popover:focus { outline: none; }
.profile-picker-active .cover-edit,
.profile-picker-active .avatar-edit {
  opacity: 0 !important;
  scale: .2;
  pointer-events: none !important;
}

/* Geometry is already animated by requestAnimationFrame; a second CSS tween causes lag and overlap. */
.cover-picker-options .cover-option,
.cover-picker-options .cover-option:hover,
.cover-picker-options .cover-option.active,
.avatar-picker-options .avatar-option,
.avatar-picker-options .avatar-option:hover,
.avatar-picker-options .avatar-option.active {
  transition: border-color 160ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}