/* Fotor Photo Editor 1.0.268 — stage 2: canvas, workspace and history hierarchy. */

@media (min-width: 769px) {
  #fotor-root .editor-shell:not(.is-mobile) .workspace {
    background:
      radial-gradient(circle at 50% 44%, rgba(66, 113, 178, .055), transparent 38%),
      #07090c !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .preview-canvas {
    border-radius: 16px !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .055),
      0 22px 54px rgba(0, 0, 0, .34) !important;
  }

  /* Keep every canvas command self-contained; the dock is no longer a second frame. */
  #fotor-root .editor-shell:not(.is-mobile) .ws-float-controls {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .ws-float-controls .fc-sep {
    width: 1px !important;
    height: 18px !important;
    margin: 0 2px !important;
    background: rgba(255, 255, 255, .10) !important;
    opacity: 1 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .ws-info-pill {
    right: 18px !important;
    bottom: 18px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 10px !important;
    background: rgba(10, 13, 18, .94) !important;
    color: rgba(205, 213, 223, .82) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    opacity: 1 !important;
  }

  /* History is quieter until it is the current item or the user points at it. */
  #fotor-root .editor-shell:not(.is-mobile) .right-gallery .rg-list > .rg-item {
    opacity: .78 !important;
    transition: opacity .16s ease, border-color .16s ease, background-color .16s ease !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .right-gallery .rg-list > .rg-item:hover,
  #fotor-root .editor-shell:not(.is-mobile) .right-gallery .rg-list > .rg-item:focus-visible,
  #fotor-root .editor-shell:not(.is-mobile) .right-gallery .rg-list > .rg-item.active {
    opacity: 1 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .right-gallery .rg-list > .rg-item:focus-visible {
    outline: 2px solid rgba(79, 151, 247, .70) !important;
    outline-offset: 2px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .right-gallery .rg-badge {
    padding: 3px 6px !important;
    background: rgba(7, 10, 14, .92) !important;
    color: #eef4fc !important;
    font-size: 9px !important;
  }
}

@media (max-width: 768px) {
  /* Match the accepted tool-button treatment in the permanent workspace actions. */
  #fotor-root .editor-shell.is-mobile .ws-top-actions {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #fotor-root .editor-shell.is-mobile .preview-canvas {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-gallery-item {
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-gallery-item.active {
    border-color: rgba(76, 151, 247, .88) !important;
    box-shadow: inset 0 0 0 1px rgba(76, 151, 247, .18) !important;
  }
}