.effectsPropertyPopup>.effectsLogoEditorHead {
  width: 100% !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

.effectsPropertyPopup>.effectsLogoEditorHead>strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.effectsPropertyPopup>.effectsLogoEditorHead>.effectsLogoReplace {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.effectsPropertyPopup>.effectsLogoEditorHead>.effectsPropertyClose {
  flex: 0 0 auto !important;
}

.effectsLayerDock {
  --layer-name-width: clamp(210px, 25vw, 360px);
  color: #f5f5f5;
  background: #111;
  border-top: 1px solid #303030;
  font-family: inherit;
  z-index: 80;
}

.effectsLayerDockDither {
  position: fixed;
  left: var(--motion-rail-width, 72px);
  right: 0;
  bottom: 0;
  height: 78px;
  display: none;
}

body[data-tool-mode="dither"] .effectsLayerDockDither {
  display: block;
}

body[data-tool-mode="motion"] .effectsLayerDockDither {
  display: none;
}

body[data-tool-mode="motion"] .motionWorkspace {
  grid-template-rows: minmax(0, 1fr) 120px !important;
}

.motionTimeline:has(.effectsLayerDockMotion) {
  height: auto !important;
  min-height: 270px;
  padding: 0;
  display: block;
  overflow: hidden;
}

.effectsLayerDockMotion {
  position: relative;
  flex: 1 1 auto;
  height: 222px;
  min-height: 222px;
  border-top: 0;
}

.effectsLayerTransport {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 42px calc(var(--layer-name-width) - 66px) minmax(120px,
      1fr);
  align-items: center;
  gap: 12px;
  background: #111;
}

.effectsLayerTransport .motionTimelineTrack {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: visible;
}

.effectsLayerHeader {
  position: relative;
  height: 42px;
  display: grid;
  grid-template-columns: var(--layer-name-width) 1fr;
  align-items: center;
  border-bottom: 1px solid #292929;
  color: #999;
  font-size: 12px;
}

.effectsLayerHeader strong {
  padding: 0 18px;
  color: #fff;
  font-size: 14px;
}

.effectsLayerHeader span {
  padding: 0 16px;
  border-left: 1px solid #292929;
}

.effectsLayerList {
  height: calc(100% - 42px);
  min-height: 78px;
  overflow: auto;
  overscroll-behavior: contain;
}

.effectsLayerRow {
  position: relative;
  min-height: 39px;
  display: grid;
  grid-template-columns: var(--layer-name-width) 1fr;
  align-items: stretch;
  border-bottom: 1px solid #252525;
  background: #141414;
  outline: none;
  user-select: none;
}

.effectsLayerRow:hover {
  background: #1b1b1b;
}

.effectsLayerRow.isSelected {
  background: #242424;
  box-shadow: inset 3px 0 #fff;
}

.effectsLayerRow.isHidden {
  opacity: 0.55;
}

.effectsLayerRow.isDragging {
  opacity: 0.35;
}

.effectsLayerRow.dropBefore:before,
.effectsLayerRow.dropAfter:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  z-index: 2;
}

.effectsLayerRow.dropBefore:before {
  top: 0;
}

.effectsLayerRow.dropAfter:after {
  bottom: -1px;
}

.effectsLayerControls {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
}

.effectsLayerIcon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: #aaa;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.effectsLayerIcon:hover {
  color: #fff;
  background: #292929;
}

.effectsLayerIcon:disabled {
  opacity: 0.45;
  cursor: default;
}

.effectsLayerBadge {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #444;
  border-radius: 5px;
  color: #bbb;
  font-size: 10px;
}

.effectsLayerName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #efefef;
  font-size: 13px;
  font-weight: 600;
}

.effectsLayerControls small {
  margin-left: auto;
  padding-right: 6px;
  color: #737373;
  font-size: 10px;
}

.effectsLayerTiming {
  position: relative;
  min-width: 0;
  margin: 7px 16px;
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 6px;
  background-image: repeating-linear-gradient(90deg,
      #202020 0,
      #202020 1px,
      transparent 1px,
      transparent 10%);
}

.effectsLayerTiming span {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 8px;
  border-radius: 4px;
  background: #d8d8d8;
}

.effectsLayerRow.isSelected .effectsLayerTiming span {
  background: #fff;
}

.effectsLayerDockMotion .motionTimelineTicks {
  position: absolute;
  inset: 0;
  opacity: 0.7;
}

.effectsLayerDockMotion .motionTimelineTrack input[type="range"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: -1;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.effectsLayerDockMotion .motionTimelineTrack input[type="range"]::-webkit-slider-runnable-track {
  height: 42px !important;
  background: transparent !important;
}

.effectsLayerDockMotion .motionTimelineTrack input[type="range"]::-webkit-slider-thumb {
  width: 2px !important;
  height: 120px !important;
  margin: 0 !important;
  transform: translateY(39px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

.effectsLayerDockMotion .motionTimelineTrack input[type="range"]::-moz-range-track {
  height: 42px !important;
  background: transparent !important;
}

.effectsLayerDockMotion .motionTimelineTrack input[type="range"]::-moz-range-thumb {
  width: 2px !important;
  height: 120px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

.effectsLayerPlayhead {
  position: absolute !important;
  top: 0 !important;
  z-index: 1;
  width: 2px !important;
  height: 120px !important;
  pointer-events: none !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}

.effectsLayerPlayhead:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -2px) rotate(45deg);
  border-radius: 1px;
  background: #fff;
}

.effectsLayerDockMotion .effectsLayerHeader>strong,
.effectsLayerDockMotion .effectsLayerHeader>span {
  visibility: hidden;
}

.effectsLayerDockDither .effectsLayerRow {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .effectsLayerDock {
    --layer-name-width: 190px;
  }

  .effectsLayerTransport {
    padding: 0 12px;
    gap: 10px;
  }
}

.effectsLayerCollapse {
  position: absolute;
  right: 12px;
  top: 7px;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: #1d1d1d;
  color: #eee;
  font: 600 16px/1 sans-serif;
  cursor: pointer;
}

.effectsLayerCollapse:hover {
  background: #292929;
}

.effectsLayerDockDither.isCollapsed {
  height: 42px;
}

.effectsLayerDockDither.isCollapsed .effectsLayerList {
  display: none;
}

body[data-tool-mode="dither"] .effectPicker {
  bottom: 90px !important;
  transition: bottom 0.18s ease;
}

body[data-tool-mode="dither"]:has(.effectsLayerDockDither.isCollapsed) .effectPicker {
  bottom: 54px !important;
}

@media (max-width: 900px) {
  .effectsLayerDockDither {
    display: none !important;
  }

  body[data-tool-mode="dither"] .effectPicker {
    bottom: 12px !important;
  }
}

.effectsLogoAdd {
  padding: 22px 18px;
  border-top: 1px solid #303030;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.effectsLogoAdd h2 {
  margin: 0;
  font-size: 20px;
}

.effectsLogoAddButton {
  min-width: 88px;
  padding: 10px 14px;
  display: inline-grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  border: 1px solid #444;
  border-radius: 8px;
  background: #242424;
  color: #fff;
  cursor: pointer;
}

/* Step 4: Logo list and property editor. */
.effectsLogoAdd {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px 12px !important;
}

.effectsLogoAdd>h2 {
  align-self: center;
}

.effectsLogoBody {
  grid-column: 1/-1;
  display: grid;
  gap: 12px;
}

.effectsLogoList {
  display: grid;
  gap: 6px;
}

.effectsLogoEmpty {
  margin: 0;
  color: #777;
  font-size: 12px;
}

.effectsLogoItem {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid #303030;
  border-radius: 10px;
  background: #1d1d1d;
}

.effectsLogoItem.isSelected {
  border-color: #666;
  background: #242424;
}

.effectsLogoSelect {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eee;
  text-align: left;
  cursor: pointer;
}

.effectsLogoName {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}

.effectsLogoActions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.effectsLogoAction,
.effectsLogoReplace {
  min-height: 28px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #3a3a3a;
  border-radius: 7px;
  background: #222;
  color: #aaa;
  font:
    600 10px/1 system-ui,
    sans-serif;
  cursor: pointer;
}

.effectsLogoEditor {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #303030;
}

.effectsLogoEditorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.effectsLogoEditorHead strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.effectsLogoProperty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "range value";
  gap: 7px 10px;
  color: #fff;
}

.effectsLogoPropertyLabel {
  grid-area: label;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.6;
}

.effectsLogoPropertyValue {
  grid-area: value;
  min-width: 62px;
  height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid #393939;
  border-radius: 8px;
  background: #202020;
  color: #fff;
  font-size: 12px;
}

.effectsLogoPropertyValue input {
  width: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  text-align: right;
  font: inherit;
  -moz-appearance: textfield;
}

.effectsLogoPropertyValue input::-webkit-inner-spin-button,
.effectsLogoPropertyValue input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.effectsLogoProperty>input[type="range"] {
  grid-area: range;
  width: 100%;
  height: 30px;
  margin: 0;
  align-self: center;
}

.effectsLogoProperty input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.effectsLogoActions {
  flex-wrap: nowrap;
}

.effectsLogoAction {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
}

.effectsLogoAction svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effectsLogoActionText {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.effectsLogoAddButton[hidden] {
  display: none !important;
}

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

.effectsLogoAlign>.motionControlTitle {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.6;
}

.effectsLogoAlignGroup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: #202020;
}

.effectsLogoAlignGroup button {
  min-width: 0;
  height: 34px;
  padding: 0 3px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #888;
  font:
    600 10px/1 system-ui,
    sans-serif;
  cursor: pointer;
}

.effectsLogoAlignGroup button:hover {
  background: #303030;
  color: #fff;
}

.effectsLogoAlignGroup button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.motionControl.effectsLogoProperty {
  margin: 0 !important;
}

.motionControl.effectsLogoProperty>.effectsRangeVisual {
  grid-area: range;
}

.motionControl.effectsLogoProperty>.motionControlTitle {
  grid-area: title;
}

.motionControl.effectsLogoProperty>.motionControlEditor {
  grid-area: editor;
}

.effectsLayerDockMotion .effectsLayerList {
  height: 180px !important;
  min-height: 180px !important;
  overflow-y: scroll !important;
  scrollbar-width: thin;
  scrollbar-color: #555 #181818;
}

.effectsLayerDockMotion .effectsLayerList::-webkit-scrollbar {
  width: 8px;
}

.effectsLayerDockMotion .effectsLayerList::-webkit-scrollbar-track {
  background: #181818;
}

.effectsLayerDockMotion .effectsLayerList::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 8px;
}

.effectsLogoAlignGroup button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-tool-mode="motion"] .motionWorkspace {
  grid-template-rows: minmax(0, 1fr) 270px !important;
}

/* LOGO_RANGE_HIT_TARGET_FIX */
.effectsLogoProperty input[type="range"] {
  height: 40px !important;
  min-height: 40px !important;
  cursor: ew-resize !important;
  touch-action: none !important;
}

/* EFFECTS_TIMELINE_RESIZE_AND_LOGO_RANGE_DRAG */
:root {
  --effects-motion-timeline-height: 270px;
}

body[data-tool-mode="motion"] .motionWorkspace {
  grid-template-rows: minmax(0, 1fr) var(--effects-motion-timeline-height) !important;
}

.effectsLayerDockMotion {
  height: var(--effects-motion-timeline-height) !important;
  min-height: 150px !important;
}

.effectsTimelineResizeHandle {
  position: absolute;
  z-index: 30;
  top: -5px;
  left: 0;
  right: 0;
  height: 11px;
  cursor: ns-resize;
  touch-action: none;
}

.effectsTimelineResizeHandle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-50%);
  transition: background 0.15s;
}

.effectsTimelineResizeHandle:hover::after,
.effectsTimelineResizeHandle.is-dragging::after,
.effectsTimelineResizeHandle:focus-visible::after {
  background: rgba(255, 255, 255, 0.78);
}

.effectsLayerDockMotion .effectsLayerPlayhead {
  height: var(--effects-motion-timeline-height) !important;
  bottom: auto !important;
  pointer-events: none !important;
}

.effectsLogoProperty input[type="range"] {
  height: 40px !important;
  min-height: 40px !important;
  cursor: ew-resize !important;
  touch-action: none !important;
}

/* LOGO_RANGE_RUNTIME_SPECIFICITY_FIX */
body[data-tool-mode="motion"] .effectsLogoProperty.motionControl>input[type="range"] {
  height: 44px !important;
  min-height: 44px !important;
  cursor: ew-resize !important;
  touch-action: none !important;
}

/* LOGO_RANGE_NATIVE_DRAG_FINAL */
body[data-tool-mode="motion"] .effectsLogoProperty.motionControl,
body[data-tool-mode="motion"] .effectsLogoProperty.motionControl .effectsRangeVisual,
body[data-tool-mode="motion"] .effectsLogoProperty.motionControl .effectsRangeTrack,
body[data-tool-mode="motion"] .effectsLogoProperty.motionControl .effectsRangeHandle,
body[data-tool-mode="motion"] .effectsLogoProperty.motionControl>input[type="range"] {
  cursor: ew-resize !important;
}

body[data-tool-mode="motion"] .effectsLogoProperty.motionControl>input[type="range"]::-webkit-slider-thumb {
  cursor: ew-resize !important;
}

body[data-tool-mode="motion"] .effectsLogoProperty.motionControl>input[type="range"]::-moz-range-thumb {
  cursor: ew-resize !important;
}

.effectsTextSection {
  border-top: 1px solid #303030;
  padding: 28px 20px;
}

.effectsTextHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.effectsTextHeading h2 {
  margin: 0;
  font-size: 22px;
}

.effectsTextAdd,
.effectsTextButton {
  border: 1px solid #444;
  background: #222;
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.effectsTextBody {
  display: grid;
  gap: 18px;
}

.effectsTextList {
  display: grid;
  gap: 10px;
}

.effectsTextItem {
  border: 1px solid #3d3d3d;
  border-radius: 14px;
  padding: 10px;
}

.effectsTextItem.isSelected {
  border-color: #888;
}

.effectsTextSelect {
  width: 100%;
  border: 0;
  background: #1c1c1c;
  color: #fff;
  border-radius: 9px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effectsTextActions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.effectsTextActions button {
  padding: 7px 10px;
}

.effectsTextEditor {
  border-top: 1px solid #303030;
  padding-top: 18px;
  display: grid;
  gap: 16px;
}

.effectsTextField {
  display: grid;
  gap: 7px;
  color: #aaa;
}

.effectsTextInput {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  border: 1px solid #444;
  border-radius: 12px;
  background: #222;
  color: #fff;
  padding: 10px 12px;
  font: inherit;
}

.effectsTextField textarea {
  min-height: 92px;
  resize: vertical;
}

.effectsTextColor {
  width: 100%;
  height: 44px;
  border: 1px solid #444;
  border-radius: 12px;
  background: #222;
  padding: 5px;
}

.effectsTextRange .motionControlEditor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px auto;
  align-items: center;
  gap: 8px;
}

.effectsTextRange input[type="range"] {
  width: 100%;
  cursor: ew-resize;
}

.effectsTextRange .motionNumberInput {
  min-width: 0;
  width: 100%;
}

.effectsTextSuffix {
  margin-left: -38px;
  pointer-events: none;
  color: #aaa;
}

.effectsTextSegment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #202020;
  border-radius: 13px;
  padding: 4px;
}

.effectsTextSegment button {
  border: 0;
  background: transparent;
  color: #888;
  padding: 10px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}

.effectsTextSegment button.isActive {
  background: #353535;
  color: #fff;
}

.effectsTextSection {
  border-top: 1px solid #303030;
  padding: 28px 20px;
}

.effectsTextHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.effectsTextHeading h2 {
  margin: 0;
  font-size: 22px;
}

.effectsTextAdd,
.effectsTextButton {
  border: 1px solid #444;
  background: #222;
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.effectsTextBody {
  display: grid;
  gap: 18px;
}

.effectsTextList {
  display: grid;
  gap: 10px;
}

.effectsTextItem {
  border: 1px solid #3d3d3d;
  border-radius: 14px;
  padding: 10px;
}

.effectsTextItem.isSelected {
  border-color: #888;
}

.effectsTextSelect {
  width: 100%;
  border: 0;
  background: #1c1c1c;
  color: #fff;
  border-radius: 9px;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effectsTextActions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.effectsTextActions button {
  padding: 7px 10px;
}

.effectsTextEditor {
  border-top: 1px solid #303030;
  padding-top: 18px;
  display: grid;
  gap: 16px;
}

.effectsTextField {
  display: grid;
  gap: 7px;
  color: #aaa;
}

.effectsTextInput {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  border: 1px solid #444;
  border-radius: 12px;
  background: #222;
  color: #fff;
  padding: 10px 12px;
  font: inherit;
}

.effectsTextField textarea {
  min-height: 92px;
  resize: vertical;
}

.effectsTextColor {
  width: 100%;
  height: 44px;
  border: 1px solid #444;
  border-radius: 12px;
  background: #222;
  padding: 5px;
}

.effectsTextRange .motionControlEditor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px auto;
  align-items: center;
  gap: 8px;
}

.effectsTextRange input[type="range"] {
  width: 100%;
  cursor: ew-resize;
}

.effectsTextRange .motionNumberInput {
  min-width: 0;
  width: 100%;
}

.effectsTextSuffix {
  margin-left: -38px;
  pointer-events: none;
  color: #aaa;
}

.effectsTextSegment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #202020;
  border-radius: 13px;
  padding: 4px;
}

.effectsTextSegment button {
  border: 0;
  background: transparent;
  color: #888;
  padding: 10px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}

.effectsTextSegment button.isActive {
  background: #353535;
  color: #fff;
}

.motionInspector {
  display: flex;
  flex-direction: column;
}

.motionInspector>.motionInspectorSection {
  flex: none;
}

.motionInspector>.motionCanvasInspector {
  order: 1;
}

.motionInspector>.motionExportSection {
  order: 2;
}

.motionInspector>.motionBackgroundSection {
  order: 3;
}

.motionInspector>.effectsLogoAdd {
  order: 4;
}

.motionInspector>.effectsTextSection {
  order: 5;
}

.motionInspector>.motionInspectorSection:not(.motionCanvasInspector):not(.motionExportSection):not(.motionBackgroundSection):not(.effectsLogoAdd):not(.effectsTextSection) {
  order: 6;
}

.effectsTextRange {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.effectsTextRange>.motionControlTitle {
  grid-column: 1/-1;
}

.effectsTextRange .motionControlEditor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 12px !important;
}

.effectsTextRange input[type="range"] {
  display: block !important;
  opacity: 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #555 !important;
  cursor: ew-resize !important;
}

.effectsTextRange input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: #fff !important;
  cursor: ew-resize !important;
}

.effectsTextRange .motionNumberInput {
  box-sizing: border-box !important;
  width: 88px !important;
  height: 40px !important;
  border: 1px solid #444 !important;
  border-radius: 12px !important;
  background: #222 !important;
  color: #fff !important;
  text-align: right !important;
  padding: 0 28px 0 10px !important;
}

.effectsTextRange .effectsTextSuffix {
  justify-self: end;
  margin-left: 0 !important;
  margin-right: 10px;
  transform: translateY(-32px);
  height: 0;
  pointer-events: none;
  color: #aaa;
}

.effectsTextField>.motionControlTitle,
.effectsTextRange>.motionControlTitle {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #aaa !important;
}

/* Step 5 property popovers and panel polish */
.effectsPropertyBackdrop {
  position: fixed;
  inset: 0;
  z-index: 118;
  border: 0;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.effectsPropertyBackdrop.isOpen {
  opacity: 1;
  pointer-events: auto;
}

.effectsPropertyPopup {
  position: fixed !important;
  z-index: 120 !important;
  top: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  width: min(400px, calc(100vw - 48px)) !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid #414141 !important;
  border-radius: 18px !important;
  background: #151515 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  display: grid !important;
  gap: 16px !important;
}

.effectsPropertyPopup.effectsPopupClosed {
  display: none !important;
}

.effectsPropertyHeader,
.effectsLogoEditorHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 40px !important;
}

.effectsPropertyHeader strong,
.effectsLogoEditorHead strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.effectsPropertyClose {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #414141;
  border-radius: 10px;
  background: #222;
  color: #fff;
  cursor: pointer;
}

.effectsPropertyClose svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.effectsTextSection,
.effectsLogoAdd {
  padding: 20px !important;
}

.effectsTextHeading {
  margin: 0 !important;
}

.effectsTextHeading h2,
.effectsLogoAdd>h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.effectsTextAdd,
.effectsLogoAddButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.effectsTextBody,
.effectsLogoBody {
  gap: 12px !important;
}

.effectsTextItem,
.effectsLogoItem {
  padding: 9px !important;
  border-radius: 12px !important;
}

.effectsTextSelect,
.effectsLogoSelect {
  min-height: 36px !important;
  padding: 7px 9px !important;
  font-size: 14px !important;
}

.effectsTextActions,
.effectsLogoActions {
  gap: 6px !important;
  margin-top: 7px !important;
}

.effectsTextActions button,
.effectsLogoAction {
  display: grid !important;
  place-items: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

.effectsTextEditor {
  border-top: 0 !important;
}

.effectsTextEditor>.effectsTextField,
.effectsTextEditor>.motionControl,
.effectsTextEditor>.effectsTextAlign {
  margin: 0 !important;
}

.effectsTextField,
.effectsTextRange {
  gap: 6px !important;
}

.effectsTextField>.motionControlTitle,
.effectsTextRange>.motionControlTitle,
.effectsLogoAlign>.motionControlTitle {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #aaa !important;
  line-height: 1.3 !important;
}

.effectsTextInput {
  min-height: 40px !important;
  border-radius: 11px !important;
  padding: 9px 11px !important;
  font-size: 14px !important;
}

.effectsTextField textarea {
  min-height: 104px !important;
}

.effectsTextSegment,
.effectsLogoAlignGroup {
  min-height: 44px !important;
  border-radius: 12px !important;
  padding: 4px !important;
}

.effectsTextSegment button,
.effectsLogoAlignGroup button {
  min-height: 36px !important;
  padding: 0 8px !important;
  font-size: 14px !important;
}

.effectsTextColor {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.effectsTextHexColor {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 11px;
  border: 1px solid #414141;
  border-radius: 11px;
  background: #222;
}

.effectsTextColorSwatch {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.effectsTextHexInput {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
}

.effectsTextRange {
  display: grid !important;
  grid-template-columns: 1fr !important;
  background: transparent !important;
  padding: 0 !important;
}

.effectsTextRange .motionControlEditor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  gap: 12px !important;
}

.effectsTextRange input[type="range"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 20px !important;
  opacity: 1 !important;
  position: relative !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(#5a5a5a, #5a5a5a) center/100% 4px no-repeat !important;
  cursor: ew-resize !important;
}

.effectsTextRange input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  cursor: ew-resize !important;
}

.effectsTextRange .motionNumberInput {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 88px !important;
  height: 40px !important;
  padding: 0 26px 0 10px !important;
  border: 1px solid #414141 !important;
  border-radius: 11px !important;
  background: #222 !important;
  color: #fff !important;
  text-align: right !important;
  font-size: 15px !important;
}

.effectsTextRange .effectsTextSuffix {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 10px 0 0 !important;
  transform: none !important;
  height: auto !important;
  font-size: 13px !important;
  color: #999 !important;
}

.effectsLogoProperty {
  margin: 0 !important;
}

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

.effectsLogoReplace {
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.settingsPanelBody {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: #151515 !important;
}

.settingsPanelBody>.panel {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  background: #151515 !important;
}

.settingsPanelBody>.panel:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

.assetPanelBody {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.assetPanelBody>.zoom:before {
  left: 0 !important;
  font-size: 14px !important;
}

.assetPanelBody>#fileBtn,
.assetPanelBody>button:not([hidden]) {
  box-sizing: border-box !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.assetPanel .effectsLogoAdd,
.assetPanel .effectsTextSection {
  box-sizing: border-box !important;
  width: 100% !important;
}

.assetPanel .effectsLogoAdd>h2,
.assetPanel .effectsTextHeading h2 {
  font-size: 18px !important;
}

.assetPanel .effectsLogoAddButton,
.assetPanel .effectsTextAdd {
  font-size: 14px !important;
  min-height: 40px !important;
}

@media (max-width: 767px) {
  .effectsPropertyPopup {
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: calc(100vw - 24px) !important;
  }
}

#settingsPanel .settingsPanelBody {
  padding: 0 0 100px !important;
  background: #151515 !important;
}

#settingsPanel .settingsPanelBody>.panel {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 20px 16px !important;
  margin: 0 !important;
  background: #151515 !important;
}

#settingsPanel .settingsPanelBody>.panel:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#assetPanel .assetPanelBody {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

#assetPanel .zoom:before {
  left: 0 !important;
  font-size: 14px !important;
}

#assetPanel #assetFileUpload {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
}

#assetPanel .effectsLogoAdd,
#assetPanel .effectsTextSection {
  padding: 20px 16px !important;
}

#assetPanel .effectsLogoAdd>h2,
#assetPanel .effectsTextHeading h2 {
  font-size: 18px !important;
}

#assetPanel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 180px !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup {
  top: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  width: min(249px, calc(100vw - 48px)) !important;
  max-height: min(620px, calc(100vh - 48px)) !important;
  padding: 16px !important;
  border-radius: 14px !important;
  gap: 12px !important;
}

.effectsPropertyPopup .effectsPropertyHeader,
.effectsPropertyPopup .effectsLogoEditorHead {
  min-height: 32px !important;
}

.effectsPropertyPopup .effectsPropertyHeader strong,
.effectsPropertyPopup .effectsLogoEditorHead strong {
  font-size: 16px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.effectsPropertyPopup .effectsLogoEditorHead {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.effectsPropertyPopup .effectsPropertyClose {
  width: 36px !important;
  height: 36px !important;
}

.effectsPropertyPopup .effectsTextEditor {
  gap: 12px !important;
}

.effectsPropertyPopup .effectsTextRange {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  grid-template-rows: 15px 28px !important;
  grid-template-areas: "title title" "range editor" !important;
  gap: 6px 8px !important;
  width: 100% !important;
}

.effectsPropertyPopup .effectsTextRange>.motionControlTitle {
  grid-area: title !important;
}

.effectsPropertyPopup .effectsTextRange>.effectsRangeVisual,
.effectsPropertyPopup .effectsTextRange>input[type="range"] {
  grid-area: range !important;
  width: 100% !important;
}

.effectsPropertyPopup .effectsTextRange>.motionControlEditor {
  grid-area: editor !important;
  display: flex !important;
  width: 76px !important;
  height: 28px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .effectsTextRange .motionControlValueInput {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  font-size: 13px !important;
}

.effectsPropertyPopup .effectsTextRange .motionControlSuffix {
  font-size: 12px !important;
}

.effectsPropertyPopup .effectsTextField {
  gap: 6px !important;
}

.effectsPropertyPopup .effectsTextField>.motionControlTitle,
.effectsPropertyPopup .effectsTextRange>.motionControlTitle,
.effectsPropertyPopup .effectsLogoAlign>.motionControlTitle {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 15px !important;
}

.effectsPropertyPopup .effectsTextInput {
  width: 100% !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
}

.effectsPropertyPopup .effectsTextField textarea {
  min-height: 64px !important;
}

.effectsPropertyPopup .effectsTextSegment,
.effectsPropertyPopup .effectsLogoAlignGroup {
  width: 100% !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .effectsTextHexColor {
  width: 100% !important;
}

.effectsPropertyPopup .effectsLogoProperty {
  margin: 0 !important;
}

.effectsPropertyPopup {
  width: min(300px, calc(100vw - 32px)) !important;
  max-height: min(560px, calc(100vh - 32px)) !important;
  top: 16px !important;
  right: 16px !important;
  padding: 14px !important;
  gap: 10px !important;
}

.effectsPropertyDragHandle {
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
}

.effectsPropertyDragHandle.isDragging {
  cursor: grabbing !important;
}

.effectsPropertyPopup .effectsTextEditor {
  gap: 10px !important;
}

.effectsTypographyGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 8px;
}

.effectsTypographyGrid .effectsTypographyFamily {
  grid-column: 1/-1;
}

.effectsTypographyGrid .effectsTextField {
  min-width: 0;
}

.effectsTypographyGrid .effectsTextInput {
  height: 34px !important;
  min-height: 34px !important;
  padding: 6px 8px !important;
}

.effectsPropertyPopup .effectsTextNumber {
  appearance: textfield !important;
  text-align: right !important;
}

.effectsPropertyPopup .effectsTextNumber::-webkit-inner-spin-button {
  opacity: 0.5;
}

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

.effectsTextAlignmentGrid .effectsTextSegment {
  min-height: 38px !important;
  padding: 3px !important;
}

.effectsTextAlignmentGrid .effectsTextSegment button {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 0 5px !important;
  font-size: 12px !important;
}

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

.effectsTextDimensionsTitle {
  grid-column: 1/-1;
}

.effectsTextDimensions .effectsTextField {
  position: relative;
}

.effectsTextDimensions .effectsTextField>.motionControlTitle {
  position: absolute;
  z-index: 1;
  left: 9px;
  top: 27px;
  color: #888 !important;
  pointer-events: none;
}

.effectsTextDimensions .effectsTextInput {
  padding-left: 28px !important;
  text-align: right !important;
}

.effectsPropertyPopup .effectsTextField textarea {
  min-height: 58px !important;
  max-height: 78px !important;
  resize: vertical;
}

.effectsPropertyPopup .effectsTextHexColor {
  height: 36px !important;
}

.effectsPropertyPopup .effectsTextColorSwatch {
  height: 24px !important;
}

@media (max-width: 767px) {
  .effectsPropertyPopup {
    width: min(300px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
    top: 12px !important;
    right: 12px !important;
  }
}

.effectsPropertyPopup>.effectsPropertyHeader,
.effectsPropertyPopup>.effectsLogoEditorHead {
  position: sticky !important;
  top: -14px !important;
  z-index: 6 !important;
  margin: -14px -14px 2px !important;
  padding: 12px 14px 10px !important;
  background: #151515 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.effectsTypographyGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.effectsTextAlignmentGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
}

.effectsTextAlignmentGrid .effectsTextSegment {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.effectsTextAlignmentGrid .motionSegmentOption {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.effectsTextAlignmentGrid .motionSegmentOption svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effectsTextColorSwatch {
  background: var(--effects-swatch, #000) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 4px !important;
}

.effectsTextDimensions .effectsTextField {
  position: relative !important;
}

.effectsTextDimensions .effectsTextInput {
  padding-left: 26px !important;
  padding-right: 27px !important;
}

.effectsDimensionUnit {
  position: absolute;
  right: 8px;
  bottom: 9px;
  color: #999;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

.effectsTextAlignmentGrid .motionSegmentOption {
  font-size: 0 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
}

.effectsTextAlignmentGrid .effectsTextField:first-child .motionSegmentOption:nth-child(1) {
  background-image: url("https://api.iconify.design/mingcute/align-left-line.svg?color=%23ffffff") !important;
}

.effectsTextAlignmentGrid .effectsTextField:first-child .motionSegmentOption:nth-child(2) {
  background-image: url("https://api.iconify.design/mingcute/align-center-line.svg?color=%23ffffff") !important;
}

.effectsTextAlignmentGrid .effectsTextField:first-child .motionSegmentOption:nth-child(3) {
  background-image: url("https://api.iconify.design/mingcute/align-right-line.svg?color=%23ffffff") !important;
}

.effectsTextAlignmentGrid .effectsTextField:last-child .motionSegmentOption:nth-child(1) {
  background-image: url("https://api.iconify.design/mingcute/align-top-line.svg?color=%23ffffff") !important;
}

.effectsTextAlignmentGrid .effectsTextField:last-child .motionSegmentOption:nth-child(2) {
  background-image: url("https://api.iconify.design/mingcute/align-vertical-center-line.svg?color=%23ffffff") !important;
}

.effectsTextAlignmentGrid .effectsTextField:last-child .motionSegmentOption:nth-child(3) {
  background-image: url("https://api.iconify.design/mingcute/align-bottom-line.svg?color=%23ffffff") !important;
}

.effectsPropertyBackdrop {
  z-index: 2198 !important;
}

.effectsPropertyPopup {
  z-index: 2200 !important;
}

.effectsLogoEditor.effectsPropertyPopup {
  position: fixed !important;
  z-index: 2200 !important;
  isolation: isolate !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.effectsLogoEditor.effectsPropertyPopup.effectsPopupClosed {
  display: none !important;
}

.effectsLogoEmpty {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #888 !important;
  margin: 8px 0 0 !important;
}

.effectsNoSpinner {
  -moz-appearance: textfield !important;
}

.effectsNoSpinner::-webkit-inner-spin-button,
.effectsNoSpinner::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.effectsTextEditor {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 12px !important;
}

.effectsTextEditor>* {
  grid-column: 1/-1;
}

.effectsTextEditor>.effectsTextHalf {
  grid-column: auto !important;
  min-width: 0 !important;
}

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

.effectsTextNumberOnly input[type="range"] {
  display: none !important;
}

.effectsTextNumberOnly .motionNumberInput {
  grid-column: 1 !important;
  width: 100% !important;
  text-align: right !important;
}

.effectsStrokeColorField .effectsTextHexColor {
  height: 40px !important;
  box-sizing: border-box !important;
}

.effectsTextDimensions input[type="number"],
.effectsTypographyGrid input[type="number"] {
  -moz-appearance: textfield !important;
}

.effectsTextDimensions input[type="number"]::-webkit-inner-spin-button,
.effectsTextDimensions input[type="number"]::-webkit-outer-spin-button,
.effectsTypographyGrid input[type="number"]::-webkit-inner-spin-button,
.effectsTypographyGrid input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.effectsTextAlignmentGrid .motionSegmentOption {
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  overflow: hidden !important;
}

.effectsTextAlignmentGrid .motionSegmentOption>* {
  display: none !important;
}

.effectsTextHexColor {
  height: 40px !important;
  box-sizing: border-box !important;
}

.effectsTextColorSwatch {
  width: 30px !important;
  height: 30px !important;
}

.effectsTextDimensions {
  grid-column: 1/-1 !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly input[type="range"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .motionControlEditor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .motionNumberInput {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextHexColor {
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextColorSwatch {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
}

.effectsPropertyBackdrop,
.effectsPropertyBackdrop.isOpen {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .effectsRangeVisual,
body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .effectsRangeTrack,
body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .effectsRangeHandle {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .motionControlEditor {
  display: block !important;
  width: 100% !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .motionControlValueInput {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 28px 0 12px !important;
  text-align: right !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextNumberOnly .motionControlSuffix {
  top: 50% !important;
  right: 10px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextHexColor {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  gap: 8px !important;
  border-radius: 8px !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextColorSwatch {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-radius: 3px !important;
}

body[data-tool-mode] .effectsPropertyPopup .effectsTextHexInput {
  height: 20px !important;
  font-size: 14px !important;
}

.effectsTextDimensions .effectsTextField {
  position: relative !important;
  display: block !important;
  height: 40px !important;
  min-height: 40px !important;
}

.effectsTextDimensions .effectsTextField>.motionControlTitle {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.effectsTextDimensions .effectsTextField>.effectsTextInput {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 28px 0 32px !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

.effectsTextDimensions .effectsTextField>.effectsDimensionUnit {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Unified compact text-property fields */
.effectsPropertyPopup .effectsTypographyGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px 12px !important;
}

.effectsPropertyPopup .effectsTypographyFamily {
  grid-column: 1 / -1 !important;
}

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

.effectsPropertyPopup .motionControlTitle {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #aaa !important;
}

.effectsPropertyPopup .effectsTextInput,
.effectsPropertyPopup .motionControlEditor {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid #404040 !important;
  border-radius: 10px !important;
  background: #202020 !important;
  color: #f4f4f4 !important;
}

.effectsPropertyPopup .effectsTypographyGrid .effectsTextInput {
  padding: 0 12px !important;
  font-size: 14px !important;
}

.effectsPropertyPopup .effectsTextNumberOnly {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 36px !important;
  gap: 6px !important;
  align-items: stretch !important;
}

.effectsPropertyPopup .effectsTextNumberOnly>.motionControlTitle {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.effectsPropertyPopup .effectsTextNumberOnly>.motionControlEditor {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 0 12px !important;
}

.effectsPropertyPopup .effectsTextNumberOnly .motionControlValueInput {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  text-align: right !important;
  font-size: 14px !important;
}

.effectsPropertyPopup .effectsTextNumberOnly .motionControlSuffix {
  position: static !important;
  align-self: center !important;
  margin-left: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.effectsPropertyPopup .effectsTextDimensions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px 12px !important;
}

.effectsPropertyPopup .effectsTextDimensionsTitle {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

.effectsPropertyPopup .effectsTextDimensions .effectsTextField {
  height: 40px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 10px !important;
  border: 1px solid #404040 !important;
  border-radius: 10px !important;
  background: #202020 !important;
}

.effectsPropertyPopup .effectsTextDimensions .effectsTextInput {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: right !important;
  font-size: 14px !important;
}

.effectsPropertyPopup .effectsDimensionUnit {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 100% !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #aaa !important;
}

.effectsPropertyPopup .effectsTextDimensions .motionControlTitle {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.effectsTextAlignmentGrid .motionSegmentedControl>.motionSegmentOption.is-active,
.effectsTextAlignmentGrid .motionSegmentedControl>.motionSegmentOption[aria-pressed="true"] {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 36px !important;
  column-gap: 0 !important;
  row-gap: 6px !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlTitle {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField {
  position: relative !important;
  grid-template-columns: 24px minmax(0, 1fr) 22px !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.motionControlTitle,
.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsTextInput,
.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsDimensionUnit {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsTextInput {
  grid-column: 2 !important;
  width: 100% !important;
  text-align: right !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsDimensionUnit {
  grid-column: auto !important;
  justify-self: end !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlValueInput {
  position: static !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlSuffix {
  position: static !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  height: 100% !important;
  margin: 0 0 0 5px !important;
  line-height: 1 !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlSuffix {
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Stable inspector hover targets and unified add actions */
.motionInspector button,
.assetPanel button,
.motionInspector label.effectsLogoAddButton,
.assetPanel label.effectsLogoAddButton {
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.motionInspector button>*,
.assetPanel button>*,
.motionInspector label.effectsLogoAddButton>*:not(input),
.assetPanel label.effectsLogoAddButton>*:not(input) {
  pointer-events: none !important;
}

.motionInspector button:hover,
.assetPanel button:hover,
.motionInspector label.effectsLogoAddButton:hover,
.assetPanel label.effectsLogoAddButton:hover {
  transform: none !important;
  animation: none !important;
}

.effectsLogoAddButton,
.effectsTextAdd,
.motionPanelHeading .motionUploadButton {
  box-sizing: border-box !important;
  min-width: auto !important;
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #444 !important;
  border-radius: 9px !important;
  background-color: #242424 !important;
  color: #f4f4f4 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

.effectsLogoAddButton:hover,
.effectsTextAdd:hover,
.motionPanelHeading .motionUploadButton:hover {
  background-color: #303030 !important;
  border-color: #505050 !important;
}

.effectsLogoAdd {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.effectsLogoAdd+.effectsTextSection,
.motionInspector .effectsTextSection {
  border-top: 1px solid #303030 !important;
  box-shadow: none !important;
}

.motionInspector .effectsLogoAdd .effectsLogoAddButton,
.assetPanel .effectsLogoAdd .effectsLogoAddButton {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* Text popup fields: match the compact color editor height and right-align numeric values */
.effectsPropertyPopup .effectsTextEditor {
  --effects-text-field-height: 28px;
}

.effectsPropertyPopup .effectsTypographyGrid .effectsTextInput,
.effectsPropertyPopup .effectsTextDimensions>.effectsTextField,
.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor,
.effectsPropertyPopup .effectsStrokeColorField .effectsTextHexColor,
.effectsPropertyPopup .effectsTextField>.effectsTextHexColor {
  height: var(--effects-text-field-height) !important;
  min-height: var(--effects-text-field-height) !important;
  max-height: var(--effects-text-field-height) !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .effectsTypographyGrid .effectsTextInput {
  padding-block: 0 !important;
  line-height: calc(var(--effects-text-field-height) - 2px) !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  padding: 0 10px !important;
  overflow: hidden !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlValueInput {
  position: static !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: var(--effects-text-field-height) !important;
  text-align: right !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlSuffix {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  line-height: var(--effects-text-field-height) !important;
  white-space: nowrap !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 10px !important;
  overflow: hidden !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.motionControlTitle {
  position: static !important;
  margin: 0 !important;
  line-height: var(--effects-text-field-height) !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsTextNumber {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: var(--effects-text-field-height) !important;
  text-align: right !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsDimensionUnit {
  position: static !important;
  margin: 0 !important;
  line-height: var(--effects-text-field-height) !important;
}

.effectsPropertyPopup .effectsTextEditor {
  --effects-text-field-height: 28px;
}

.effectsPropertyPopup .effectsTypographyGrid .effectsTextInput,
.effectsPropertyPopup .effectsTextDimensions>.effectsTextField,
.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  padding: 0 10px !important;
  overflow: hidden !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlValueInput {
  position: static !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 28px !important;
  text-align: right !important;
}

.effectsPropertyPopup .motionControl.effectsTextRange.effectsTextNumberOnly.effectsTextHalf>.motionControlEditor>.motionControlSuffix {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  margin-left: 4px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 28px !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 10px !important;
  overflow: hidden !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.motionControlTitle,
.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsDimensionUnit {
  position: static !important;
  margin: 0 !important;
  line-height: 28px !important;
}

.effectsPropertyPopup .effectsTextDimensions>.effectsTextField>.effectsTextNumber {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 28px !important;
  text-align: right !important;
}

/* Dither Sticker/Text parity with Motion inspector */
[data-logo-add="dither"],
[data-text-editor="dither"] {
  padding: 16px !important;
}

[data-logo-add="dither"]>h2 {
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

[data-text-editor="dither"] .effectsTextHeading>h2 {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

[data-logo-add="dither"]>.effectsLogoAddButton,
[data-text-editor="dither"] .effectsTextHeading>.effectsTextAdd {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

[data-logo-add="dither"]>.effectsLogoEmpty,
[data-logo-add="dither"] .effectsLogoEmpty {
  margin-top: 10px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

[data-logo-add="dither"].effectsLogoAdd>h2 {
  font-size: 16px !important;
  line-height: 22px !important;
}

[data-logo-add="dither"].effectsLogoAdd>.effectsLogoAddButton {
  font-size: 13px !important;
  font-weight: 700 !important;
}

[data-text-editor="dither"].effectsTextSection .effectsTextHeading>.effectsTextAdd {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Shared overlay section typography: match Dither Image section title */
[data-logo-add]>h2,
[data-text-editor] .effectsTextHeading>h2 {
  font-size: 15px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

[data-logo-add]>.effectsLogoAddButton,
[data-text-editor] .effectsTextHeading>.effectsTextAdd {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

/* Shared compact one-line Sticker/Text rows */
[data-logo-add] .effectsLogoItem,
[data-text-editor] .effectsTextItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 6px 8px !important;
  border: 1px solid #343434 !important;
  border-radius: 10px !important;
  background: #1d1d1d !important;
  box-sizing: border-box !important;
}

[data-logo-add] .effectsLogoSelect,
[data-text-editor] .effectsTextSelect {
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

[data-logo-add] .effectsLogoActions,
[data-text-editor] .effectsTextActions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

[data-logo-add] .effectsLogoAction,
[data-text-editor] .effectsTextButton {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 8px !important;
  background: #232323 !important;
  color: #f4f4f4 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

[data-logo-add] .effectsLogoAction:hover,
[data-text-editor] .effectsTextButton:hover {
  background: #303030 !important;
  border-color: #505050 !important;
}

[data-logo-add] .effectsLogoAction>svg,
[data-logo-add] .effectsLogoActionText {
  display: none !important;
}

[data-logo-add] .effectsLogoAction::before,
[data-text-editor] .effectsTextButton::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

[data-logo-add] .effectsLogoAction:nth-child(1)::before,
[data-text-editor] .effectsTextButton:nth-child(1)::before {
  -webkit-mask-image: url("https://api.iconify.design/mingcute/eye-2-line.svg") !important;
  mask-image: url("https://api.iconify.design/mingcute/eye-2-line.svg") !important;
}

[data-logo-add] .effectsLogoAction:nth-child(2)::before,
[data-text-editor] .effectsTextButton:nth-child(2)::before {
  -webkit-mask-image: url("https://api.iconify.design/mingcute/lock-line.svg") !important;
  mask-image: url("https://api.iconify.design/mingcute/lock-line.svg") !important;
}

[data-logo-add] .effectsLogoAction:nth-child(3)::before,
[data-text-editor] .effectsTextButton:nth-child(3)::before {
  -webkit-mask-image: url("https://api.iconify.design/mingcute/delete-2-line.svg") !important;
  mask-image: url("https://api.iconify.design/mingcute/delete-2-line.svg") !important;
}

[data-logo-add] .effectsLogoList,
[data-text-editor] .effectsTextList {
  display: grid !important;
  gap: 6px !important;
}

section.effectsLogoAdd[data-logo-add="dither"]>h2,
section.motionInspectorSection.effectsLogoAdd[data-logo-add="motion"]>h2,
section.effectsTextSection[data-text-editor="dither"] .effectsTextHeading>h2,
section.motionInspectorSection.effectsTextSection[data-text-editor="motion"] .effectsTextHeading>h2 {
  font-size: 15px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

#assetPanel section.effectsLogoAdd[data-logo-add="dither"]>h2,
#assetPanel section.effectsTextSection[data-text-editor="dither"] .effectsTextHeading>h2 {
  font-size: 15px !important;
  line-height: 18px !important;
  font-weight: 650 !important;
}

/* Shared spacing between Text header controls and list */
[data-text-editor] .effectsTextHeading+.effectsTextBody {
  margin-top: 10px !important;
}

.effectsTextCanvasAlign .motionSegmentedControl {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.effectsTextCanvasAlign .motionSegmentOption,
.effectsLogoAlignGroup button {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  color: transparent !important;
}

.effectsTextCanvasAlign .motionSegmentOption span {
  display: none;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(1),
.effectsLogoAlignGroup button:nth-child(1) {
  background-image: url("https://api.iconify.design/mingcute/align-left-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(2),
.effectsLogoAlignGroup button:nth-child(2) {
  background-image: url("https://api.iconify.design/mingcute/align-top-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(3),
.effectsLogoAlignGroup button:nth-child(3) {
  background-image: url("https://api.iconify.design/mingcute/align-center-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(4),
.effectsLogoAlignGroup button:nth-child(4) {
  background-image: url("https://api.iconify.design/mingcute/align-bottom-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(5),
.effectsLogoAlignGroup button:nth-child(5) {
  background-image: url("https://api.iconify.design/mingcute/align-right-line.svg?color=%23ffffff") !important;
}

.effectsLogoAlignGroup button svg {
  display: none !important;
}

/* Sticker popup parity: keep the compact left-panel control geometry. */
.effectsPropertyPopup .effectsLogoEditorHead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: calc(100% - 44px) !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .effectsLogoEditorHead strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.effectsPropertyPopup .effectsLogoReplace {
  justify-self: end !important;
  flex: 0 0 auto !important;
}

.effectsPropertyPopup .effectsLogoAlignGroup {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 4px !important;
  gap: 0 !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .effectsLogoAlignGroup button {
  display: block !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  box-shadow: none !important;
}

.effectsPropertyPopup .effectsLogoAlignGroup button:hover,
.effectsPropertyPopup .effectsLogoAlignGroup button:focus-visible,
.effectsPropertyPopup .effectsLogoAlignGroup button:active {
  background-color: #303030 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  box-shadow: none !important;
}

.effectsPropertyPopup .effectsLogoProperty {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  grid-template-rows: 15px 28px !important;
  grid-template-areas: "title title" "range editor" !important;
  gap: 6px 8px !important;
  width: 100% !important;
}

.effectsPropertyPopup .effectsLogoProperty>.motionControlTitle {
  grid-area: title !important;
}

.effectsPropertyPopup .effectsLogoProperty>.effectsRangeVisual,
.effectsPropertyPopup .effectsLogoProperty>input[type="range"] {
  grid-area: range !important;
  width: 100% !important;
}

.effectsPropertyPopup .effectsLogoProperty>.motionControlEditor {
  grid-area: editor !important;
  display: flex !important;
  align-items: center !important;
  width: 76px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.effectsPropertyPopup .effectsLogoProperty .motionControlValueInput {
  width: 100% !important;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 26px !important;
}

.effectsPropertyPopup .effectsLogoProperty .motionControlSuffix {
  font-size: 12px !important;
  line-height: 26px !important;
}

/* Keep sticker title, Replace and Close in one full-width header row. */
.effectsPropertyPopup .effectsLogoEditorHead {
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
}

.effectsPropertyPopup .effectsLogoEditorHead>.effectsPropertyClose {
  position: static !important;
  inset: auto !important;
  grid-column: auto !important;
  justify-self: end !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
}

/* canvas-position-align-icons-v1 */
.effectsTextCanvasAlign .motionSegmentOption:nth-child(1),
.effectsLogoAlignGroup button:nth-child(1) {
  background-image: url("https://api.iconify.design/mingcute/align-arrow-left-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(2),
.effectsLogoAlignGroup button:nth-child(2) {
  background-image: url("https://api.iconify.design/mingcute/align-arrow-up-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(3),
.effectsLogoAlignGroup button:nth-child(3) {
  background-image: url("https://api.iconify.design/mingcute/aiming-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(4),
.effectsLogoAlignGroup button:nth-child(4) {
  background-image: url("https://api.iconify.design/mingcute/align-arrow-down-line.svg?color=%23ffffff") !important;
}

.effectsTextCanvasAlign .motionSegmentOption:nth-child(5),
.effectsLogoAlignGroup button:nth-child(5) {
  background-image: url("https://api.iconify.design/mingcute/align-arrow-right-line.svg?color=%23ffffff") !important;
}

/* compact timeline controls */
.effectsLayerIcon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  padding: 0 !important;
  border-radius: 5px !important;
}

.effectsLayerIcon svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  pointer-events: none !important;
}

body.effectsMultiLayerSelection .effectsPropertyPopup {
  display: none !important;
}

/* effects-popup-unified-v12 */
.effectsPropertyPopup,
.effectsShapePopup,
.effectsTextEditor,
.effectsStickerPopup,
.effectsLogoProperty {
  box-sizing: border-box !important;
  padding: 0 !important;
}

.effectsPropertyHeader,
.effectsShapePopupHeader {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(127, 127, 127, 0.24) !important;
  overflow: visible !important;
}

.effectsPropertyHeader strong,
.effectsShapePopupHeader strong {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.effectsPropertyHeader button:last-child,
.effectsShapePopupHeader button {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.effectsShapePopupBody {
  box-sizing: border-box !important;
  padding: 0 24px 24px !important;
}

.effectsShapePopupBody>.effectsShapePopupHeader {
  width: calc(100% + 48px) !important;
  margin: 0 -24px 8px !important;
}

.effectsTextEditor> :not(.effectsPropertyHeader) {
  box-sizing: border-box !important;
  width: calc(100% - 48px) !important;
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.effectsStickerPopupBody,
.effectsLogoProperty>.effectsPropertyPopupBody {
  box-sizing: border-box !important;
  padding: 20px 24px 24px !important;
}

.effectsPropertyPopup input:not([type="range"]):not([type="color"]),
.effectsShapePopup input:not([type="range"]):not([type="color"]),
.effectsPropertyPopup select,
.effectsShapePopup select {
  font-size: 13px !important;
  line-height: normal !important;
  min-height: 26px !important;
  height: 26px !important;
}

.effectsPropertyPopup textarea,
.effectsShapePopup textarea {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* effects-popup-unified-v12b */
html body .effectsShapePopup .effectsShapePopupHeader,
html body .effectsTextEditor .effectsPropertyHeader,
html body .effectsStickerPopup .effectsPropertyHeader,
html body .effectsLogoProperty .effectsPropertyHeader {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(127, 127, 127, 0.24) !important;
  overflow: visible !important;
}

html body .effectsShapePopup .effectsShapePopupHeader strong,
html body .effectsTextEditor .effectsPropertyHeader strong,
html body .effectsStickerPopup .effectsPropertyHeader strong,
html body .effectsLogoProperty .effectsPropertyHeader strong {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .effectsShapePopup .effectsShapePopupHeader button,
html body .effectsTextEditor .effectsPropertyHeader button:last-child,
html body .effectsStickerPopup .effectsPropertyHeader button:last-child,
html body .effectsLogoProperty .effectsPropertyHeader button:last-child {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

html body .effectsShapePopup .effectsShapePopupBody {
  box-sizing: border-box !important;
  padding: 0 24px 24px !important;
}

html body .effectsShapePopup .effectsShapePopupBody>.effectsShapePopupHeader {
  width: calc(100% + 48px) !important;
  margin: 0 -24px 8px !important;
}

html body .effectsTextEditor> :not(.effectsPropertyHeader) {
  box-sizing: border-box !important;
  width: calc(100% - 48px) !important;
  margin-left: 24px !important;
  margin-right: 24px !important;
}

html body .effectsPropertyPopup input:not([type="range"]):not([type="color"]),
html body .effectsShapePopup input:not([type="range"]):not([type="color"]),
html body .effectsPropertyPopup select,
html body .effectsShapePopup select {
  font-size: 13px !important;
  line-height: normal !important;
  min-height: 26px !important;
  height: 26px !important;
}

html body .effectsPropertyPopup textarea,
html body .effectsShapePopup textarea {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* effects-popup-unified-v12c */
html body .effectsShapePopup,
html body .effectsTextEditor.effectsPropertyPopup,
html body .effectsStickerPopup,
html body .effectsLogoProperty {
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* effects-popup-unified-v12d */
html body .effectsShapePopup.effectsShapePopup,
html body .effectsTextEditor.effectsTextEditor.effectsPropertyPopup,
html body .effectsStickerPopup.effectsStickerPopup,
html body .effectsLogoProperty.effectsLogoProperty {
  box-sizing: border-box !important;
  padding: 0 !important;
}

/* effects-popup-header-unified-v13 */
html body .effectsShapePopup .effectsShapePopupHeader,
html body .effectsTextEditor .effectsPropertyHeader,
html body .effectsStickerPopup .effectsPropertyHeader,
html body .effectsLogoProperty .effectsPropertyHeader {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden !important;
}

html body .effectsShapePopup .effectsShapePopupHeader strong,
html body .effectsTextEditor .effectsPropertyHeader strong,
html body .effectsStickerPopup .effectsPropertyHeader strong,
html body .effectsLogoProperty .effectsPropertyHeader strong {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .effectsShapePopup .effectsShapePopupHeader button:last-child,
html body .effectsTextEditor .effectsPropertyHeader button:last-child,
html body .effectsStickerPopup .effectsPropertyHeader button:last-child,
html body .effectsLogoProperty .effectsPropertyHeader button:last-child {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
}

html body .effectsShapePopup .effectsShapePopupHeader button:last-child svg,
html body .effectsTextEditor .effectsPropertyHeader button:last-child svg,
html body .effectsStickerPopup .effectsPropertyHeader button:last-child svg,
html body .effectsLogoProperty .effectsPropertyHeader button:last-child svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  transform: none !important;
}

html body .effectsShapePopup .effectsShapePopupBody>.effectsShapePopupHeader {
  width: calc(100% + 48px) !important;
  margin: 0 -24px 8px !important;
}

/* effects-popup-header-unified-v13b */
html body .effectsTextEditor.effectsPropertyPopup>.effectsPropertyHeader,
html body .effectsStickerPopup.effectsPropertyPopup>.effectsPropertyHeader,
html body .effectsLogoProperty.effectsPropertyPopup>.effectsPropertyHeader,
html body .effectsShapePopup.effectsShapePopup .effectsShapePopupBody>.effectsShapePopupHeader {
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 16px !important;
  align-items: center !important;
}

html body .effectsShapePopup.effectsPropertyPopup>.effectsShapePopupHeader {
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 16px !important;
  align-items: center !important;
}
/* sticker-popup-canonical-v21 */
html body .effectsLogoEditor.effectsPropertyPopup{position:fixed!important;top:16px!important;right:16px!important;width:300px!important;max-width:calc(100vw - 32px)!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important;}
html body .effectsLogoEditor.effectsPropertyPopup>.effectsPropertyHeader{width:100%!important;height:60px!important;min-height:60px!important;margin:0!important;padding:8px 16px!important;display:flex!important;align-items:center!important;gap:8px!important;box-sizing:border-box!important;}
html body .effectsLogoEditor.effectsPropertyPopup>.effectsPropertyHeader>strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
html body .effectsLogoEditor.effectsPropertyPopup>.effectsLogoEditorContent.effectsPropertyAccordionInner{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important;margin:0!important;padding:16px!important;box-sizing:border-box!important;overflow-x:hidden!important;}
html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoAlign{display:grid!important;gap:8px!important;width:100%!important;margin:0!important;padding:0!important;}
html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoAlignGroup{width:100%!important;height:44px!important;min-height:44px!important;padding:0 6px!important;box-sizing:border-box!important;}
html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoSizeGrid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;}
html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoSizeGrid>.effectsTextDimensionsTitle{grid-column:1/-1!important;margin:0!important;}
html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoSizeField{width:100%!important;min-width:0!important;max-width:none!important;height:36px!important;box-sizing:border-box!important;}
html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoProperty{width:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;} html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoProperty>*{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;} html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoAlignGroup button{display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;line-height:0!important;} html body .effectsLogoEditor.effectsPropertyPopup .effectsLogoAlignGroup button svg{display:block!important;width:24px!important;height:24px!important;margin:auto!important;transform:none!important;}
html body .motionHexColorEditor{width:100%!important;height:28px!important;min-height:28px!important;max-height:28px!important;box-sizing:border-box!important;}
html body .motionHexColorSwatch{width:16px!important;height:16px!important;min-width:16px!important;margin:0!important;}
html body input.motionHexColorInput{height:20px!important;min-height:20px!important;max-height:20px!important;padding:0!important;font-size:14px!important;line-height:20px!important;box-sizing:border-box!important;}

html body .motionControl .motionHexColorEditor input.motionHexColorInput{height:20px!important;min-height:20px!important;max-height:20px!important;padding:0!important;font-size:14px!important;line-height:20px!important;}